fix(extractor): preserve styles in wrapped jsx call props

[owjs3901]

Refs #695 (F: JSX-02, issue #682 survey W53 / 2026-10-11 Q5). #756 위에 쌓은 PR입니다. base는 main이며 #756과 그 선행 PR들이 먼저 병합된 뒤 이 PR을 병합해야 합니다.

기준은 #756 f2fc451793a8b6ee42a2f2a0dcd8bae09cd601a5입니다. 이 PR 자체의 변경은 이 기준 이후 다섯 파일이며, #756 브랜치나 일반 JSX의 의미론은 변경하지 않았습니다.

요약

• jsx, jsxs, jsxDEV의 props 객체가 괄호나 syntax-only TypeScript wrapper로 감싸져 있어도 추출한 클래스와 CSS 변수가 실제 요소에 붙습니다.
• 기존 unwrap reference helper를 styleOrder prescan, spread override 추출/연결, delayed spread snapshot 완성, 두 class/style 조립 경로에 일관되게 적용했습니다. wrapper 자체는 유지합니다.
• 런타임 스타일 helper, 의존성, 새로운 합성 정책은 없습니다. WASM changepack은 Patch입니다.
• Rust 회귀 66개를 추가했습니다. 수정 전 57개 중 bare-object control 3개만 통과하고 wrapped 회귀 54개가 실패하는 것을 먼저 확인했습니다.

동작

규칙은 #756의 일반 JSX와 같습니다. 명시적 값과 spread는 작성 순서대로 한 번씩 평가합니다. 뒤의 unknown spread에 같은 own enumerable 키가 있으면 그 값이 이기고, 키가 없으면 명시적 값이 적용됩니다. spread 뒤의 명시적 값은 항상 이깁니다. inherited/non-enumerable 키는 복사하지 않으며, own undefined/null은 이전 값을 되살리지 않습니다. getter는 복사할 때 한 번만 읽습니다.

원본 증거:

import {Box} from '@devup-ui/react'; import {jsx} from 'react/jsx-runtime';
export const a=(first:()=>string,read:()=>object)=>jsx(Box,({color:first(),...read()}));

first()가 red, read()가 {color:'green'}을 반환할 때 실제 fresh WASM 출력은 다음과 같습니다.

