fix(extractor): compile Devup UI re-exported by project modules and read through namespaces

[owjs3901]

Refs #695 (KNOWN-5, KNOWN-6). #730 위에 쌓인 브랜치입니다. #706 #707 #710 #711 #722 #727 #728 #729 #730이 먼저 병합되어야 합니다.

요약

• 프로젝트 모듈이 Devup UI를 다시 내보내는 경우(배럴)를 모듈 해석으로 따라가, 그 배럴에서 Box/css를 가져온 파일이 패키지에서 직접 가져온 것과 똑같이 컴파일됩니다. 지금까지는 Cannot run on the runtime을 던지는 런타임 placeholder로 남았습니다.
• 패키지의 namespace/default import 멤버를 값으로 읽는 경우(Devup['css'], const { css } = Devup, Devup.css를 값으로)도 컴파일하고, 따라갈 수 없으면 사용 위치가 적힌 빌드 에러로 만듭니다.
• 배럴을 따라갈 수 없을 때(해석 불가능한 export *, 읽을 수 없는 모듈)는 이름을 쓰는 곳에서 위치가 적힌 빌드 에러가 납니다. 런타임 크래시로 남지 않습니다.

동작

• 새 모듈 libs/extractor/src/barrel.rs가 추출 맨 앞에서 소스 텍스트를 다시 씁니다(기존 import alias 변환과 같은 방식, 오류 위치는 편집 계층을 거쳐 원본 위치로 돌아옵니다). 다시 쓴 뒤의 코드는 패키지의 named import만 쓰므로 이후 단계는 그대로입니다.
• 배럴 해석: 상대 경로, tsconfig paths, 패키지 exports는 기존 setModuleResolver가 풀고, 거기서 받은 모듈의 export { A as B } from, export * from, export * as ns from, export default <import>, import { X }; export { X }를 따라 패키지(@devup-ui/react, @devup-ui/react/compat)에 닿는 곳까지 갑니다. 이름을 직접 내보낸 쪽이 export *보다 우선하고, 순환은 끊습니다. 결과는 파일 내용만으로 정해집니다.
• 한 import에서 일부만 패키지로 가면 그 이름만 패키지 import로 옮기고 나머지(타입 지정자 포함)는 원래 import에 남깁니다.
• namespace: Devup.css/Devup['css']/Devup[`css`]/<Devup.Box>/구조 분해 const { css, Box: B } = Devup를 의미를 유지한 채 named import로 바꿉니다(Devup$css 같은 충돌 없는 이름, 구조 분해는 선언을 지우고 바인딩 사용처를 바꿉니다). 빌드가 컴파일하는 export(컴포넌트, css/globalCss/keyframes/styled)만 바꾸고 useTheme, stylex 같은 런타임 값은 그대로 둡니다. 배럴의 namespace(import * as UI from './ui')도 같은 방식입니다.
• 게이트: 플러그인 쪽에 텍스트 게이트는 bun-plugin의 hasDevupUI뿐이고(vite/webpack/rsbuild/next는 확장자와 node_modules만 거릅니다), hasDevupUI가 모듈 해석기를 쓰도록 바꿨습니다. 모든 플러그인이 배럴로만 닿는 파일을 컴파일합니다.
• 읽은 배럴 모듈은 dependencies로 보고되어 감시됩니다.

새로 생기는 오류

모두 파일:줄:열: … 형식입니다.

• 배럴이 따라갈 수 없는 re-export의 이름을 쓸 때: `Missing` cannot use `./broken` at build time: the build cannot follow its re-export of Devup UI (`./nowhere` cannot be read); import it from the package instead. 쓰지 않는 import는 에러가 아닙니다. Devup UI와 무관한 모듈(패키지 이름이 없고 re-export도 없는 모듈)은 건드리지 않습니다.
• 패키지를 다시 내보내는 모듈들의 namespace(export * as inner from './inner')를 멤버로 읽을 때.
• namespace 멤버를 알 수 없는 키로 읽을 때(Devup[key]), 쓸 때(Devup.css = 1), 따라갈 수 없는 모양으로 구조 분해할 때(rest, 계산된 키, 기본값, 중첩 패턴, export const { css } = Devup, 컴파일되는 멤버와 런타임 멤버를 함께 구조 분해): `Devup` cannot use `Devup[key]` at build time: read its members by name, as `Devup.css`, `Devup['css']` or `const { css } = Devup`, or import them by name.
• [Devup.css]처럼 컴파일되는 export를 값으로 쓰면 기존 is read at runtime 에러가 그 위치에 납니다(이름이 Devup$css로 보입니다).

