fix: correct CSS output edges and declaration diagnostics

[owjs3901]

Refs #685 (CSS-08, JSX-07, JSX-08, JSX-10). #702 위에 쌓은 브랜치이며 #702가 먼저 병합되어야 합니다. PR의 base는 main입니다.

요약

• 레거시 vendor flex 숫자를 길이로 변환하지 않고 단위 없이 유지합니다.
• 중첩 반응형 배열이 같은 브레이크포인트에 충돌하는 클래스를 만드는 대신 위치를 포함한 빌드 오류를 냅니다.
• JSX-08은 #702의 수정으로 이미 해결됨을 원본 WASM 출력으로 확인하고 회귀 테스트를 추가합니다.
• 알 수 없는 최신/실험적 CSS 이름은 계속 통과시킵니다. 현재 Chrome/Edge/Firefox/Safari 어디에서도 지원하지 않는 닫힌 목록만 오류로 처리하며, vendor 접두사와 문서화된 shorthand는 유지합니다.
• Rust 1.99에서 필요한 비교 assertion 수정과 Patch changepack을 포함합니다.

동작

수정 전 기준은 #702의 d94ef3c66946e2c0e4df3b8c11e4a84c4d07dfc7입니다. 이 기준을 직접 WASM으로 빌드한 뒤 각 항목을 프로브했습니다.

항목	기준 브랜치에서 확인한 결과	변경 정책
CSS-08	flex={1}/flexGrow={2}는 이미 정상, msFlex={2}/msFlexOrder={2}/WebkitBoxFlex={2}는 8px	vendor 숫자 속성은 단위 없이 유지
JSX-07	color={[["red","blue"],"green"]}는 level-1 blue와 green 클래스를 동시에 출력	중첩 배열을 위치가 있는 빌드 오류로 처리
JSX-08	selectors={{body:{color:'pink'}}}는 이미 오류, :hover와 & > p는 정상	추가 변경 없이 회귀 테스트
JSX-10	box-align:center, scroll-snap-coordinate:0 0처럼 무효 선언을 출력	확인된 dead name만 오류

브라우저 근거

2026-10-04에 MDN browser-compat-data를 조회했습니다. 표의 대상은 접두사가 없는 이름이며 -webkit-, -moz-, -ms- 등의 호환 이름은 차단하지 않습니다.

이름	현재 Chrome / Edge / Firefox / Safari	대체 속성	근거
box-align	모두 접두사 없이 지원하지 않음	align-items	BCD
box-pack	모두 접두사 없이 지원하지 않음	justify-content	BCD
box-flex	모두 접두사 없이 지원하지 않음	flex-grow	BCD
box-flex-group	모두 접두사 없이 지원하지 않음	현대 Flexbox로 작성	BCD
box-orient	모두 접두사 없이 지원하지 않음	flex-direction, 필요한 경우 WebkitBoxOrient	BCD
box-ordinal-group	모두 접두사 없이 지원하지 않음	order	BCD
box-direction	모두 접두사 없이 지원하지 않음	flex-direction	BCD
box-lines	모두 접두사 없이 지원하지 않음	flex-wrap	BCD
flex-order	BCD에 현재 속성 없음, 현대 속성은 order	order	BCD order
flex-positive	BCD는 IE10의 -ms-flex-positive만 옛 대체 이름으로 기록	flex-grow	BCD flex-grow
flex-negative	현대 속성은 flex-shrink, 옛 이름은 접두사 필요	flex-shrink	BCD flex-shrink
flex-preferred-size	현대 속성은 flex-basis, 옛 이름은 접두사 필요	flex-basis	BCD flex-basis
scroll-snap-coordinate	Chrome/Edge/Safari 미지원, Firefox 68에서 제거	scroll-snap-align	BCD 제거 PR
scroll-snap-destination	Chrome/Edge/Safari 미지원, Firefox 68에서 제거	scroll-padding, scroll-snap-type	BCD 제거 PR
scroll-snap-points-x	현재 네 브라우저 미지원, Firefox 68에서 제거	scroll-snap-type, scroll-snap-align	BCD 제거 PR
scroll-snap-points-y	현재 네 브라우저 미지원, Firefox 68에서 제거	scroll-snap-type, scroll-snap-align	BCD 제거 PR
scroll-snap-type-x	현재 네 브라우저 미지원, Firefox 68에서 제거	scroll-snap-type	BCD 제거 PR
scroll-snap-type-y	현재 네 브라우저 미지원, Firefox 68에서 제거	scroll-snap-type	BCD 제거 PR

