feat(extractor): follow Tailwind v4 palette, theme tokens, modifiers and composed utilities

[owjs3901]

Refs #687 (B, 권장 항목 1부: TW-05, TW-07, TW-08, TW-09, TW-11, TW-12). #705 (fix/tailwind-classes) 위에 쌓은 PR이며, #705가 먼저 병합되어야 합니다. 이 PR의 base는 main이라 병합 전에는 #705의 커밋도 함께 보입니다.

요약

className의 Tailwind class를 Tailwind CSS v4 기준으로 맞춥니다.

• TW-08 색상: 하드코딩된 v3 팔레트를 v4 기본 팔레트(oklch)로 교체했습니다. devup.json의 색상은 Tailwind 테마 값처럼 쓸 수 있습니다(bg-primary, text-text → var(--primary), var(--text)). 같은 이름이면 devup 값이 팔레트보다 먼저입니다.
• TW-11 중요도·불투명도: p-4!, !p-4는 모든 선언에 !important를 붙입니다. bg-red-500/50, /[71.37%], /[0.5], /(--alpha)는 v4처럼 color-mix(in oklab, <색> <알파>, transparent)로 만듭니다.
• TW-07 필터: blur-*, brightness-*, contrast-*, grayscale, hue-rotate-*, invert, saturate-*, sepia와 backdrop-* 짝이 서로 덮어쓰지 않고 --tw-blur 같은 변수와 filter/backdrop-filter의 합성 값으로 합쳐집니다. -webkit-backdrop-filter도 v4처럼 함께 씁니다.
• TW-09 그라디언트: bg-linear-to-r, bg-linear-45, bg-conic-*, bg-radial-*(보간 /oklch 등과 임의 값 포함)와 from-*, via-*, to-*(색, % 위치, 임의 값)가 --tw-gradient-* 변수로 합성됩니다. v4에 없는 bg-gradient-to-*는 원문 그대로 둡니다.
• TW-12 모션: animate-spin/ping/pulse/bounce가 참조하는 @keyframes를 한 번만 내보냅니다. transition, transition-*, duration-*, delay-*, ease-*는 v4의 속성 목록과 --tw-duration/--tw-ease 변수 구성을 따릅니다(duration-250처럼 임의 정수도 ms).
• TW-05 자식 대상: space-x/y-*, divide-x/y-*, divide-<색>, divide-solid 등이 v4와 같은 :where(& > :not(:last-child)) 선택자로 자식에 적용됩니다(-space-x-4, *-reverse 포함). 변형 선택자와도 합쳐집니다(hover:space-x-4 → :where(&:hover > :not(:last-child))).
• shadow-*도 v4 구성으로 맞췄습니다: shadow-md는 --tw-shadow와 합성 box-shadow, shadow-<색>은 --tw-shadow-color, shadow-card는 devup shadow 토큰(var(--card)).

@property 규칙은 이제 클래스가 실제로 쓰는 사용자 정의 속성에 대해서만(그리고 키프레임과 함께) 개별 규칙으로 내보냅니다.

동작

확인한 실제 출력(probe.ts, devup.json에 primary/text 색과 card shadow가 있음):

<Box className="bg-red-500/50 text-primary border-text/20 shadow-card p-4!" />
<Box className="blur-sm grayscale backdrop-blur-md backdrop-opacity-50" />
<Box className="bg-linear-to-r from-red-500 via-10% to-primary" />
<Box className="animate-spin transition duration-300 ease-out" />
<Box className="space-x-4 divide-y-2 divide-primary md:space-y-2" />
<Box className="prose card bg-gradient-to-r drop-shadow-md bg-nothing/50" />