남는 한계

• KNOWN-10(사용 위치보다 뒤에 선언된 keyframes const)와 KNOWN-11(함수 안 alias)은 이번에 고치지 못했습니다. 둘 다 이미 위치가 적힌 에러이고(런타임 크래시 아님), 방문기의 상수 등록 순서/스코프와 얽혀 있어 별도 PR이 맞다고 판단했습니다.
• 배럴 안의 export const B = Box 같은 별칭 상수는 따라가지 않습니다(그 배럴 파일 자체는 모듈 최상위 alias 규칙으로 처리됩니다).
• const D = Devup 같은 namespace 별칭, namespace를 통째로 넘기는 경우(Object.keys(Devup), spyOn(Devup, 'css'), export default Devup)는 그대로 둡니다. 런타임에 멤버를 어떻게 쓰는지 빌드가 알 수 없고, spyOn(reactModule, ...)처럼 정당한 사용이 있습니다.
• 해석기가 못 읽는 별칭(번들러 전용 alias 등)으로 닿는 배럴은 따라가지 못하고, 그 배럴이 패키지 이름을 담고 있을 때만 에러가 납니다.
• 모든 파일의 import 대상을 해석기로 한 번 읽으므로 비용이 늘 수 있습니다. 모듈은 한 추출 안에서 한 번만 분석하고, 패키지 이름과 re-export가 없는 모듈은 파싱하지 않습니다.
• 값을 다 바꾼 namespace import 선언은 그대로 남습니다(미사용 import).

검증

프로브(실제 WASM 경로, --modules로 배럴 해석):

// ui/index.ts: export * from './parts'; export { css, styled as s } from '@devup-ui/react'; export * as Devup from '@devup-ui/react'
// ui/parts/index.ts: export { Box } from './box'; export { Text } from '@devup-ui/react'
// ui/parts/box.ts: export { Box } from '@devup-ui/react'
single.tsx   import { Box } from './ui'; <Box bg="red" p={2} />
  => export const a = <div className="a b" />;   (dependencies: ui/index.ts, ui/parts/box.ts, ui/parts/index.ts)
chain.tsx    import { Box, Text, css, s } from './ui'
  => <div className="c"><span className="a b" /></div>, s('div', …)는 styled 컴포넌트로 컴파일
pkg.tsx      import { Flex } from '@acme/ui'   (node_modules/@acme/ui 가 Flex 를 re-export)
  => <div className="a b" />
ns.tsx       import * as UI from './ui'; import { Devup } from './ui'; <UI.Box/>; <Devup.Text/>; const { css } = UI
  => <div className="a" />, <span className="b" />, css(...) => "c"
unresolved.tsx  import { Missing } from './broken'  (broken: export * from './nowhere'; export { Box } from '@devup-ui/react')
  => unresolved.tsx:3:19: `Missing` cannot use `./broken` at build time: the build cannot follow its re-export of Devup UI (`./nowhere` cannot be read); import it from the package instead

namespace:

import * as Devup from '@devup-ui/react'
const { css } = Devup
export const a = <Devup.Box bg="red" />
export const b = css({ color: 'blue' })
export const c = Devup['css']({ color: 'green' })
=> a = <div className="a" />, b = "b", c = "c"            (이전: Devup['css'] 와 구조 분해가 런타임 placeholder)

export const a = [Devup.css]      => ns6.tsx:2:19: `Devup$css` is read at runtime, where it does not exist: …
export const a = Devup[key](…)    => ns7.tsx:3:18: `Devup` cannot use `Devup[key]` at build time: read its members by name, …

• extractor 테스트(barrel/tests.rs, 디스크의 실제 모듈): 단일/연쇄/export */이름 변경/compat 진입점/기본 내보내기/namespace re-export/해석 불가/순환/무관한 모듈/타입 import/속성 import, namespace 멤버·구조 분해·충돌 방지·오류 위치 등 37개. 기존 스냅샷은 Devup["css"]가 컴파일되도록 바뀐 1건(inline_imported_constants)만 변했습니다.
• 플러그인: bun-plugin/barrel.test.ts가 실제 WASM과 createModuleResolver로 상대 경로·tsconfig paths·패키지 exports·namespace·해석 불가를 검증하고(게이트와 컴파일), vite/webpack/rsbuild/next 로더 테스트가 배럴로만 닿는 소스가 그대로 추출기에 전달되는 것을 확인합니다.
• cargo fmt, cargo +1.99 clippy -D warnings, cargo test --workspace, WASM 재빌드 + bun run build, bun test(100% 커버리지, 0 fail), bun lint(기존 경고 2개 외 추가 없음), changepack(Patch).