원래 조사에서 무효로 분류한 stroke-color는 Safari 11.1부터 지원되므로 계속 통과합니다. ime-mode도 Firefox 3부터 지원되므로 유지합니다. 새로운 별칭은 만들지 않습니다.

새로 생기는 오류

• 반응형 배열의 한 브레이크포인트 값이 다시 배열인 경우.
• 위 18개 dead name을 JSX 스타일 속성, css()/styled() 객체, CSS 텍스트, globalCss() 또는 keyframes() 선언 이름으로 작성한 경우.
• 모든 오류에는 파일:줄:열, 문제가 된 코드, 이유와 대체 방법이 포함됩니다. 직접 작성한 JSX 속성, 객체 리터럴, CSS 텍스트는 정확한 키 위치를 사용합니다. 평가·계산·import를 통해 만들어진 선언은 그 선언을 만든 원본 style/globalStyle/keyframes/styleVariants 호출이 작성된 파일의 호출 위치와 키 경로를 사용하며, 생성된 코드의 위치는 사용하지 않습니다. JSX-08의 body 오류는 #702에서 이미 생긴 오류이며 이 PR이 새로 추가하는 오류는 아닙니다.

남는 한계

• CSS 전체를 allowlist로 검증하지 않습니다. 지원되는 실험적 속성, 알 수 없는 draft 이름, vendor 호환 속성은 그대로 출력됩니다.
• TypeScript 타입 수정은 #738의 소유 범위로 남깁니다. 이 브랜치에서는 타입을 변경하지 않습니다.

숫자 처리에서 바뀐 대표 이름은 -ms-flex, -ms-flex-order, -ms-flex-positive, -ms-flex-negative, -webkit-box-flex, -webkit-box-ordinal-group, -ms-grid-column-span, -ms-grid-row-span, -moz-tab-size입니다. -webkit-line-clamp도 단위 없는 값이 유지되는지 검사합니다. webkit/moz/ms/o 접두사의 animation-duration, animation-delay, transition-duration, transition-delay는 모두 ms로 처리합니다. OAnimationDuration 같은 입력의 출력 이름에 빠졌던 -o-의 첫 -도 수정합니다. vendor 이름 목록 전체를 unprefixed 숫자 형식과 비교하는 테이블 테스트와 실제 WASM CSS 테스트를 함께 둡니다.

검증

• cargo fmt --all, cargo check --workspace, Rust 1.99 strict clippy, cargo test --workspace 통과: Rust 테스트 2,932개 통과.
• WASM 재빌드와 루트 패키지 빌드 통과. bun test: 5,474개 통과, 0 실패, 함수/라인 커버리지 100%.
• bun lint: 오류 없음, 기준 브랜치에 있던 경고 2개만 유지.
• commit hook의 lint/tarpaulin/Bun 테스트 통과. Windows tarpaulin과 별도로 Linux CI의 100% 기준을 확인했습니다.
• 실제 public WASM 경로로 프로브를 실행해 아래 CSS와 위치가 포함된 오류를 확인했습니다.

수정 후 WASM CSS 발췌:

.-ms-flex-0-2--255{-ms-flex:2}
.-ms-flex-order-0-2--255{-ms-flex-order:2}
.-webkit-box-flex-0-2--255{-webkit-box-flex:2}
.-webkit-box-ordinal-group-0-2--255{-webkit-box-ordinal-group:2}
.flex-0-1--255{flex:1}
.flex-grow-0-2--255{flex-grow:2}
.padding-0-8px--255{padding:8px}
.-webkit-animation-duration-0-2ms--255{-webkit-animation-duration:2ms}
.-webkit-transition-delay-0-3ms--255{-webkit-transition-delay:3ms}
.-o-animation-duration-0-2ms--255{-o-animation-duration:2ms}
.-o-transition-delay-0-3ms--255{-o-transition-delay:3ms}
.stroke-color-0-red--255{stroke-color:red}
.ime-mode-0-active--255{ime-mode:active}

nested.tsx:2:36: `<Box>` cannot use `["red", "blue"]` at build time: responsive arrays must be flat; each entry supplies one breakpoint value or selector style object, not another array
dead-template.tsx:4:3: `styled()` cannot use `box-align` at build time: unprefixed box-align has no browser implementation; use display: flex and align-items
dead-ve.css.ts:3:24: `style()` cannot use `boxAlign` at build time: unprefixed box-align has no browser implementation; use display: flex and align-items
stylex-dead.tsx:2:45: `stylex.create()` cannot use `box-align` at build time: unprefixed box-align has no browser implementation; use display: flex and align-items
nested-evaluated.css.ts:5:20: `style()` cannot use `p -> 0` at build time: responsive arrays must be flat; each entry supplies one breakpoint value or selector style object, not another array
nested-direct.css.ts:4:32: `style()` cannot use `[1, 2]` at build time: responsive arrays must be flat; each entry supplies one breakpoint value or selector style object, not another array

