fix(extractor): compile own Devup macros before stylesheet fallback

[owjs3901]

Refs #682, #690 (W35s c15). #761 위에 쌓은 PR이며 #756, #757, #761이 모두 먼저 병합되어야 합니다.

요약

.css.ts 자신의 fallback sandbox가 실행될 때 Devup 컴파일 전용 호출을 미정의 API로 실행하지 않고, 같은 모듈의 추출이 정한 값을 빌드 때 사용하도록 수정합니다. 빌드가 결정할 수 있는 값은 지원해야 하며, 런타임 스타일링이나 css를 vanilla-extract style mock에 연결하는 대체 구현은 추가하지 않습니다.

이 PR은 상위 #761의 imported stylesheet 지원과 authored 오류 위치 계약을 그대로 유지하며, 이번 변경은 별도 fix/stylesheet-css-macro 브랜치에만 있습니다.

동작

원본 lower-compiled와 lower-earlier-values 모두 #761 기준 SHA 05094954에서 probe, 실제 Vite 페이지 빌드, 실제 webpack 페이지 빌드로 재현했습니다. self-linked export가 없는 현실적인 labels.map(...) export도 같은 실패를 재현합니다.

import {css,style} from '@devup-ui/react';
const base=css({p:2});
const loop={};
(function(){loop.self=loop;})();
export {loop};
export const box=style([base,{color:'sienna'}]);

변경 전:

sheet.css.ts:2:15: JS execution error: TypeError: not a callable function. Fix: check that every value read, called or constructed here exists when the stylesheet is evaluated at build time

변경 후 실제 probe 출력(기본 theme CSS를 제외한 핵심 부분):

import "@devup-ui/react/devup-ui.css";
export const box = "f0_0 a b";
const loop = {};
(function() { loop.self = loop; })();
export { loop };

.b{color:sienna}.a{padding:8px}
/* earlier-values: .b{color:sienna}.a{width:12px} */

a는 standalone 추출과 같은 Devup 값입니다. 실제 Vite/webpack에서도 같은 선언 클래스 a/b를 내보내며, f1_0/f0_0 차이는 원본 파일 번호에 따른 reference뿐입니다. 브라우저 computed style은 두 빌더 모두 sienna, padding 8px 또는 width 12px입니다.

계산된 css({w:make(2)})는 make(n){return n+1}의 결과 3을 기존 정확한 값 평가 경로로 처리하고, Devup 크기 단위에 따라 width 12px가 됩니다. unrelated cycle/labels export와 필요한 모듈 실행 효과는 보존합니다. no-op, named alias/namespace, globalCss/createGlobalStyle, default export 및 양방향 last-wins 합성을 검사했습니다.

빌드 때 호출할 수 없는 own API가 실제로 있는 경우만 prepass에 들어가며, native-only keyframes facade의 기존 px 단위/이름/할당 순서는 그대로입니다. imported 함수 안의 CSS 추출로 initializer가 달라져도 명시적인 authored source-map 영역으로 원래 파일/throw 위치를 보존합니다.

승인된 msg_41e0eb8f69a4에 따라 styled() 전개의 compiler-generated forwardRef/createElement scaffold만 별도 provenance로 추적합니다. 실제 React import는 출력에 남지만 sandbox에서 그 패키지를 실행하지 않으며, fake React나 대체 component 값은 만들지 않습니다. 실제 React/React DOM 19.3.0을 사용한 Vite/webpack 페이지와 Chromium에서 SECTION/id/padding/sienna 렌더링을 검증했습니다. authored nested async/구조분해/await는 보존합니다.

후속 승인 msg_867d8b1d34fd: authored local/root/parameter가 생성한 __devupForwardRef를 가로채는 실제 오류를 재현·수정했습니다. compiler-owned call/import만 충돌 시 deterministic fresh alias를 사용하며, authored 식별자/호출은 그대로이고 충돌 없는 기존 이름/bytes도 동일합니다. uninvoked factory가 실제 ReactDOM에서 authored 값과 forwarded ref를 보존하며 렌더링되는 것을 두 빌더·브라우저로 확인했습니다.

새로 생기는 오류

• 빌드에서 결정 가능한 위 호출의 not a callable function 오류는 제거됩니다.
• 빌드에서 진짜 결정할 수 없는 입력은 authored 파일/줄/열과 Fix:를 포함하는 빌드 오류로 남습니다.
• 실제 rendering scaffold 실행값에 의존하는 typeof Card, property/identity read, assignment/destructuring write 등은 rendering scaffold 이유와 authored 위치/Fix:를 가진 빌드 오류입니다. catch로 감춰도 실패합니다. exported component 자체는 실제 생성식을 출력으로 보존합니다.
• #761의 removed/rewritten dependency, retained helper read, required effect 및 authored 위치 규칙을 완화하지 않습니다.