2026-10-08 main 11790bef를 병합하여 업데이트했습니다. 충돌 없이 부모 변경을 병합했고, main의 직접 패키지 스캐너와 기존 배럴 인식 hasDevupUI를 함께 유지하도록 새 수정 커밋을 추가했습니다. 실제 Bun 배럴 회귀 테스트 7개를 모두 검증했습니다.

2026-10-17 부모 갱신: 확정 main a6ecc125를 포함한 최신 #730 c3bfe034를 병합했습니다. 충돌 파일 libs/extractor/src/lib.rs는 barrel 재작성/정렬된 의존성 합집합과 main의 companion 검증·Emotion namespace 정규화/pixelify·dead declaration 진단·source map을 모두 유지했습니다. 재작성 이력과 Boa 실행 완료를 분리하고, 평가 전 styling-call 범위를 이전 barrel edit를 통해 원본에 매핑하여 계산된 금지 선언도 main과 같은 원본 호출 위치를 가리키게 했습니다. 새 통합 6개 중 원본 호출 위치 2개가 실제 RED→GREEN으로 검증됐고 기존 fixture/assertion은 변경하지 않았습니다. snapshot 새 후보/수동 병합/수용 0개, #736 기능은 가져오지 않은 #730의 독립 자식입니다.

검증: DEFAULT Rust stack/CARGO_BUILD_JOBS=2/전체 프로세스 트리 6GiB(빌드·테스트), 12GiB(hook)로 순차 실행했습니다. Rust 정상 workspace 4,562개/실패 0개, barrel 38개, 기존 guard 343개+상위 추가 2개, dead declaration 535개, namespace 145개, source-map filter 5개, fmt/Rust1.99 Clippy, fresh WASM/root, lint와 Bun 5,932개/실패 0개/커버리지 100%, 실제 WASM/React SSR 40개(barrel/직접·named/star/default/namespace×TS/TSX×native/custom×조건)+상위 의미 20개가 통과했습니다. 전체 hook 514.621초/peak3.402GiB 통과 후 정확한 두 부모 f66b4c58/c3bfe034의 merge 6f63537b를 정상 push했습니다. Windows Rust 97.74%는 Linux 100% 증명이 아니므로 최신 head CI를 별도 확인합니다. 기존 lint 경고 9개 외 오류 없음, LSP는 응답/설치 불가로 clean이라 주장하지 않습니다.

별도 main 버그를 명시합니다: 추가 실제 Bun css-emit 회귀는 6개 통과/로컬 barrel JSX fixture 1개 실패이며, leading @jsxRuntime classic/@jsx createElement가 사라져 격리된 consumer가 react/jsx-dev-runtime을 찾는 문제입니다. plain Bun은 같은 pragma를 정상 해석하며, 별도 보관한 확정 main a6ecc125의 fresh 공개 WASM에서도 같은 두 pragma가 사라지고 #737 출력과 byte-identical임을 확인했습니다. 따라서 #737 회귀로 숨기거나 outage로 분류하지 않고 coordinator 지시에 따라 W67의 별도 main 수정 branch fix/keep-jsx-pragmas가 소유합니다(PR 번호 생성 후 추가). #737 fixture의 소스/assertion/tsconfig와 production pragma 정책은 변경하지 않았습니다. runtime styling·의존성·오류 fallback·새 오류 정책도 추가하지 않았습니다. 공유 Cargo cache가 baseline 산출물을 재사용한 문제는 최종 실제 QA로 검출하여 현재 소스 전용 private target에서 WASM을 완전히 재빌드했고, 이후 40+20 실제 검증과 hook 후 재검증이 다시 통과했습니다.

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

