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 직접 병합은 하지 않았습니다.

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