수정 전 (#756):

import "@devup-ui/react/devup-ui.css";
import { jsx } from "react/jsx-runtime";
export const a = (first: () => string, read: () => object) => jsx("div", ((__devupValue0) => ({ ...read() }))(first()));

수정 후:

import "@devup-ui/react/devup-ui.css";
import { jsx } from "react/jsx-runtime";
export const a = (first: () => string, read: () => object) => jsx("div", ((__devupValue0, __devupSpread0) => ({
  ...__devupSpread0,
  className: `${__devupSpread0?.className || ""} a`,
  style: {
    ...{ "--b": "color" in __devupSpread0 ? __devupSpread0.color : (__devupValue0) },
    ...__devupSpread0?.style
  }
}))(first(), {
  __proto__: null,
  ...read()
}));

두 경우 모두 CSS는 .a{color:var(--b)}입니다.

수정 전에는 class/style이 없어 실제 computed color가 black이었습니다. 수정 후에는 class a, --b:green이 붙고 375/1440px 및 hover 여부와 관계없이 실제 computed color가 rgb(0,128,0)입니다. 두 경우 모두 호출 순서는 first,spread이며 각각 한 번 실행합니다. spread에 color가 없으면 red, spread가 먼저이면 명시적 red가 적용됩니다.

responsive 값, spread 뒤의 nested selector, conditional styleOrder, 외부 className 및 inline style 보존도 일반 JSX와 동일합니다. props 비교에서는 class token 순서/공백만 정규화하고 나머지 실제 props/style/trace를 비교했습니다.

새로 생기는 오류

새 오류 정책은 없습니다. 기존 일반 JSX/bare call 오류가 이제 wrapped call에서도 정상 적용됩니다. unknown spread가 뒤에서 selector 객체나 단일 CSS 변수로 표현할 수 없는 style shape를 덮어쓸 수 있으면 기존 JSX-02 빌드 오류를 냅니다. unsupported styleOrder도 기존 prescan 검증을 받습니다.

실제 예시 jsx(Box,({_hover:{color:'blue'},...read()})):

jsx-parenthesized-rejected-call.tsx:1:138: `<Box>` cannot use `_hover` at build time: a spread after it can replace the whole `_hover` object, which no stylesheet rule can follow: write the spread before `_hover`, or give the nested object through the spread yourself

spread를 selector 앞에 작성하면 정상 컴파일됩니다. runtime selector 객체 합성은 추가하지 않았습니다.

남는 한계

• unknown spread에만 존재하는 style 키는 #756과 동일하게 pass-through이며, 이 PR에서 임의로 런타임 스타일 변환하지 않습니다.
• unknown spread 뒤에서 덮어쓸 수 있는 nested selector 전체는 정적으로 알 수 없으므로 위의 기존 빌드 오류가 유지됩니다.
• 별도 정책 변경 또는 scope 밖 기능 수정은 없습니다.

검증

• cargo fmt --all, Rust 1.99 clippy --workspace --all-targets -- -D warnings, workspace Rust 테스트 3006개 통과.
• JSX 의미론 테스트 226개 통과, 이 중 새 회귀 66개: 세 factory, bare/괄호/중첩괄호/as const/satisfies, spread 전후 및 같은 키/없는 키, nullish/own-enumerable/getter, selector, responsive, conditional styleOrder, 일반 JSX parity.
• 모든 기존 snapshot 변경 0, .snap.new 0. 이 PR의 의도한 snapshot 변경 목록: 없음. main 대비 보이는 선행 stack의 snapshot 변경은 fix(extractor): preserve JavaScript semantics across values and element calls #756 소유 변경입니다.
• fresh WASM + 루트 build, Bun 5528개 테스트/0 실패/All files 함수·라인 100.00%, lint 통과(기존 경고 두 개만 있음).
• 실제 public WASM → 전체 compiled program → 설치된 React/React DOM SSR → Chromium 153: source pair 31개, packet 62개, 실제 렌더 400개, computed style 1600개, assertion 3722개 모두 통과. 수정 전 동일 probe는 511개 실패.
• 컴파일/test는 CARGO_BUILD_JOBS=2, foreground descendant-tree 6 GiB watchdog으로 순차 실행했습니다. hook은 12 GiB이며, MSYS ancestry 측정 한계를 발견해 동일 hook test payload를 직접 다시 실행하여 약 3.98 GB peak와 통과를 확인했습니다. 실제 commit hook도 lint/tarpaulin/Bun 모두 실행했고 bypass하지 않았습니다.
• Windows tarpaulin 수치는 97.60%이며 Linux 100%로 표현하지 않습니다. Windows Bun의 untouched Vite closing-brace 한 줄은 99.67%로 표시되지만 aggregate는 100.00%입니다. Linux CI의 100% coverage gate가 최종 기준입니다.
• LSP daemon 응답 시간 초과로 clean LSP 결과는 주장하지 않습니다. 실제 compiler/clippy/test/build 및 source/manual-QA Oracle APPROVE로 검증했습니다.
• Linux CI run 38256778215, head eaa4c340d9b886e23d4f18fd9823115470a3e329: success. publish, landing-next-e2e, vinext-rsc-css-e2e, benchmark 네 job 모두 통과했습니다.
• 실제 Linux 로그: Rust tarpaulin 100.00% (13,393/13,393 lines), Bun 5528 pass / 0 fail / 함수·라인 100.00%, bun-plugin regression 9개 통과, landing E2E per-file/singleCss 각각 130개 통과. Codecov upload도 정상 통과했습니다.
• 모든 gate 통과 후 ready로 전환합니다. #756과 선행 stack 병합이 먼저이며, 이 작업에서는 병합/승인/닫기를 하지 않습니다.

2026-10-17 업데이트: 갱신된 부모 #756 628f7c7846eac7f331d84eadcc37387c28ea25ff를 병합하여 main a6ecc12570338475df40a429c719160e63db86b5를 포함합니다. 유일한 충돌 libs/extractor/src/jsx_semantics_tests.rs의 모듈 목록은 #775의 call_spread_attachment와 부모의 boundary_classes, boundary_selection을 모두 등록하여 해결했으며 원래 픽스처·단언·스냅샷은 바꾸지 않았습니다. 괄호/as const/satisfies로 감싼 jsx/jsxs/jsxDEV props에서도 기존 클래스·CSS 변수·속성 평가 순서·뒤쪽 스프레드 우선순위를 보존하고 부모의 안전한 선택 캡처/상수 클래스 처리와 단일 forwardRef 렌더러를 유지합니다. 새 오류 종류를 추가하지 않았고 기존의 숨겨지는 선택자/알 수 없는 스프레드 진단을 감싼 호출 props에도 동일하게 적용합니다. 스냅샷 신규 수락 0개, 기본 스택 Rust 5123/0·Rust1.99 fmt/Clippy·새 WASM/루트 빌드 통과, Bun 5939/0·커버리지 100%, 기존 경고 9개 외 lint 오류 0, 실제 React/SSR 공개 경로 125회(호출/JSX 비교 105+부모 회귀 20) 통과했습니다. 전체 커밋 훅도 기본 스택/jobs2/12GiB 제한에서 통과했으며 LSP는 시간 초과로 확인 불가입니다. 기존 main JSX pragma 손실은 #784로 별도 추적하고 현재 머리의 CI 결과를 완료 후 추가 기록합니다.

실제 WASM/공개 API 검증 출력:

import "@devup-ui/react/devup-ui.css";
const trace = [];
import { jsx } from "react/jsx-runtime";
export const a = (first, read) => jsx("div", ((__devupValue0, __devupSpread0) => ({
	...__devupSpread0,
	className: `${__devupSpread0?.className || ""} a`,
	style: {
		...{ "--b": "color" in __devupSpread0 ? __devupSpread0.color : (__devupValue0) },
		...__devupSpread0?.style
	}
}))(first(), {
	__proto__: null,
	...read()
}));

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.a{color:var(--b)}
{
  "factory": "jsx",
  "wrapper": "BODY",
  "kind": "own",
  "trace": [
    "first",
    "spread"
  ],
  "props": {
    "color": "green",
    "id": "kept",
    "className": "a external",
    "style": {
      "--b": "green",
      "opacity": 0.5
    }
  },
  "html": "<div color=\"green\" id=\"kept\" class=\"external a\" style=\"--b:green;opacity:0.5\"></div>"
}

2026-10-17 CI 기록: 머리 1fbc589cda16855d6b9fdc79e74f4230c0b9abe2, 실행 39006166801은 Linux Rust 커버리지 100.00%(16102/16102), Bun 5939/0 및 다른 3개 작업을 통과했습니다. publish는 이후 bun-plugin 배럴 소비자 회귀에서 react/jsx-dev-runtime 해석 오류로 실패했으며, main에서 독립 검증된 기존 JSX pragma 손실 #784와 일치합니다. 이는 정상 또는 Codecov 외부 장애로 표기하지 않으며 워크플로·픽스처·tsconfig 우회나 #784 직접 병합은 하지 않았습니다.

[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.
• Preserve extracted classes, CSS variables, evaluation order and JSX spread precedence in jsx, jsxs and jsxDEV calls with syntax-wrapped props objects. Existing JSX spread diagnostics now also apply to wrapped call props.
• 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
• 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

@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

@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

@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/lib.rs	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/build_time_values.rs	100.00% <100.00%> (ø)
libs/extractor/src/build_time_values/exact_math.rs	100.00% <100.00%> (ø)
libs/extractor/src/composition.rs	100.00% <100.00%> (ø)
libs/extractor/src/css_prop.rs	100.00% <100.00%> (ø)
... and 49 more

... and 12 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.