남는 한계

이번 범위는 같은 stylesheet 자신의 fallback 실행입니다. 상위 PR 소유의 imported producer 처리와 Selected/Readback 계약을 변경하지 않습니다. 런타임 스타일링이나 새 스타일 runtime helper는 없습니다.

검증

• 기준 SHA 및 실제 baseline 실패: 원본 2개 + 비순환 실제형 1개, probe/Vite/webpack 3개 표면.
• 회귀 우선: 새 Rust 6개가 기준 구현에서 실제 css() 호출 지점으로 실패함을 확인.
• Rust 1.99 fmt 및 workspace/all-targets clippy -D warnings, 최종 workspace Rust 5,253 통과/실패 0 (450 기존 focused 유지, 최종 focused 475개).
• fresh WASM 및 root build 통과; Bun 5,535 통과/실패 0, All files aggregate functions/lines coverage 100.00% 및 설정된 coverage gate 통과; lint 오류 0, 기존 경고 2개만 유지.
• 별도 관측: 수정하지 않은 Vite plugin은 Windows Bun 표에서 개별 lines 99.67%(closing brace 365)로 표시됩니다. 개별 파일 전부가 100%라고 주장하지 않으며, 범위를 넓혀 plugin을 변경하지 않고 coordinator에 보고했습니다.
• 원본 2개/실제형 1개/실제 React styled의 Vite+webpack 페이지 빌드 8/8 및 Chromium computed style 8/8 통과. 최종 tree에서 parent가 public probe/asset/브라우저 검사를 직접 다시 실행했습니다.
• 기존 snapshot 변경 없음(0개). full gate에서 드러난 native-only snapshot 7개 drift는 수정 후 기존 bytes/SHA와 일치하며 .snap.new가 남지 않습니다. 기존 테스트를 수정하거나 snapshot을 accept하지 않았습니다.
• LSP daemon은 반복 timeout으로 결과를 얻지 못했으며 clean으로 표시하지 않습니다. 실제 Rust compiler/clippy 및 실행 검증은 통과했습니다.
• 정확한 26개 파일 전체를 staging하고 unstaged/untracked가 없는 상태에서 표준 hook으로 8caa6dc7423210102a34c007e34d68378771d58f 커밋. hook lint/Rust 5,238/Bun 5,535 모두 통과, bypass/amend 없음.
• 초기 Linux CI 38381027096는 테스트 실패 0이나 새 코드/helper의 19줄 coverage 때문에 99.90%(19,354/19,373)에서 실패했습니다. exclusions/기존 assertion 변경 없이 실제 typed parsing/lowering seam과 source 회귀, 불필요한 observer/fallback 구조 정리로 대응했습니다.
• 후속 12개 파일 전체를 exact-tree로 staging하고 요청된 한 번의 표준 hook으로 d90580d32f0ed1e3ee4a1519e23c0ba480f34e39 커밋·push. hook Rust 5,253/Bun 5,535 통과/실패 0, working tree clean.
• 최종 실제 페이지 빌드/브라우저 10/10 통과(기존 8개 + helper collision 2개), 기존 Rust snapshot 870개 SHA 동일 및 pending 0개.
• 로컬 Windows tarpaulin은 초기 97.64%, 후속 97.70%(27,780/28,435)이며 CI를 unset한 표준 hook입니다. 이것을 Linux Rust 100%라고 표시하지 않습니다.
• 최종 exact head d90580d32f0ed1e3ee4a1519e23c0ba480f34e39의 Linux CI 38396554074는 publish(Rust tarpaulin --fail-under 100 및 Bun), landing-next-e2e, vinext-rsc-css-e2e, benchmark 네 job 모두 success입니다. coordinator msg_534abe2e2573가 Linux 100% gate를 확인했습니다. 이 확인 후에만 ready로 전환하며 merge/approve/close하지 않습니다.
• bindings/devup-ui-wasm/package.json Patch changepack.

[github-actions]

Changepacks

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

Patch