수정 전 WASM 프로브의 실제 CSS 발췌:

.-ms-flex-0-8px--255{-ms-flex:8px}
.-ms-flex-order-0-8px--255{-ms-flex-order:8px}
.-webkit-box-flex-0-8px--255{-webkit-box-flex:8px}
.flex-0-1--255{flex:1}
.flex-grow-0-2--255{flex-grow:2}
.padding-0-8px--255{padding:8px}
.color-0-red--255{color:red}
@media(min-width:480px){.color-1-blue--255{color:blue}.color-1-green--255{color:green}}
.box-align-0-center--255{box-align:center}
.scroll-snap-coordinate-0-0_s_0--255{scroll-snap-coordinate:0 0}

기준 브랜치의 selector 프로브:

selectors.tsx:2:42: `<Box>` cannot use `body` at build time: a selector key names a pseudo-class or pseudo-element, as `_hover` or `hover`, or is a selector, as `&:hover`, `& > p` or `.parent &`

.color-0-red-_a__c_hover-255:hover{color:red}
.color-0-blue-_a__s__gt__s_p-255 > p{color:blue}

최종 CI 결과

최종 head: 402109f97e94714fc316351761b931d6554d799d.

CI run 37245278743에서 코드/빌드/테스트/커버리지/E2E 검증은 모두 통과했습니다.

• Linux Rust 커버리지: 100.00% (10,278 / 10,278 라인). 임계값이나 제외 설정을 변경하지 않았습니다.
• Bun 테스트와 커버리지: 100%.
• benchmark, landing-next-e2e, vinext-rsc-css-e2e job: 성공.
• publish job의 lint, Rust/Bun 테스트, landing per-file/singleCss 빌드 및 E2E 검증: 성공.
• 전체 run의 유일한 실패 원인은 Upload to codecov.io 단계의 외부 Codecov CLI 다운로드 장애입니다. cli.codecov.io가 만료된 TLS 인증서를 제공하여 curl: (60) SSL certificate problem: certificate has expired가 발생했고, 다운로드되지 않은 GPG 서명 파일의 검증도 이어서 실패했습니다.

CSS 출력 PR에서 공유 workflow를 변경하거나 TLS 검증을 우회하지 않습니다. 인증서가 복구되면 coordinator가 실패 job을 한 번 재실행하여 최종 상태를 확인합니다.

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

2026-10-14 업데이트: main a2b74d0f를 실제 two-parent merge commit 0a39540a로 병합했습니다; 충돌 파일: 없음; 두 merge base(11790be, d94ef3c) 때문에 기존 원격 판정은 CONFLICTING/DIRTY였지만 로컬 ort 병합은 자동 완료됐고 양쪽 변경을 유지했습니다. main에 아직 없는 #780의 7960b48 / b71ca4ea를 cherry-pick -x로 함께 적용했습니다. 새 snapshot 변경 없음; Rust 3599개와 bun 5875개 테스트 / fmt / Rust 1.99 clippy / lint / fresh WASM·root build 통과; vendor 숫자 단위 및 중첩 배열의 위치 포함 오류를 실제 WASM으로 재확인했습니다.

최종 CI 38552134190(head 002d352): publish / landing-next-e2e / vinext-rsc-css-e2e / benchmark / codecov/patch 전부 성공, MERGEABLE / CLEAN 확인했습니다. 이번 업데이트 자체의 새 build error나 snapshot 변화는 없으며 기존 PR의 오류·한계 정책은 유지됩니다.