.a{background-color:color-mix(in oklab,oklch(63.7% .237 25.331) 50%,transparent)}
.b{color:var(--primary)}
.c{border-color:color-mix(in oklab,var(--text) 20%,transparent)}
.d{--tw-shadow:var(--card)}
.e{box-shadow:var(--tw-inset-shadow,0 0 #0000),var(--tw-inset-ring-shadow,0 0 #0000),var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.f{padding:1rem !important}
.g{--tw-blur:blur(8px)}  .i{--tw-grayscale:grayscale(100%)}  .j{--tw-backdrop-blur:blur(12px)}  .m{--tw-backdrop-opacity:opacity(50%)}
.h{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}
.n{--tw-gradient-position:to right in oklab}  .o{background-image:linear-gradient(var(--tw-gradient-stops))}
.p{--tw-gradient-from:oklch(63.7% .237 25.331)}  .r{--tw-gradient-via-position:10%}  .s{--tw-gradient-to:var(--primary)}
.q{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}
@keyframes spin{to{transform:rotate(360deg)}}  .t{animation:spin 1s linear infinite}
.v{transition-timing-function:var(--tw-ease,cubic-bezier(.4,0,.2,1))}  ._{transition-timing-function:cubic-bezier(0,0,.2,1)}  .w{transition-duration:var(--tw-duration,150ms)}  .y{transition-duration:300ms}
:where(.aa > :not(:last-child)){margin-inline-start:calc(1rem * var(--tw-space-x-reverse))}
:where(.ab > :not(:last-child)){margin-inline-end:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}
:where(.ae > :not(:last-child)){border-top-width:calc(2px * var(--tw-divide-y-reverse))}
:where(.ag > :not(:last-child)){border-color:var(--primary)}
@media(min-width:768px){:where(.ah > :not(:last-child)){margin-block-start:calc(.5rem * var(--tw-space-y-reverse))}}

prose card bg-gradient-to-r drop-shadow-md bg-nothing/50는 코드에 그대로 남습니다.

v4 CSS와 다르게 쓰는 부분 (같은 결과)

• 팔레트 값은 :root의 --color-*가 아니라 값 그대로 씁니다(빌드가 테마 변수를 내보내지 않으므로). devup 색상은 devup이 내보내는 var(--이름)입니다.
• 그라디언트 보간은 v4의 @supports 중첩 대신 to right in oklab를 바로 씁니다(Baseline 2024 기준).
• space-*/divide-*의 --tw-*-reverse: 0은 규칙 안에 쓰지 않고 @property의 초기값으로 둡니다. *-reverse class가 어느 순서로 와도 맞습니다.
• shadow-*는 --tw-inset-shadow 등 ring 쪽 변수에 var(--x, 0 0 #0000) 대체값을 둡니다.

새로 생기는 오류

없음. 이 PR의 모든 변경은 해석 가능한 class의 출력을 바꾸거나, 해석하지 못하는 class를 원문 그대로 두는 것입니다.

남는 한계

• drop-shadow-*: v4는 테마 변수를 거쳐 색을 바꾸는 구성이라 정확히 재현하지 못해 원문 그대로 남깁니다(이전의 v3 값은 틀려서 지웠습니다).
• ring-*는 이전 구현 그대로입니다(--tw-ring-color가 없으면 효과가 없고, shadow-*와 합성되지 않음). TW-14 범위로 보고합니다.
• bg-red-500/[0.5]처럼 숫자 임의 불투명도는 v4처럼 50%로 바꾸지만, inherit/50처럼 v4가 쓸모없는 값을 만드는 경우는 원문 그대로 둡니다. from-(--x)처럼 종류를 알 수 없는 변수 정지점도 원문 그대로 둡니다.
• Tailwind v4의 CSS @theme/@utility/@custom-variant는 이 PR 범위가 아닙니다(devup.json 테마만 연결).

검증

• 유틸리티 군마다 v4 소스(utilities.ts, theme.css)와 문서의 CSS를 기준으로 한 테스트: 팔레트·불투명도·!, 필터 17개 함수와 임의 값, 그라디언트(방향·각도·보간·conic·radial·임의 값·정지점), shadow, transition/duration/delay/ease/animate와 키프레임, space/divide와 변형 선택자. 해석하지 않는 class(잘못된 숫자, 음수, 알 수 없는 값)가 원문으로 남는지도 확인합니다.
• cargo fmt --all, cargo +1.99 clippy --workspace --all-targets -- -D warnings, cargo test --workspace 통과. WASM 재빌드 후 bun run build, bun test(5474 pass, 0 fail, 커버리지 100%), bun lint(기존 경고 2개 외 추가 없음).
• 추가 발견(범위 밖): ring-*가 정의되지 않은 --tw-ring-color를 읽는 문제(위 남는 한계).

W40 main 반영 (2026-10-06)

• 2026-10-06: main의 a935315c34b45aeda6dc156e29a5c76df51b76bd까지 병합했습니다 (병합 head: faf23c563110e0bdeb72173dec55dafdb8a64ff2).
• 충돌 해결: main을 포함한 fix(extractor): compile Tailwind classes one by one with v4 variants and declarations #705 head031e8b54를 병합했습니다. libs/css/src/theme_tokens.rs의 색상·그림자 테스트와 main typography assertion을 함께 유지했고 파일 전체가 feat(extractor): compile containers, masks, 3D transforms, functional @utility and class helpers #749 참조와 일치합니다.
• 검증: CI37425736019 success; 네 검증 작업과 codecov/patch 모두 통과, MERGEABLE/CLEAN. Ubuntu Rust100%(9983/9983), Bun5482 pass/0 fail 및100%, landing 두 모드130개씩 통과. 직렬 빌드/1.99clippy/전체 훅 통과. 실제 WASM <div className="card a b c d e unknown:p-2" />와 .a{padding:1rem}, @media(hover:hover){.b:hover{background-color:oklch(63.7% .237 25.331)}}를 확인했습니다. Windows tarpaulin97.95%; LSP 시간 초과로 진단 결과는 얻지 못했습니다.
• 새로 생기는 오류: 이번 병합으로 추가되는 오류는 없습니다. 기존 PR의 동작 및 남는 한계는 유지합니다.

2026-10-08 업데이트: main 11790bef를 merge commit으로 병합했습니다; 충돌 파일: 없음; 충돌 없이 자동 병합했고, 이미 포함된 squash 원본은 조상 확인 후 ours 전략으로 중복 적용하지 않았습니다.

[github-actions]

Changepacks

@devup-ui/wasm@1.0.83 → 1.0.84 - bindings/devup-ui-wasm/package.json

Patch

• style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.
• Tailwind classes in a className: each class compiles on its own and every class Tailwind does not define (custom, plugin and analytics classes) stays as written, where any recognized class used to rebuild the whole className without them and could rewrite part of another class; a class touching a template interpolation (icon-${name}) is left as written, and template classNames no longer get spaces inserted around interpolations. A class whose variant is not understood stays as written instead of applying unconditionally; variants follow Tailwind v4: stacked variants compose (hover:focus: matches the element itself), hover is guarded by @media (hover: hover), group-/peer- use the group/peer marker classes (and group-hover/name), and data-, aria-, has-, nth-, , **, supports-[…] and [&…]/[@media …] variants compile. Utilities emit all their declarations (size-, rounded-t-, truncate, sr-only, not-sr-only, text-sm with its line height, text-sm/6, leading-), translate/rotate/scale/skew compose through Tailwind's individual properties and registered variables (@Property) with negative values kept negative, and arbitrary values follow Tailwind's grammar: spaces for underscores except in url() and var() names, _ for an underscore, spaces around math operators, type hints, [property:value] and (--variable) shorthands. Words that only share a utility's prefix (select-wrapper, order-summary, cursor-foo) are no longer compiled
• Tailwind classes in a className follow Tailwind CSS v4: colors are the v4 default palette (oklch) and the colors and shadows of devup.json theme are usable as Tailwind theme values (bg-primary, text-text, shadow-card, as var(--token)); the opacity modifier (bg-red-500/50, /[71.37%], /(--alpha)) mixes with color-mix as v4 does; a trailing or leading ! makes every declaration important; blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and their backdrop-* forms compose through Tailwind's custom properties instead of overwriting filter and backdrop-filter; gradients use bg-linear-, bg-conic- and bg-radial-* with from-, via- and to-* composing through the gradient variables (bg-gradient-to-* is not defined by v4 and stays as written); animate-* brings the @Keyframes it names and transition, duration, delay and ease follow v4; space-* and divide-* apply to the children like v4 (:where(& > :not(:last-child))); @Property rules are emitted only for the custom properties a class uses. Anything the build cannot reproduce exactly (drop-shadow-*) stays as written in the className. No new build errors

@devup-ui/bun-plugin@1.0.22 → 1.0.23 - packages/bun-plugin/package.json

Patch

• Bun plugin works with Bun.build: DevupUI() (from @devup-ui/bun-plugin/register) serves the generated stylesheet to the bundler's CSS loader once every other module is loaded, so the build emits a CSS output with the styles of the whole bundle instead of an empty module; class names are short there and readable under the runtime (debug option). Files importing the packages Devup UI takes the place of (@emotion/react, @emotion/styled, styled-components, @vanilla-extract/css), @stylexjs/stylex, or a subpath or re-export of these or @devup-ui/react, are compiled instead of skipped

@devup-ui/components@0.1.60 → 0.1.61 - packages/components/package.json

Patch

• Auto-update: depends on '@devup-ui/vite-plugin' via a local workspace dependency

@devup-ui/eslint-plugin@1.0.22 → 1.0.23 - packages/eslint-plugin/package.json

Patch

• style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.

@devup-ui/next-plugin@1.0.90 → 1.0.91 - packages/next-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/plugin-utils' via a local workspace dependency

@devup-ui/plugin-utils@1.0.17 → 1.0.18 - packages/plugin-utils/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

@devup-ui/rsbuild-plugin@1.0.67 → 1.0.68 - packages/rsbuild-plugin/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

@devup-ui/vite-plugin@1.0.73 → 1.0.74 - packages/vite-plugin/package.json

Patch

• Auto-update: depends on '@devup-ui/plugin-utils' via a local workspace dependency

@devup-ui/webpack-plugin@1.0.71 → 1.0.72 - packages/webpack-plugin/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
libs/css/src/theme_tokens.rs	100.00% <100.00%> (ø)
libs/extractor/src/lib.rs	100.00% <ø> (ø)
libs/extractor/src/prop_modify_utils.rs	100.00% <100.00%> (ø)
libs/extractor/src/tailwind.rs	100.00% <100.00%> (ø)
libs/extractor/src/tailwind_children.rs	100.00% <100.00%> (ø)
libs/extractor/src/tailwind_color.rs	100.00% <100.00%> (ø)
libs/extractor/src/tailwind_effects.rs	100.00% <100.00%> (ø)
libs/extractor/src/tailwind_motion.rs	100.00% <100.00%> (ø)
libs/sheet/src/lib.rs	100.00% <ø> (ø)
libs/sheet/src/theme.rs	100.00% <100.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.