• A project module re-exporting Devup UI (export { Box, css } from '@devup-ui/react', export * from '@devup-ui/react', export { styled as s }, export * as Devup, a default export of an import, chains of barrels and the compat entry) now works: a file importing Box or css from it compiles exactly as if it imported from the package, following the barrel through the resolver (relative paths, tsconfig paths, package exports), and hasDevupUI sees such a file. Members read from a namespace or default import of the package (Devup['css'], const { css } = Devup, Devup.css as a value) compile where the build can follow them, Devup.x for a name the package compiles being read like the named import. New build errors, located at the use: what a barrel re-exports but the build cannot read (an unresolvable export * or module, a namespace of modules re-exporting the package) is an error where its name is used instead of a runtime crash, and a namespace member read by a key the build cannot know (Devup[key]), written, or destructured in a form it cannot follow (a rest, a computed key, a default value, a nested pattern, an exported declaration, or members mixed with ones that stay at runtime) is an error that names the members to read. A namespace passed on whole (Object.keys(Devup), spyOn(Devup, 'css'), export default Devup) is left as it is
• css(a, b) composing classes whose styles the build knows (a const bound to css() in the file, or a css() result another module exports with a rule object every value of which is known) merges their styles: a later part's declaration replaces an earlier one's for the same property, selector, breakpoint and layer, also under conditions (css(base, cond && danger)) and for ||/?? parts, where the classes used to be joined and the stylesheet order picked the winner. vanilla-extract style([a, b]) passes each composed style as its own argument, so the later one wins, and a style composed again later (style([a, b, a])) is kept. Classes the build does not know (strings, props, CSS Modules) are kept as they are
• styled(Base) extending a styled component the file binds to a const renders Base's tag directly with Base's styles composed under its own, so the extension's declarations replace Base's for the same property, selector, breakpoint and layer instead of losing to them by stylesheet order; Base's attrs apply before the extension's. attrs merge as styled-components merges them: className is joined with the caller's, style is merged and other props replace earlier ones. On an element, a className or style spread after the explicit prop now wins, as React merges props in the order they are written
• Emotion's now compiles at build time with no runtime: the element becomes what its child function ({ css, cx, theme }) => ... renders, each css and cx call becomes the classes it composes (later styles replace earlier ones; css reads strings as CSS text and its tagged templates split around mixins; cx keeps unknown classes, reads { name: condition } objects as conditional classes and composes nested css and cx calls), and theme.a.b in their values becomes var(--a-b). Numbers in css rules are px lengths, as Emotion reads them, and top-level constants are inlined. New build errors, each at file:line:col: a without exactly one child function taking { css, cx, theme } that gives what it renders at once (attributes, other children, rest or default parameters, async or generator functions, several statements); reading the theme other than as theme.a.b in a css value; using css or cx other than by calling them; a cx object with a spread, getter or method; parts css and cx cannot compose (runtime calls, spreads, a condition choosing between styles and classes). @devup-ui/react/compat exports ClassNames with the ClassNamesContent and ClassNamesArg types, and the @emotion/react declarations include them
• Emotion and styled-components component selectors now compile at build time: a styled component the file defines that another style selects (${Child} { ... } in CSS text, [Child] or [&:hover ${Child}] as a rule key) gets a short marker class, which only such components get, and the selector reads it as .marker; a component extending it, or an element inlining it for its css prop, keeps the marker. Selectors written without & now nest under the component as stylis nests them (ul { ... } is & ul, a selector list nests each selector, :hover applies to the component itself) instead of becoming global rules, and rule-object keys starting with ., #, [, *, >, + or ~ are read as nested selectors instead of properties
• Emotion's css prop compiles at build time while @emotion/react is aliased: on tags and Devup UI components always, and on every element once the file imports @emotion/react or @emotion/styled or names @emotion/react in a @jsxImportSource pragma; jsx, jsxs and jsxDEV from @emotion/react/jsx-runtime (or jsx-dev-runtime) and jsx from @emotion/react compile it too, so libraries built with Emotion's JSX runtime do as well. The prop becomes the element's className, with CSS variables in its style for values only the runtime gives: arrays and conditions compose with a later part replacing what an earlier one sets, css() classes the file knows compose by their styles, strings and templates are CSS text, css`` mixins split the text around them, a function of the theme reads theme.a.b as var(--a-b), unitless numbers are px as in Emotion (constants included), and a className holding known css() classes overrides the prop as Emotion's registered classes do. A styled component the file defines renders its tag in the element's place when the prop overrides its styles and it renders a tag with no attrs or props read and the element has no spread, as or forwardedAs. Emotion's JSX runtime imports become react/jsx-runtime, the pragma names react, and jsx comes from @devup-ui/react/compat (React's createElement); @devup-ui/react/compat/css-prop types the prop on React.Attributes. New build errors, each with file:line:column and the code: a css prop part the build cannot read (a call, an element), a style object declared inside a function or with let, a binding only running the module gives or code changes, a theme function that does more than return rules or reads the theme other than as theme.a.b in a value, an interpolation CSS text cannot place or a mixin inside a nested rule, and a css prop overriding a styled component's styles where its tag cannot be rendered in place. Composing css() with a part that reads a known binding (such as a keyframes name) now reads its value
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
• 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.
• hasDevupUI takes the import aliases and is true for a file extraction changes: one importing a redirected package (@emotion/styled, ...), naming @emotion/react in a @jsxImportSource pragma, or in a project whose tsconfig jsxImportSource is @emotion/react, so the Bun plugin no longer skips files whose only Devup UI is Emotion's css prop or an aliased import. Aliases of Devup UI now compile like the original: export const B = Box, const c = css; export { c as cc }, export const D = Devup and export const C = Devup.css in a barrel (the barrel module exports them as re-exports of the package, and what imports them follows them), export { Box } after an import, export default Box, const D = Devup namespace aliases, and const inner = css declared inside a function. A css() or keyframes() const that a function reads before its declaration compiles. New build error: a css()/keyframes() const read before its declaration runs (outside a function) is located and says to move the declaration above its first read
• Preserve JavaScript semantics for exact imported enum and Math values including negative zero, lexical constants, binding-aware CommonJS require, React createElement calls, type-only imports, and source-ordered props evaluation with native spread snapshots and CSS-variable fallbacks without a styling runtime. Migrate UI-kit style defaults by pure reordering and test reset CSS through compiled output. Report located build errors for runtime styleOrder values, unknowable whole-object style overrides, opaque selector literals, genuinely unmovable lazy logical suspension, Devup UI namespaces passed whole to runtime code, and immediate style reads in the temporal dead zone of lexical bindings; deferred initialized reads keep folding and pre-assignment var reads remain dynamic.
• Report extraction, module-resolution and stylesheet execution failures at their original source locations with the cause and repair. Reject recoverable syntax errors, nondeterministic build-time reads, synthetic descriptor/function-source and legacy accessor reflection, and unsafe stylesheet execution fallbacks instead of silently changing CSS. Preserve module resolver and serialization exceptions, evaluate transitive helper side effects, and prevent placeholder-name collisions from losing styles. Match import package names only at exact or slash-delimited boundaries so sibling data packages remain external. Retain helper CSS loads in evaluation order with deduplicated portable relative specifiers and query suffixes, without CSS content dependencies. Report missing CSS or incompatible path roots as located errors, and reject host-recorded unknown CSS export observations even when caught; unused bindings, object passing and typeof follow default TypeScript/JavaScript import semantics.
• Resolve compiled styling APIs and components by their lexical binding so shadowed local names, including minified library identifiers, remain ordinary JavaScript and JSX. No new build errors; existing diagnostics now apply only to the compiled binding they describe.
• Styled components the build generates are wrapped in React's forwardRef, so a ref passed to them reaches the element they render on React 18 as well as React 19; the file imports forwardRef from react when it defines one
• Styled components no longer pass every prop to the tag they render: $ props, theme and the props their style functions or attrs read are kept away from a tag unless it takes them as attributes, and shouldForwardProp (Emotion options or styled-components withConfig) is evaluated at build time. A shouldForwardProp the build cannot evaluate is a build error naming the file, line and code, with the forms it accepts. An element using a styled component the file defines drops props the component neither reads nor passes on; spread props are passed as written
• Styled components render what their as prop names, defaulting to the tag or component they were defined with, and pass forwardedAs on as as, as styled-components and Emotion do; as used to reach the rendered tag as an attribute. Component.withComponent(target) on a styled component the file binds to a const builds a component rendering the same styles and attrs as target (a tag name or a component JSX can name), where it used to call a method the generated function does not have and throw
• Compile own Devup style macros before fallback stylesheet evaluation using their exact extracted values instead of a missing sandbox API. Preserve native facade units and authored error locations; stylesheet reads requiring compiler-generated rendering fail with located rendering-scaffold diagnostics rather than synthetic component values.
• 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
• Compile vanilla-extract static styling-data modules independently of their script suffix, sharing theme contracts, native API values, deterministic variable references and later-wins static composition. Modules that also hold unrelated runtime or JSX code evaluate only the code a styling value needs, and values imported through other modules, barrels and namespaces are read exactly, including through type assertions written as as or <T>. Preserve registered selector identities independently of declaration atoms, and capture default, aliased and forwarded module exports without replaying initializers. Align theme.css source resolution between evaluation and the import graph, map consumer contract leaves and theme overloads to their real values, return the quoted generated family from fontFace, enumerate styleVariants keys like vanilla-extract, and stop self-cyclic theme contracts instead of hanging; fontFace and globalFontFace no longer trap the WASM. Report located build errors (file, line, column, cause and fix) for unknown, forward, erased or nondeterministic static inputs, native values or helpers that escape their exact initialization slice, mutated or aliased inputs, unrepresentable captures, non-object theme tokens, mismatched theme contracts, invalid non-final fallback variables, invalid global theme variable names and an authored fontFamily inside fontFace instead of emitting incomplete or malformed CSS.

@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
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
• hasDevupUI takes the import aliases and is true for a file extraction changes: one importing a redirected package (@emotion/styled, ...), naming @emotion/react in a @jsxImportSource pragma, or in a project whose tsconfig jsxImportSource is @emotion/react, so the Bun plugin no longer skips files whose only Devup UI is Emotion's css prop or an aliased import. Aliases of Devup UI now compile like the original: export const B = Box, const c = css; export { c as cc }, export const D = Devup and export const C = Devup.css in a barrel (the barrel module exports them as re-exports of the package, and what imports them follows them), export { Box } after an import, export default Box, const D = Devup namespace aliases, and const inner = css declared inside a function. A css() or keyframes() const that a function reads before its declaration compiles. New build error: a css()/keyframes() const read before its declaration runs (outside a function) is located and says to move the declaration above its first read

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

Patch

• Preserve JavaScript semantics for exact imported enum and Math values including negative zero, lexical constants, binding-aware CommonJS require, React createElement calls, type-only imports, and source-ordered props evaluation with native spread snapshots and CSS-variable fallbacks without a styling runtime. Migrate UI-kit style defaults by pure reordering and test reset CSS through compiled output. Report located build errors for runtime styleOrder values, unknowable whole-object style overrides, opaque selector literals, genuinely unmovable lazy logical suspension, Devup UI namespaces passed whole to runtime code, and immediate style reads in the temporal dead zone of lexical bindings; deferred initialized reads keep folding and pre-assignment var reads remain dynamic.

@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

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

@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
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
• Compile vanilla-extract static styling-data modules independently of their script suffix, sharing theme contracts, native API values, deterministic variable references and later-wins static composition. Modules that also hold unrelated runtime or JSX code evaluate only the code a styling value needs, and values imported through other modules, barrels and namespaces are read exactly, including through type assertions written as as or <T>. Preserve registered selector identities independently of declaration atoms, and capture default, aliased and forwarded module exports without replaying initializers. Align theme.css source resolution between evaluation and the import graph, map consumer contract leaves and theme overloads to their real values, return the quoted generated family from fontFace, enumerate styleVariants keys like vanilla-extract, and stop self-cyclic theme contracts instead of hanging; fontFace and globalFontFace no longer trap the WASM. Report located build errors (file, line, column, cause and fix) for unknown, forward, erased or nondeterministic static inputs, native values or helpers that escape their exact initialization slice, mutated or aliased inputs, unrepresentable captures, non-object theme tokens, mismatched theme contracts, invalid non-final fallback variables, invalid global theme variable names and an authored fontFamily inside fontFace instead of emitting incomplete or malformed CSS.

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

Patch

• Emotion's now compiles at build time with no runtime: the element becomes what its child function ({ css, cx, theme }) => ... renders, each css and cx call becomes the classes it composes (later styles replace earlier ones; css reads strings as CSS text and its tagged templates split around mixins; cx keeps unknown classes, reads { name: condition } objects as conditional classes and composes nested css and cx calls), and theme.a.b in their values becomes var(--a-b). Numbers in css rules are px lengths, as Emotion reads them, and top-level constants are inlined. New build errors, each at file:line:col: a without exactly one child function taking { css, cx, theme } that gives what it renders at once (attributes, other children, rest or default parameters, async or generator functions, several statements); reading the theme other than as theme.a.b in a css value; using css or cx other than by calling them; a cx object with a spread, getter or method; parts css and cx cannot compose (runtime calls, spreads, a condition choosing between styles and classes). @devup-ui/react/compat exports ClassNames with the ClassNamesContent and ClassNamesArg types, and the @emotion/react declarations include them
• Emotion's css prop compiles at build time while @emotion/react is aliased: on tags and Devup UI components always, and on every element once the file imports @emotion/react or @emotion/styled or names @emotion/react in a @jsxImportSource pragma; jsx, jsxs and jsxDEV from @emotion/react/jsx-runtime (or jsx-dev-runtime) and jsx from @emotion/react compile it too, so libraries built with Emotion's JSX runtime do as well. The prop becomes the element's className, with CSS variables in its style for values only the runtime gives: arrays and conditions compose with a later part replacing what an earlier one sets, css() classes the file knows compose by their styles, strings and templates are CSS text, css`` mixins split the text around them, a function of the theme reads theme.a.b as var(--a-b), unitless numbers are px as in Emotion (constants included), and a className holding known css() classes overrides the prop as Emotion's registered classes do. A styled component the file defines renders its tag in the element's place when the prop overrides its styles and it renders a tag with no attrs or props read and the element has no spread, as or forwardedAs. Emotion's JSX runtime imports become react/jsx-runtime, the pragma names react, and jsx comes from @devup-ui/react/compat (React's createElement); @devup-ui/react/compat/css-prop types the prop on React.Attributes. New build errors, each with file:line:column and the code: a css prop part the build cannot read (a call, an element), a style object declared inside a function or with let, a binding only running the module gives or code changes, a theme function that does more than return rules or reads the theme other than as theme.a.b in a value, an interpolation CSS text cannot place or a mixin inside a nested rule, and a css prop overriding a styled component's styles where its tag cannot be rendered in place. Composing css() with a part that reads a known binding (such as a keyframes name) now reads its value
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
• Compile vanilla-extract static styling-data modules independently of their script suffix, sharing theme contracts, native API values, deterministic variable references and later-wins static composition. Modules that also hold unrelated runtime or JSX code evaluate only the code a styling value needs, and values imported through other modules, barrels and namespaces are read exactly, including through type assertions written as as or <T>. Preserve registered selector identities independently of declaration atoms, and capture default, aliased and forwarded module exports without replaying initializers. Align theme.css source resolution between evaluation and the import graph, map consumer contract leaves and theme overloads to their real values, return the quoted generated family from fontFace, enumerate styleVariants keys like vanilla-extract, and stop self-cyclic theme contracts instead of hanging; fontFace and globalFontFace no longer trap the WASM. Report located build errors (file, line, column, cause and fix) for unknown, forward, erased or nondeterministic static inputs, native values or helpers that escape their exact initialization slice, mutated or aliased inputs, unrepresentable captures, non-object theme tokens, mismatched theme contracts, invalid non-final fallback variables, invalid global theme variable names and an authored fontFamily inside fontFace instead of emitting incomplete or malformed CSS.

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

Patch

• Preserve JavaScript semantics for exact imported enum and Math values including negative zero, lexical constants, binding-aware CommonJS require, React createElement calls, type-only imports, and source-ordered props evaluation with native spread snapshots and CSS-variable fallbacks without a styling runtime. Migrate UI-kit style defaults by pure reordering and test reset CSS through compiled output. Report located build errors for runtime styleOrder values, unknowable whole-object style overrides, opaque selector literals, genuinely unmovable lazy logical suspension, Devup UI namespaces passed whole to runtime code, and immediate style reads in the temporal dead zone of lexical bindings; deferred initialized reads keep folding and pre-assignment var reads remain dynamic.

@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
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

@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
• A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
bindings/devup-ui-wasm/src/graph_publication.rs	100.00% <100.00%> (ø)
bindings/devup-ui-wasm/src/lib.rs	100.00% <100.00%> (ø)
bindings/devup-ui-wasm/src/resolver_state.rs	100.00% <100.00%> (ø)
libs/css/src/lib.rs	100.00% <100.00%> (ø)
libs/extractor/src/barrel.rs	100.00% <100.00%> (ø)
libs/extractor/src/barrel/aliases.rs	100.00% <100.00%> (ø)
libs/extractor/src/barrel/gate.rs	100.00% <100.00%> (ø)
libs/extractor/src/barrel/namespace_aliases.rs	100.00% <100.00%> (ø)
libs/extractor/src/barrel/native.rs	100.00% <100.00%> (ø)
libs/extractor/src/barrel/native/aliases.rs	100.00% <100.00%> (ø)
... and 113 more

... and 103 files with indirect coverage changes

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