{
  "examples": [
    {
      "source": "import * as UI from './ui';const {styled}=UI;import {jsx as makeElement} from 'react/jsx-runtime';const trace=[];const selected=true;const Target=p=>makeElement('aside',p);const Base=styled.article.attrs({title:'base'})({...((trace.push('controller'),selected)?{color:(trace.push('leaf'),'red')}:{}),color:'green',padding:'2px'});const Mid=Base.withComponent(Target);const Card=styled(Mid)({color:'blue'});const App=props=><Card ref={props.ref} forwardedAs='nav' style={{borderColor:'orange'}}>child</Card>;",
      "output": {
        "code": "import \"@devup-ui/react/devup-ui.css\";\nimport { forwardRef as __devupForwardRef } from \"react\";\nimport * as UI from \"./ui\";\nimport { jsx as makeElement } from \"react/jsx-runtime\";\nconst trace = [];\nconst selected = true;\nconst Target = (p) => makeElement(\"aside\", p);\nconst Base = __devupForwardRef((__devupRefProps, __devupRef) => ((__devupProps) => (({ style, className, as: DevupAs = \"article\", forwardedAs, ...rest }) => (() => {\n\tconst __devupRecord0 = (0, trace.push(\"controller\"), true);\n\tconst __devupRecord1 = (0, __devupRecord0 ? (trace.push(\"leaf\"), \"red\") : undefined);\n\treturn <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n})())({\n\t...__devupProps,\n\t...{ title: \"base\" }\n}))({\n\t...__devupRefProps,\n\tref: __devupRef\n}));\nconst Mid = __devupForwardRef((__devupRefProps, __devupRef) => ((__devupProps) => (({ style, className, as: DevupAs = Target, forwardedAs, ...rest }) => (() => {\n\tconst __devupRecord2 = (0, trace.push(\"controller\"), true);\n\tconst __devupRecord3 = (0, __devupRecord2 ? (trace.push(\"leaf\"), \"red\") : undefined);\n\treturn <DevupAs {...rest} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n})())({\n\t...__devupProps,\n\t...{ title: \"base\" }\n}))({\n\t...__devupRefProps,\n\tref: __devupRef\n}));\nconst Card = __devupForwardRef((__devupRefProps, __devupRef) => ((__devupProps) => (({ style, className, as: DevupAs = Target, forwardedAs, ...rest }) => (() => {\n\tconst __devupRecord0 = (0, trace.push(\"controller\"), true);\n\tconst __devupRecord1 = (0, __devupRecord0 ? (trace.push(\"leaf\"), \"red\") : undefined);\n\treturn <DevupAs {...rest} as={forwardedAs} className={[\"c b\", className].filter(Boolean).join(\" \")} style={style} />;\n})())({\n\t...__devupProps,\n\t...{ title: \"base\" }\n}))({\n\t...__devupRefProps,\n\tref: __devupRef\n}));\nconst App = (props) => <Card ref={props.ref} forwardedAs=\"nav\" style={{ borderColor: \"orange\" }}>child</Card>;\n",
        "map": "{\"version\":3,\"names\":[\"as UI from\",\"ui';\\nimport { sty\"],\"sources\":[\"C:\\\\Users\\\\devfive3901\\\\AppData\\\\Local\\\\Temp\\\\opencode\\\\workers\\\\w60-chain-updates\\\\W60f-737-namespace-tsx-true-true.tsx\"],\"sourcesContent\":[\"import * as UI from './ui';const {styled}=UI;import {jsx as makeElement} from 'react/jsx-runtime';const trace=[];const selected=true;const Target=p=>makeElement('aside',p);const Base=styled.article.attrs({title:'base'})({...((trace.push('controller'),selected)?{color:(trace.push('leaf'),'red')}:{}),color:'green',padding:'2px'});const Mid=Base.withComponent(Target);const Card=styled(Mid)({color:'blue'});const App=props=><Card ref={props.ref} forwardedAs='nav' style={{borderColor:'orange'}}>child</Card>;\"],\"mappings\":\";AAAA,SAASA,cAAcC,yBAAI;AAA3B,YAAY,QAAQ;AAAyB,SAAQ,OAAO,mBAAkB;AAAoB,MAAM,QAAM,CAAC;AAAE,MAAM,WAAS;AAAK,MAAM,UAAO,MAAG,YAAY,SAAQ,CAAC;AAAE,MAAM;4BAAgD,MAAM,KAAK,YAAY;8CAAoB,MAAM,KAAK,MAAM,GAAE;;;;IAApF,EAAC,OAAM,OAAM;;;;;AAAiH,MAAM,gHAAuB;4BAArI,MAAM,KAAK,YAAY;8CAAoB,MAAM,KAAK,MAAM,GAAE;;;;IAApF,EAAC,OAAM,OAAM;;;;;AAAsJ,MAAM,iHAAd;4BAArI,MAAM,KAAK,YAAY;8CAAoB,MAAM,KAAK,MAAM,GAAE;;;;IAApF,EAAC,OAAM,OAAM;;;;;AAA6L,MAAM,OAAI,UAAO,CAAC,KAAK,KAAK,MAAM,KAAK,kBAAkB,OAAO,EAAC,aAAY,SAAQ,GAAG,KAAK,EAAE\"}",
        "dependencies": [
          "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
        ]
      },
      "css": "/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.c{color:blue}.a{color:green}.b{padding:2px}"
    }
  ],
  "results": [
    {
      "variant": "direct",
      "suffix": "ts",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": []
    },
    {
      "variant": "direct",
      "suffix": "ts",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": []
    },
    {
      "variant": "direct",
      "suffix": "ts",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": []
    },
    {
      "variant": "direct",
      "suffix": "ts",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": []
    },
    {
      "variant": "direct",
      "suffix": "tsx",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": []
    },
    {
      "variant": "direct",
      "suffix": "tsx",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": []
    },
    {
      "variant": "direct",
      "suffix": "tsx",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": []
    },
    {
      "variant": "direct",
      "suffix": "tsx",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": []
    },
    {
      "variant": "named",
      "suffix": "ts",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "named",
      "suffix": "ts",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "named",
      "suffix": "ts",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "named",
      "suffix": "ts",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "named",
      "suffix": "tsx",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "named",
      "suffix": "tsx",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "named",
      "suffix": "tsx",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "named",
      "suffix": "tsx",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-named.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "ts",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "ts",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "ts",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "ts",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "tsx",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "tsx",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "tsx",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "star",
      "suffix": "tsx",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-all.ts",
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "ts",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "ts",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "ts",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "ts",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "tsx",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "tsx",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "tsx",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "namespace",
      "suffix": "tsx",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-ui.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "ts",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "ts",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "ts",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "ts",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" class=\"c b\" style=\"border-color:orange\" as=\"nav\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "tsx",
      "custom": false,
      "selected": false,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "tsx",
      "custom": false,
      "selected": true,
      "html": "<section title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</section>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "tsx",
      "custom": true,
      "selected": false,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    },
    {
      "variant": "default",
      "suffix": "tsx",
      "custom": true,
      "selected": true,
      "html": "<aside title=\"base\" as=\"nav\" class=\"c b\" style=\"border-color:orange\">child</aside>",
      "dependencies": [
        "C:\\Users\\devfive3901\\AppData\\Local\\Temp\\opencode\\workers\\w60-chain-updates\\W60f-737-default.ts"
      ]
    }
  ]
}