• 2026-10-14 재업데이트(W59 인계): 최신 main 76b1a150(fix(extractor): compile styled components in non-JSX source modules #777, feat(extractor): alias @emotion/css css, cx, keyframes and injectGlobal #716, feat(plugins): deterministic class and file numbering #743 및 fix: repair main tests, docs lint and Tailwind test isolation #780 포함)을 두 부모 merge commit bd3c9c86으로 병합했습니다. 충돌 libs/extractor/src/visit.rs에서 #759의 dead declaration·중첩 배열 오류의 정확한 원본 위치 및 template 검사를 보존하고, main의 Emotion css/cx/merge API별 진단 이름과 namespace/class 처리도 함께 유지했습니다. 새 WASM/루트 빌드·Rust 3,875개·Bun 5,905개(함수/줄 100%)·실제 WASM vendor 단위/위치 오류/Emotion 교차 프로브 14개·전체 훅이 통과했습니다. 새 snapshot 변경·이 업데이트 자체의 새 build error·추가 한계는 없습니다.

[github-actions]

Changepacks

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

Patch

• Rewriting styled-components, Emotion and vanilla-extract imports keeps type-only imports type-only: import { type DefaultTheme, ThemeProvider } now leaves import type { DefaultTheme } on the package instead of a value import that made it a runtime dependency, and an import type declaration is left as written. spin.getName() on a keyframes() binding becomes the generated keyframes name instead of a call on a string that threw at runtime
• The styled-components and Emotion compat ThemeProvider now gives its theme through React context: useTheme, withTheme and the new ThemeConsumer return the real theme object (an object merged over the outer theme, or what a theme function makes of it) instead of an empty Proxy of var() references, withTheme forwards refs, lets a caller's theme win and sets a displayName. Styles keep reading the CSS variables the provider declares. styled-components v6.4 createTheme is available from the compat entry, and ThemeConsumer and createTheme imports are redirected there instead of staying a runtime dependency on styled-components
• Respect source-order property replacement across conditional spreads in styled rule objects, and document that styled callbacks cannot return runtime class names. No new build errors; existing located Cannot compose errors remain unchanged.
• Preserve unitless legacy vendor numbers, classify vendor time values as milliseconds and emit the Opera vendor prefix correctly; reject nested responsive arrays and known dead unprefixed CSS property names with source-located build errors, while preserving supported experimental CSS, unknown properties and documented shorthands.
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• Typography documents the emitted default breakpoints, and source-backed integration tests keep the public breakpoint lists and range bounds synchronized with the production defaults. No runtime changes or new build errors.
• @emotion/css is aliased by default: css and keyframes compile like Devup UI's own (numbers in px, as Emotion reads them), injectGlobal declares global CSS. cx takes class names, as in Emotion: strings and runtime values are classes kept as written (falsy values are skipped), an object is a { name: condition } class map, arrays nest, and inline css() calls and css() classes compose with the rules css(a, b) uses. merge(className) splits what the build can read (string tokens, template literal parts) and composes the css() classes in it, keeping a runtime string it cannot split as it is. Namespace members, constant-string bracket access, const destructuring and const alias chains compile through these same named APIs with scope-aware binding resolution; numeric values retain Emotion units after constant inlining and build-time evaluation. The Emotion import disappears when no runtime-only member is used. Ambient declarations type the styling imports (cx(...args: ClassNamesArg[]), merge(className: string)). New located build errors: cx() cannot use a spread, a getter, a setter or a method in a class map, or a template literal call; merge() takes exactly one class string, not a spread or a template literal call; the root module has no default export, namespace member keys must be constant strings naming supported exports, and styling functions cannot be passed, mutated or re-exported. Optional styling reads/calls, namespace rest destructuring, styling defaults or nested patterns, non-const aliases, exported styling bindings and reads whose initialization order cannot be established are build errors instead of runtime dependencies. Styling loaded through require, import-equals or dynamic import must use static ES module imports; an unawaited dynamic namespace that the build cannot follow is also a located error. Its runtime-only APIs (cache, flush, hydrate, sheet, getRegisteredStyles) stay on @emotion/css, including their nested/default destructuring, optional reads and recognized runtime-loader access
• 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.
• The extractor guide shows reproducible native-element output, generated CSS-variable bindings, and actual atomic CSS rather than obsolete class names. Documentation only: no new build errors.
• Selectors: a nested rule without & in a styled or css template is scoped to the component instead of becoming a global rule (.child {} and > p {} select descendants, :hover {} and ::before {} the component), and a rule nested in a selector list applies under each of its selectors; content keeps the quotes of its strings (content: 'x', content: ""); params go on the pseudo-class that takes them, so _groupNthChild gives :is(...):nth-child(2n) .a also when nested; a bare selectors key is a pseudo-class name, an attribute of the element or a descendant selector ('div p', '> p'), under a parent too, and keeps the case of class names; ::part(), ::slotted(), ::highlight(), ::picker() and the view-transition pseudo-elements get two colons. New build errors: a _name prop or selector key that names nothing (_notASelector, selectors={{ div: ... }}), and a string under a selector that is not CSS text (_hover="external-class")
• stylex.attrs() gives the dynamic CSS variables it sets as style attribute text ("--a:" + value), as StyleX does for spreading onto non-React targets, instead of a style object; stylex.props() keeps the object React takes. The attrs() return type declares style as a string
• 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
• Order standalone nonresponsive hover-capability guards within their selector group so active, focus and disabled styles can override hover. Keep responsive Tailwind hover and Devup selector prop ordering unchanged. No new build errors.
• 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
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors
• A styled-components or Emotion style function reading the theme by literal keys, such as p => p.theme.space[2] or ({ theme }) => theme.colors['brand'], now reads the CSS variable ThemeProvider declares (var(--space-2)). A theme read the build cannot turn into a CSS variable, such as p => p.theme, p => p.theme.brand() or theme.space[i], is a build error naming the file, line, column and code, where it used to read a theme object that does not exist at runtime and give undefined or throw
• Generate React JSX-runtime calls for styled components in non-JSX source modules while preserving JSX and TSX output. No new build errors.
• While @vanilla-extract/css is aliased, importing @vanilla-extract/recipes or @vanilla-extract/sprinkles is a build error naming the file, line and column: those packages generate CSS Devup UI does not compile, so their rules used to be silently missing from the stylesheet. The error says to write the styles with css(), or to disable the alias and build with the vanilla-extract plugin. Type-only imports are allowed
• Skip source-map generation in the codeExtractWithoutSourceMap WASM export while preserving extracted code, CSS and dependencies. Add real WASM and Next loader regressions for map-enabled and map-disabled extraction. 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
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors

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

Patch

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

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

Patch

• The @devup-ui/react README and the css-utils-literal-only rule docs link their mention of build errors to the new Build Errors reference (https://devup-ui.com/docs/build-errors), which lists the build errors grouped by API; the docs sidebar lists the page after Supported Syntax & Limitations, whose Build errors section links to it. Documentation only: no new build errors
• ESLint rules now check exactly what the build reads. The array, typography, media and styleOrder rules and css-utils-literal-only follow the import aliases the build compiles by default (@emotion/react, @emotion/styled, styled-components, @vanilla-extract/css) and the rules of styled (styled.div({...}), styled("div", {...}), styled(Base)({...}, {...}); not .attrs()), createGlobalStyle({...}) and the styles of Emotion Global, and check and fix a module-level const object that only styles read. Vanilla-extract stylesheets (.css.ts/.css.js) are no longer read as Devup UI. New rule no-runtime-read reports css/keyframes/styled/Box read as a value ("X is read at runtime, where it does not exist"), and css-utils-literal-only reports globals that do not exist where a .css.ts is evaluated (window, document, process, ...). No new build errors.
• 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

• Isolate the coordinator port file per owning process when another live next dev/build holds it, record the owner pid, and report port, pid and recovery when the coordinator is missing or unreachable
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors
• Skip source-map generation in the codeExtractWithoutSourceMap WASM export while preserving extracted code, CSS and dependencies. Add real WASM and Next loader regressions for map-enabled and map-disabled extraction. No new build errors.

@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
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• @emotion/css is aliased by default: css and keyframes compile like Devup UI's own (numbers in px, as Emotion reads them), injectGlobal declares global CSS. cx takes class names, as in Emotion: strings and runtime values are classes kept as written (falsy values are skipped), an object is a { name: condition } class map, arrays nest, and inline css() calls and css() classes compose with the rules css(a, b) uses. merge(className) splits what the build can read (string tokens, template literal parts) and composes the css() classes in it, keeping a runtime string it cannot split as it is. Namespace members, constant-string bracket access, const destructuring and const alias chains compile through these same named APIs with scope-aware binding resolution; numeric values retain Emotion units after constant inlining and build-time evaluation. The Emotion import disappears when no runtime-only member is used. Ambient declarations type the styling imports (cx(...args: ClassNamesArg[]), merge(className: string)). New located build errors: cx() cannot use a spread, a getter, a setter or a method in a class map, or a template literal call; merge() takes exactly one class string, not a spread or a template literal call; the root module has no default export, namespace member keys must be constant strings naming supported exports, and styling functions cannot be passed, mutated or re-exported. Optional styling reads/calls, namespace rest destructuring, styling defaults or nested patterns, non-const aliases, exported styling bindings and reads whose initialization order cannot be established are build errors instead of runtime dependencies. Styling loaded through require, import-equals or dynamic import must use static ES module imports; an unawaited dynamic namespace that the build cannot follow is also a located error. Its runtime-only APIs (cache, flush, hydrate, sheet, getRegisteredStyles) stay on @emotion/css, including their nested/default destructuring, optional reads and recognized runtime-loader access
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors

@devup-ui/react@1.0.44 → 1.0.45 - packages/react/package.json

Patch

• The @devup-ui/react README and the css-utils-literal-only rule docs link their mention of build errors to the new Build Errors reference (https://devup-ui.com/docs/build-errors), which lists the build errors grouped by API; the docs sidebar lists the page after Supported Syntax & Limitations, whose Build errors section links to it. Documentation only: no new build errors
• The styled-components and Emotion compat ThemeProvider now gives its theme through React context: useTheme, withTheme and the new ThemeConsumer return the real theme object (an object merged over the outer theme, or what a theme function makes of it) instead of an empty Proxy of var() references, withTheme forwards refs, lets a caller's theme win and sets a displayName. Styles keep reading the CSS variables the provider declares. styled-components v6.4 createTheme is available from the compat entry, and ThemeConsumer and createTheme imports are redirected there instead of staying a runtime dependency on styled-components
• @emotion/css is aliased by default: css and keyframes compile like Devup UI's own (numbers in px, as Emotion reads them), injectGlobal declares global CSS. cx takes class names, as in Emotion: strings and runtime values are classes kept as written (falsy values are skipped), an object is a { name: condition } class map, arrays nest, and inline css() calls and css() classes compose with the rules css(a, b) uses. merge(className) splits what the build can read (string tokens, template literal parts) and composes the css() classes in it, keeping a runtime string it cannot split as it is. Namespace members, constant-string bracket access, const destructuring and const alias chains compile through these same named APIs with scope-aware binding resolution; numeric values retain Emotion units after constant inlining and build-time evaluation. The Emotion import disappears when no runtime-only member is used. Ambient declarations type the styling imports (cx(...args: ClassNamesArg[]), merge(className: string)). New located build errors: cx() cannot use a spread, a getter, a setter or a method in a class map, or a template literal call; merge() takes exactly one class string, not a spread or a template literal call; the root module has no default export, namespace member keys must be constant strings naming supported exports, and styling functions cannot be passed, mutated or re-exported. Optional styling reads/calls, namespace rest destructuring, styling defaults or nested patterns, non-const aliases, exported styling bindings and reads whose initialization order cannot be established are build errors instead of runtime dependencies. Styling loaded through require, import-equals or dynamic import must use static ES module imports; an unawaited dynamic namespace that the build cannot follow is also a located error. Its runtime-only APIs (cache, flush, hydrate, sheet, getRegisteredStyles) stay on @emotion/css, including their nested/default destructuring, optional reads and recognized runtime-loader access
• The README no longer claims every CSS-in-JS pattern compiles: it describes what the build compiles and that anything it cannot know is a CSS variable or a located build error, and links the new Supported Syntax & Limitations page, which lists what compiles, the style override rules (where a later part wins and where the CSS cascade decides), Baseline 2024 browser support, that a component taking the css prop must pass className and style on, the runtime-only APIs and how each is handled, and the known limitations
• stylex.attrs() gives the dynamic CSS variables it sets as style attribute text ("--a:" + value), as StyleX does for spreading onto non-React targets, instead of a style object; stylex.props() keeps the object React takes. The attrs() return type declares style as a string

@devup-ui/reset-css@1.0.31 → 1.0.32 - packages/reset-css/package.json

Patch

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

@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
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors

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

Patch

• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors

@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
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
bindings/devup-ui-wasm/src/lib.rs	100.00% <ø> (ø)
libs/css/src/is_special_property.rs	100.00% <ø> (ø)
libs/css/src/lib.rs	100.00% <100.00%> (ø)
libs/extractor/src/dead_properties.rs	100.00% <100.00%> (ø)
libs/extractor/src/dead_properties/calls.rs	100.00% <100.00%> (ø)
libs/extractor/src/dead_properties/objects.rs	100.00% <100.00%> (ø)
libs/extractor/src/dead_properties/origin.rs	100.00% <100.00%> (ø)
libs/extractor/src/dead_properties/strings.rs	100.00% <100.00%> (ø)
libs/extractor/src/dead_properties/text.rs	100.00% <100.00%> (ø)
libs/extractor/src/extract_style/constant.rs	100.00% <100.00%> (ø)
... and 11 more

🚀 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.