feat: Tailwind CSS v4 migration (rocketicons + ignition + nativewind v4)#150
Merged
Conversation
- Upgrade tailwindcss dependency from 3.4.1 to 4.2.1 - Add @tailwindcss/postcss as devDependency - Replace config() API with theme() API for TW v4 PluginAPI - Remove @rocketclimb/tw-utils dependency (sanitize inlined) - Remove prefix interpolation (TW v4 handles prefixes via CSS) - Infer PluginAPI type from createPlugin Parameters<> - Rewrite integration tests to use @tailwindcss/postcss + @plugin - Update config-handler test mocks for theme() API BREAKING CHANGE: Plugin now requires tailwindcss >=4.0.0
TW v4 handles prefix automatically for addComponents() output. Users configure prefix via @import 'tailwindcss' prefix(xp); and the engine automatically prefixes generated selectors. No manual prefix handling needed in plugin code.
Integration tests (22): - Default class: inline-block, padding, .icon-ri scoping - Size classes: test.each for all 11 sizes (xs through 7xl) - Variants: outlined/filled with stroke/fill CSS rules - Colors: sky-500 default color - Safelisted: icon-default always present without content - CSS structure: no unresolved @apply, proper @layer, clean output Config-handler edge cases (10 new): - Empty, null, string-only colors - DEFAULT color handling - No baseStyle, no variants - Auto-500 shade selection and first-shade fallback - Whitespace sanitization - Compound color-size splitting (sky-500-base) Styles-generator edge cases (8 new): - Chaining, class merging, ordering - Custom class prefix - Native mode: prop merging, base classes, variant skipping Test count: 14 → 57 (4x increase)
- Upgrade nativewind from 2.0.11 to 4.2.2 (stable, TW v4 compat) - Update icons peerDeps: nativewind >=4, tailwindcss >=4 - Remove @rocketclimb/tw-utils from root and icons dependencies - Add packages/native-test Expo app for native icon verification - NativeWind v4.2.2 + TW v4 + rocketicons showcase - Test page: 11 sizes, variants, colors, dark mode toggle - iOS only (macOS dev team), isolated from root workspaces
Three v4 migration regressions in ignition: - Unlayered html/body bg rule was beating @layer utilities, so `bg-background dark:bg-background-dark` on <body> was overridden by `background-color: var(--color-white)` even when <html>.dark was set — body rendered white in dark mode, header (slate-900/0.7) looked gray over it, docs content area looked light. Wrap base styles in @layer base. - `var(--spacing-16)` is undefined in v4 (only `--spacing` is exposed); the invalid calc dropped `.content-area` height, so the page scrolled instead of the inner container, and the lg:static header scrolled away. Switched to `calc(var(--spacing) * 16)`. - `.modal-context` had `min-h: 100vh` (a floor), so on the home page the wrapper grew past viewport and the page scrolled. Cap at `height: 100vh` on lg:, and add `lg:min-h-0` down the flex chain so the cap propagates to the overflow-y-auto child. Also dropped ~180 lines of duplicate component definitions that were already inside @layer components above. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings the
@rocketicons/tailwindplugin, the ignition docs site, and the React Native side over to the Tailwind v4 / NativeWind v4 ecosystem.@rocketicons/tailwind: upgraded plugin to TW v4 (CSS-first@plugin,@theme,@custom-variantmodel). Adds full prefix support documentation and comprehensive plugin test coverage (57 tests acrossindex.test.ts,config-handler.test.ts,styles-generator.test.ts).native-testapp exercising the v4 runtime with the icons plugin so we don't regress the React Native path.packages/core:index.native.tsxadjusted for NativeWind v4 className handling.ignition: migrated to Tailwind v4 (CSS-first config inglobals.css, droppedtailwind.config.ts, moved component styles into@layer components, dark variant via@custom-variant) and to Next.js 15 asyncparamsAPI across all route handlers and pages.fix(ignition): restore TW v4 dark mode and sticky header— unlayeredhtml, body { background-color: ... }was beating Tailwind utilities under v4's layer system, so<body>rendered white in dark mode (header looked gray over it, docs felt "light"); plusvar(--spacing-N)no longer exists in v4 →.content-arealost its height cap → page scrolled and thelg:staticheader scrolled away. Wrapped base CSS in@layer base, switched tocalc(var(--spacing) * N), capped.modal-contextat viewport height onlg, addedlg:min-h-0down the flex chain so the cap propagates.chore: add root dev scripts proxying to ignition workspace— convenience sonpm run devworks from the repo root.This is the v4-readiness branch we want on
developso the nextdevelop→mainPR can publish a newrocketiconsrelease with TW v4 support to npm.Commits (8)
feat(tailwind):upgrade@rocketicons/tailwindplugin to Tailwind CSS v4docs(tailwind):add TW v4 prefix support documentationtest(tailwind):add comprehensive test coverage for TW v4 pluginfeat:upgrade NativeWind v2→v4.2.2 + add native test Expo appfix(native-test):add NativeWind type augmentation + agent commit policyfeat:migrate ignition to Tailwind CSS v4 + Next.js 15 async paramsfix(ignition):restore TW v4 dark mode and sticky headerchore:add root dev scripts proxying to ignition workspaceTest plan
npm run test-allpasses (verified locally and via the pre-push hook on the last two commits — 22 utils tests + 57 tailwind plugin tests + ignition/cli green)<body>resolves to slate-900 in dark, sticky header on both/en/and/en/docs/getting-started/(verified via Playwright with computed-style assertions)@rocketicons/tailwindplugin produces correct utilities for both web (TW v4) and native (NativeWind v4) targetsdevelop)