2026-10-17 최신 head 6f63537b CI 결과: run 38935996068은 실패이며 green/outage로 분류하지 않습니다. publish job 117091518404에서 Linux Rust 100.00% coverage, 14586/14586 lines covered와 일반 Bun 검증은 통과했고, 이후 Regression test (bun-plugin preload race)의 local-barrel consumer가 react/jsx-dev-runtime을 찾지 못해 1개 실패했습니다. benchmark/landing-next-e2e/vinext-rsc-css-e2e는 통과했습니다. 이 오류는 앞서 실제 확정 main WASM으로 재현한 leading JSX pragma 소실과 같으며 W67의 별도 fix/keep-jsx-pragmas가 소유합니다. coordinator 지시에 따라 #737의 fixture/source/assertion/workflow는 바꾸지 않고 기록한 채 나머지 체인을 갱신합니다. 수정 반영 후 새로운 head의 CI가 통과하기 전에는 최종 acceptance를 주장하지 않습니다.

2026-10-17 위 실패의 main JSX pragma 버그 수정은 별도 PR #784입니다. 실제 frozen-main 재현으로 분리된 오류이며 outage/green으로 바꾸지 않습니다. #784를 이 체인에 직접 병합하지 않고, 사용자가 main에 병합한 뒤 coordinator가 지시하는 main 갱신으로만 반영합니다.

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

@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

• 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

• 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
• 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/build_time_values.rs	100.00% <100.00%> (ø)
libs/extractor/src/composition.rs	100.00% <100.00%> (ø)
libs/extractor/src/css_prop.rs	100.00% <100.00%> (ø)
libs/extractor/src/css_utils.rs	100.00% <100.00%> (ø)
...tor/src/extractor/extract_style_from_expression.rs	100.00% <ø> (ø)
...tractor/src/extractor/extract_style_from_styled.rs	100.00% <100.00%> (ø)
libs/extractor/src/import_alias_visit.rs	100.00% <100.00%> (ø)
... and 18 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.