[owjs3901]

Refs #688 (A: 다른 파일과 include 라이브러리의 styled 정의를 모듈 해석으로 읽어 합성). #730 위에 쌓은 브랜치입니다. #706 #707 #710 #711 #722 #727 #728 #729 #730이 먼저 병합되어야 합니다.

요약

같은 파일에서 정의한 styled 컴포넌트는 이미 정적으로 합성되지만, 다른 모듈이나 include 라이브러리에서 import한 styled 컴포넌트는 불투명한 런타임 컴포넌트로 남아 계속 감싸졌습니다. 이제 빌드가 그 모듈의 정의를 읽어 같은 파일에서 정의한 것과 똑같이 합성합니다.

// base.ts
export const Base = styled.div`color: red; padding: 4px;`

// app.tsx
import { Base } from './base'
export const Card = styled(Base).attrs({ role: 'region' })`color: blue;`

이전에는 as: DevupAs = Base로 Base를 런타임에 한 번 더 렌더링했고, 지금은 Base의 태그와 스타일을 읽어 div에 color: blue(뒤 선언이 이김)와 padding: 4px를 직접 붙입니다.

동작

• 모듈 해석: imported constant와 같은 해석기(상대 경로, tsconfig paths, 패키지 exports, include 라이브러리)로 모듈을 읽습니다. 모듈은 자신의 추출과 똑같이(별칭 변환 → 상수 인라인 → 방문) 컴파일하고, 그 안의 import도 같은 방식으로 따라갑니다. export { X } from, export * from, import { X }; export { X }, export default, 이름 바꾼 export, 순환 import를 처리합니다. 한 번의 추출 안에서 모듈은 한 번만 읽습니다.
• 합성: styled(Imported)(...), styled(Imported).attrs(...), styled(Imported)\...`, Imported.withComponent(...), (Emotion cssprop),styled(UI.Imported)(namespace import)가 같은 파일 정의와 같은 규칙으로 합성됩니다. 속성+선택자+브레이크포인트+레이어마다 뒤 선언이 이기고, attrs는 순서대로 합쳐지며, 읽는 props(reads)와 shouldForwardProp`으로 props를 거릅니다. 합성된 스타일은 가져오는 파일이 자기 이름으로 만들므로 가져오는 파일의 CSS에 들어갑니다.
• 의존성: 읽은 모듈(과 그 모듈이 읽은 모듈)은 imported constant처럼 dependencies로 보고되어, 그 모듈이 바뀌면 가져오는 파일이 다시 빌드됩니다. 플러그인 쪽 변경은 필요 없었습니다(vite addWatchFile, webpack/rsbuild addDependency, next 로더가 이미 이 목록을 씁니다).
• 파일 간 컴포넌트 선택자(${ImportedChild} { ... }, [ImportedChild] 규칙 키): 정의하는 파일이 내보내는 styled 컴포넌트마다 마커 클래스를 붙이고, 선택하는 파일은 같은 마커를 읽습니다. 마커는 정의 모듈의 파일 번호와 export 이름의 정렬 순서로만 정해지는 순수 함수라, 두 파일(과 두 프로세스)이 같은 문자열을 계산합니다. 플러그인은 모듈 해석기가 돌려주는 경로와 추출에 넘기는 파일 이름을 이미 같게 맞춥니다(toId). 확장한 컴포넌트는 기반 컴포넌트의 마커도 받습니다.
• 읽을 수 없는 정의는 지금처럼 런타임 컴포넌트로 감쌉니다(아래 남는 한계).

프로브 (--debug, survey/probe.ts --modules)

$ probe app.tsx            # Card = styled(Base).attrs({ role: 'region' })`color: blue;`
export const Card = ... as: DevupAs = "div" ... className={["c-1-Card c-0-Base color-0-blue--255 padding-0-4px--255", className]...}
                        ... {...__devupProps, ...{ role: "region" }}
export const Wide = ... as: DevupAs = "input", "invalid"를 거름 ... className={["c-1-Wide c-0-Field width-0-100_pc_--255 border-0---255", className]...}
                        style={{ "--border-0-": `1px solid ${(p=>p.invalid?`red`:`gray`)(rest)}`, ...style }}
export const Panel = ... className={["c-1-Panel margin-0-0-_a__s__d_c-0-Base-255", className]...}   // ${Base} { margin: 0 }
export const Small = ... as: DevupAs = "span" ... className={["padding-0-4px--255 color-0-red--255", className]...}   // Base.withComponent('span')
CSS: .border-0---255{border:var(--border-0-)}.color-0-blue--255{color:blue}.color-0-red--255{color:red}.padding-0-4px--255{padding:4px}.width-0-100_pc_--255{width:100%}.margin-0-0-_a__s__d_c-0-Base-255 .c-0-Base{margin:0}
DEPENDENCIES: .../p2/base.ts

$ probe base.ts            # 정의하는 파일
export const Base = ... className={["c-0-Base padding-0-4px--255 color-0-red--255", className]...}   // 선택자가 읽는 c-0-Base와 같은 마커

$ probe css-prop.tsx       # <Base css={{ color: 'blue' }} title="hi" />
<div title="hi" className="padding-0-4px--255 color-0-blue--255 c-0-Base" />
CSS: .color-0-blue--255{color:blue}.padding-0-4px--255{padding:4px}

새로 생기는 오류

새 종류의 오류는 없습니다. 달라지는 점은 하나입니다.

• import한 styled 컴포넌트의 css prop이 그 컴포넌트의 스타일과 겹치면, 같은 파일 정의와 똑같이 파일:줄:열: cssonoverrides stylesBasesets, which the build orders only for a styled component rendering a tag with no attrs or props read, ...: move these styles intostyled(Base)(...)``로 보고됩니다. 이전에는 순서가 스타일시트에 맡겨져 조용히 넘어갔습니다. 겹치지 않거나 태그로 인라인할 수 있으면(attrs, 읽는 props, spread, `as` 없음) 오류 없이 `css` prop이 이깁니다.

남는 한계

정확히 읽을 수 없는 정의는 건드리지 않고 지금 동작(런타임 컴포넌트로 감싸기)을 유지합니다.

• 런타임만 아는 base: styled(Link), styled(forwardRef(...)), styled(getThing().div). 정의 모듈의 식별자를 가져오는 쪽에서 가리킬 수 없기 때문입니다.
• 정의 모듈의 바인딩을 읽는 attrs/클래스/동적 스타일 식(const handler = ...; styled.div.attrs({ onClick: handler }), 모듈 안 함수를 부르는 ${(p) => scaled(p.x)}, 모듈 안 css() mixin 클래스). 식은 가져오는 파일에서 다시 평가되므로, 자신의 매개변수, props, rest, 언어 전역(Math, Number, String ...)만 읽는 식(타입 주석 포함)만 읽습니다.
• 빌드 오류가 있는 모듈, 런타임 값이 있어 boa 계산이 필요한 모듈: 그 모듈의 정의는 읽지 않지만 마커는 계속 계산합니다(컴포넌트 선택자는 동작).
• 해석할 수 없는 모듈, import 순환, .css.ts, export const Base = 5처럼 styled 호출이 아닌 export, import type.
• namespace import 멤버는 styled(UI.Base)와 UI.Base.withComponent(...)만 읽습니다. ${UI.Child} { ... }와 <UI.Base css={...}>는 읽지 않습니다.
• <Imported foo />처럼 합성 없이 쓰는 호출부에서는 props를 거르지 않습니다(정의 모듈이 자기 컴포넌트 안에서 거릅니다).
• 마커: 내보내는 styled 컴포넌트는 선택 여부와 관계없이 마커 클래스를 하나씩 더 받습니다. 정의하는 파일은 누가 선택하는지 알 수 없기 때문입니다. 마커는 파일 번호를 쓰므로 원자 클래스 이름처럼 플러그인이 파일 맵을 시드하는 것을 전제로 합니다. 이 때문에 내보내는 styled 컴포넌트가 있던 기존 스냅샷 14개의 클래스 목록이 달라졌습니다(클래스 추가만, 스타일 변화 없음).

검증

• cargo fmt, cargo +1.99 clippy --workspace --all-targets -- -D warnings, cargo test --workspace 통과
• 모듈 두 개(해석기 헬퍼)로 합성, 선택자, 재export/namespace, 읽을 수 없는 정의, 순환을 단위 테스트(imported_styled.rs)와 insta 스냅샷으로 확인. 같은 파일 정의와 스타일이 같은지(styled/attrs/withComponent/css prop 10여 가지)도 비교합니다.
• WASM API와 디스크의 실제 파일로 끝에서 끝까지 검증(packages/next-plugin/src/__tests__/imported-styled.test.ts): 상대 경로, tsconfig paths, 패키지 exports의 include 라이브러리, 의존성 보고, 모듈 변경 반영, 파일 간 마커 일치
• WASM 재빌드, 루트 bun run build, bun test 5491 통과, 커버리지 100%
• bun lint: 기존 경고 2개 외 없음

2026-10-08 main 11790bef를 병합하여 업데이트했습니다. 충돌 없이 갱신된 부모 PR의 변경과 main의 변경을 모두 보존했습니다.

2026-10-15 갱신: 갱신된 부모 #730 b28816c285a041f1ac8a59c22a42745a75698ce0을 병합했습니다. 충돌 파일 libs/extractor/src/extractor/extract_style_from_styled.rs, libs/extractor/src/lib.rs, libs/extractor/src/visit.rs, libs/extractor/src/snapshots/extractor__tests__styled_components_of_any_base.snap은 부모의 조건부 스프레드 우선순위·캡처 바인더·실제 타깃·forwardRef·식별 클래스와 이 PR의 모듈 읽기·의존성·export 식별자를 함께 보존해 해결했습니다. 고정 스타일 요약은 원래 정의 모듈의 렌더러와 정확한 클래스/forwarded-rest 객체 슬롯을 유지하므로 캡처를 가져오는 모듈에서 재실행하지 않으며, 캡처가 없는 알려진 native 기반 custom 자손과 attrs 없는 read-bearing 고정 자손도 같은 실제 capability로 합성합니다. 새로 생기는 오류 없음.

수락한 생성 스냅샷은 다음 여섯 개뿐이며 각 .snap.new를 재생성·독립 비교·해시 확인한 뒤 assertion_line 메타데이터만 제외했습니다: extractor__imported_styled__tests__imported_components_compose_like_local_ones, extractor__imported_styled__tests__imported_components_the_build_cannot_read_stay_runtime_components, extractor__imported_styled__tests__re_exports_and_namespaces_reach_the_defining_module, extractor__tests__conditional_composition, extractor__tests__styled_components_of_any_base, extractor__tests__template_interpolations. 첫 번째는 W/V의 export 식별 클래스와 승인된 custom V의 실제 슬롯 쌍, 두 번째는 forwardRef 바깥의 원래 eager 바인딩, 세 번째는 namespace W의 식별 클래스, 나머지는 스타일 합성식 바깥 식별 클래스 및 any-base A/B/C/E의 export 식별자만 반영했습니다. 스타일 원자·타깃·attrs·ref·의존성의 무관한 변경은 없습니다.

검증: 기본 Rust 스택/CARGO_BUILD_JOBS=2, Rust 1.99 all-target Clippy 및 fmt 통과, 일반 모드 cargo test --workspace 3,678개 통과(기존 CSS-prop 가드 343개 및 교차 모듈 실행 76개 유지), 최신 WASM·루트 빌드 통과, Bun 5,922개/실패 0개/커버리지 100%, 실제 공개 WASM+React/SSR의 필터 없는 16개 시나리오 통과, 전체 커밋 훅 통과. LSP는 사용 불가였으며 정상이라고 주장하지 않습니다. Linux 100% 커버리지와 새 head CI 결과는 별도 확인 중입니다.

남는 경계: attrs-bearing 교차 모듈 준비 프로토콜은 추가 구현하지 않았고 기존 동작을 유지합니다. 런타임 스타일러·스타일 헬퍼·레지스트리·callable 전송·새 오류·불투명 fallback을 추가하지 않았습니다. 이 head 752b6141687091f915f5111e4698562adc9d3edc는 코디네이터가 승인한 현재 부모/이전 main 76b1a15 기준의 완료 단위이며 최신 main a6ecc12 포함 완료를 뜻하지 않습니다. 이어서 승인된 a6ecc12 전파 라운드 한 번을 부모 갱신 순서대로 수행합니다.

실제 WASM/React 공개 API 검증 출력(생성 코드·CSS·SSR 결과):

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
const trace = [];
let selected = true;
export const Base = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "article", forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), selected);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <DevupAs {...rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`a--a ${rest.__devupCss0 ?? "a b"}`, className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { jsx } from "@devup-ui/react/compat";
import { Base } from "./model";
const Card = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => <Base {...{
	...{
		...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
		forwardedAs
	},
	__devupCss0: rest.__devupCss0 ?? "c b",
	__devupForwarded0: rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)
}} as={DevupAs} className={className} style={style} />)({
	...__devupRefProps,
	ref: __devupRef
}));
const Parent = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "section", forwardedAs, ...rest }) => <DevupAs {...(({ "theme": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={["d", className].filter(Boolean).join(" ")} style={style} />)({
	...__devupRefProps,
	ref: __devupRef
}));
const App = (ref) => <Parent><Card ref={ref} __devupCss0={"c e"}>child</Card></Parent>;

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.c{color:blue}.a{color:green}.b{padding:2px}.e{padding:4px}.d .a--a{outline-color:orange}

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
const trace = [];
export const Base = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "article", forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("A"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <DevupAs {...rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`a--a ${rest.__devupCss0 ?? "a b"}`, className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { forwardRef as makeTarget } from "react";
import { jsx as createElement } from "react/jsx-runtime";
import { Base } from "./model";
const Target = makeTarget((p, ref) => {
	const { theme, customProp, ...ordinary } = p;
	return createElement("aside", {
		...ordinary,
		ref,
		title: theme?.tone,
		"data-custom": customProp
	});
});
export const Mid = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = Target, forwardedAs, ...rest }) => <Base {...{
	...{
		...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
		forwardedAs
	},
	__devupCss0: rest.__devupCss0 ?? "a b",
	__devupForwarded0: rest.__devupForwarded0 ?? (({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest)
}} as={DevupAs} className={["b--a", className].filter(Boolean).join(" ")} style={style} />)({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { jsx } from "@devup-ui/react/compat";
import { Mid } from "./middle";
const trace = [];
const Card = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("C"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "1px") : undefined);
	return <Mid {...{
		...{
			...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
			forwardedAs
		},
		__devupCss0: rest.__devupCss0 ?? "c d b",
		__devupForwarded0: rest.__devupForwarded0 ?? (({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest)
	}} as={DevupAs} className={className} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));
const App = (ref) => <Card ref={ref} theme={{ tone: "caller" }} customProp="custom" style={{ borderColor: "orange" }} __devupCss0={"d c e"}>child</Card>;

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.d{color:blue}.a{color:green}.c{margin:2px}.b{padding:2px}.e{padding:5px}

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
const trace = [];
export const Base = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "article", forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("A"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <DevupAs {...rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`a--a ${rest.__devupCss0 ?? "a"}`, className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { forwardRef as makeTarget } from "react";
import { jsx as createElement } from "react/jsx-runtime";
import { Base } from "./model";
const trace = [];
const Target = makeTarget((p, ref) => createElement("aside", {
	...p,
	ref
}));
const Read = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("B"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <Base {...{
		...{
			...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
			forwardedAs
		},
		__devupCss0: rest.__devupCss0 ?? "a b",
		__devupForwarded0: rest.__devupForwarded0 ?? (({ "denied": __devupOmit0, "$tone": __devupOmit1, "blocked": __devupOmit2, "__devupCss0": __devupOmit3, "__devupForwarded0": __devupOmit4, ...__devupDom }) => __devupDom)(rest)
	}} as={DevupAs} className={className} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));
export const Mid = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = Target, forwardedAs, ...rest }) => (() => {
	const __devupRecord2 = (0, trace.push("controller"), order.push("B"), true);
	const __devupRecord3 = (0, __devupRecord2 ? (trace.push("leaf"), "red") : undefined);
	return <Base {...{
		...{
			...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
			forwardedAs
		},
		__devupCss0: rest.__devupCss0 ?? "a b",
		__devupForwarded0: rest.__devupForwarded0 ?? (({ "denied": __devupOmit0, "$tone": __devupOmit1, "blocked": __devupOmit2, "__devupCss0": __devupOmit3, "__devupForwarded0": __devupOmit4, ...__devupDom }) => __devupDom)(rest)
	}} as={DevupAs} className={["b--a", className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { Mid } from "./middle";
const trace = [];
export const Card = __devupForwardRef((__devupRefProps, __devupRef) => ((__devupProps) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => <Mid {...{
	...{
		...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
		forwardedAs
	},
	__devupCss0: rest.__devupCss0 ?? "c b",
	__devupForwarded0: rest.__devupForwarded0 ?? (({ "denied": __devupOmit0, "$tone": __devupOmit1, "blocked": __devupOmit2, "__devupCss0": __devupOmit3, "__devupForwarded0": __devupOmit4, ...__devupDom }) => __devupDom)(rest)
}} as={DevupAs} className={["c--a", className].filter(Boolean).join(" ")} style={style} />)(((__devupContext) => ({
	...__devupContext,
	className: [__devupContext.className, __devupProps.className].filter(Boolean).join(" ") || undefined
}))(((__devupContext) => ((__devupAttrs) => ({
	...__devupContext,
	...__devupAttrs,
	className: [__devupContext.className, __devupAttrs.className].filter(Boolean).join(" ") || undefined,
	style: {
		...__devupContext.style,
		...__devupAttrs.style
	}
}))({
	...{},
	...((p) => (trace.push([p.denied, p.$tone]), order.push("attrs"), {
		denied: p.denied + "-outer",
		$tone: p.$tone + "-outer"
	}))(__devupContext)
}))({
	...__devupProps,
	className: undefined
}))))({
	...__devupRefProps,
	ref: __devupRef
}));
const App = (ref) => <Card denied="caller" $tone="transient" ref={ref}>child</Card>;

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.c{color:blue}.a{color:green}.b{padding:2px}
[
  {
    "scenario": "selector-and-css-prop",
    "captured": false,
    "modelFirst": false,
    "html": "<section class=\"d\"><article class=\"c e a--a\">child</article></section>"
  },
  {
    "scenario": "selector-and-css-prop",
    "captured": false,
    "modelFirst": true,
    "html": "<section class=\"d\"><article class=\"c e a--a\">child</article></section>"
  },
  {
    "scenario": "selector-and-css-prop",
    "captured": true,
    "modelFirst": false,
    "html": "<section class=\"d\"><article class=\"a--a c e\">child</article></section>"
  },
  {
    "scenario": "selector-and-css-prop",
    "captured": true,
    "modelFirst": true,
    "html": "<section class=\"d\"><article class=\"a--a c e\">child</article></section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": false,
    "retarget": "custom",
    "html": "<aside class=\"b--a a--a d c e\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": false,
    "retarget": "native",
    "html": "<section class=\"b--a a--a d c e\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": true,
    "retarget": "custom",
    "html": "<aside class=\"b--a a--a d c e\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": true,
    "retarget": "native",
    "html": "<section class=\"b--a a--a d c e\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": false,
    "retarget": "custom",
    "html": "<aside class=\"a--a d c e b--a\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": false,
    "retarget": "native",
    "html": "<section class=\"a--a d c e b--a\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": true,
    "retarget": "custom",
    "html": "<aside class=\"a--a d c e b--a\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": true,
    "retarget": "native",
    "html": "<section class=\"a--a d c e b--a\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": false,
    "attrs": false,
    "html": "<section class=\"a--a c b b--a c--a\">child</section>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": false,
    "attrs": true,
    "html": "<section class=\"a--a c b b--a c--a\">child</section>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": true,
    "attrs": false,
    "html": "<aside class=\"a--a c b b--a c--a\">child</aside>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": true,
    "attrs": true,
    "html": "<aside class=\"a--a c b b--a c--a\">child</aside>"
  }
]

2026-10-17 부모 갱신: 확정 main a6ecc125를 포함한 최신 #730 c3bfe034를 자동 병합했습니다(merge 47e1f223, 부모 752b6141/c3bfe034, 충돌 파일 없음). imported_components_the_build_cannot_read_stay_runtime_components의 생성 snapshot 한 개만 main의 Emotion 원시 배열 fallback 의미에 맞춰 갱신했습니다: styled.div({color:['red','blue']})를 확장한 I의 뒤쪽 blue 선언이 같은 breakpoint의 fallback을 대체하므로 불필요한 class f와 blue level1 atom만 제거되며 다른 출력은 동일합니다. snapshot은 테스트가 생성한 후보에서 assertion_line만 제거해 수용했고 소스 fixture·기존 행동 assertion·production 정책은 변경하지 않았습니다.

W60f 검증: DEFAULT Rust stack / CARGO_BUILD_JOBS=2 / 전체 프로세스 트리 6GiB(빌드·테스트), 12GiB(commit hook)로 순차 실행했습니다. Rust 정상 workspace 4,603개/실패 0개, cross-module 76개 및 기존 guard 343개+상위 추가 2개, fmt, Rust1.99 Clippy, fresh WASM/root, lint, Bun 5,926개/실패 0개/커버리지 100%, 실제 React/WASM 16개와 fallback 양방향 추출 순서 2개가 통과했습니다. snapshot-only 새 commit f4aaa814는 전체 hook을 통과했습니다(472.912초, peak 3.193GiB); Windows Rust 98.03%는 Linux 100% 증명이 아니므로 별도 CI로 확인합니다. 기존 React migration lint 경고 9개 외 오류 없음, LSP는 설치/응답 불가로 clean이라 주장하지 않습니다.

새로 생기는 오류: 이번 부모 갱신으로 추가한 오류 없음. 원래 renderer와 정확한 class/forwarded-object 쌍, 빈 값 교체, raw/read/filter, identity 분리와 capture-free custom descendant의 empty-parent-bindings 제한을 그대로 유지했습니다. attrs-bearing B 확장은 계속 보류이며 runtime styling/helper/registry/callable transport·새 fallback은 추가하지 않았습니다. f4aaa814를 정상 push했고 최신 head CI run 38925940835는 진행 중입니다(이전 head의 CI를 현재 검증으로 사용하지 않음).

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

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
const trace = [];
let selected = true;
export const Base = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "article", forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), selected);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <DevupAs {...rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`a--a ${rest.__devupCss0 ?? "a b"}`, className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { jsx } from "@devup-ui/react/compat";
import { Base } from "./model";
const Card = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => <Base {...{
	...{
		...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
		forwardedAs
	},
	__devupCss0: rest.__devupCss0 ?? "c b",
	__devupForwarded0: rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)
}} as={DevupAs} className={className} style={style} />)({
	...__devupRefProps,
	ref: __devupRef
}));
const Parent = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "section", forwardedAs, ...rest }) => <DevupAs {...(({ "theme": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={["d", className].filter(Boolean).join(" ")} style={style} />)({
	...__devupRefProps,
	ref: __devupRef
}));
const App = (ref) => <Parent><Card ref={ref} __devupCss0={"c e"}>child</Card></Parent>;

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.c{color:blue}.a{color:green}.b{padding:2px}.e{padding:4px}.d .a--a{outline-color:orange}

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
const trace = [];
export const Base = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "article", forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("A"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <DevupAs {...rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`a--a ${rest.__devupCss0 ?? "a b"}`, className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { forwardRef as makeTarget } from "react";
import { jsx as createElement } from "react/jsx-runtime";
import { Base } from "./model";
const Target = makeTarget((p, ref) => {
	const { theme, customProp, ...ordinary } = p;
	return createElement("aside", {
		...ordinary,
		ref,
		title: theme?.tone,
		"data-custom": customProp
	});
});
export const Mid = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = Target, forwardedAs, ...rest }) => <Base {...{
	...{
		...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
		forwardedAs
	},
	__devupCss0: rest.__devupCss0 ?? "a b",
	__devupForwarded0: rest.__devupForwarded0 ?? (({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest)
}} as={DevupAs} className={["b--a", className].filter(Boolean).join(" ")} style={style} />)({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { jsx } from "@devup-ui/react/compat";
import { Mid } from "./middle";
const trace = [];
const Card = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("C"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "1px") : undefined);
	return <Mid {...{
		...{
			...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
			forwardedAs
		},
		__devupCss0: rest.__devupCss0 ?? "c d b",
		__devupForwarded0: rest.__devupForwarded0 ?? (({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest)
	}} as={DevupAs} className={className} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));
const App = (ref) => <Card ref={ref} theme={{ tone: "caller" }} customProp="custom" style={{ borderColor: "orange" }} __devupCss0={"d c e"}>child</Card>;

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.d{color:blue}.a{color:green}.c{margin:2px}.b{padding:2px}.e{padding:5px}

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
const trace = [];
export const Base = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "article", forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("A"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <DevupAs {...rest.__devupForwarded0 ?? (({ "theme": __devupOmit0, "__devupCss0": __devupOmit1, "__devupForwarded0": __devupOmit2, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`a--a ${rest.__devupCss0 ?? "a"}`, className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { forwardRef as makeTarget } from "react";
import { jsx as createElement } from "react/jsx-runtime";
import { Base } from "./model";
const trace = [];
const Target = makeTarget((p, ref) => createElement("aside", {
	...p,
	ref
}));
const Read = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => (() => {
	const __devupRecord0 = (0, trace.push("controller"), order.push("B"), true);
	const __devupRecord1 = (0, __devupRecord0 ? (trace.push("leaf"), "red") : undefined);
	return <Base {...{
		...{
			...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
			forwardedAs
		},
		__devupCss0: rest.__devupCss0 ?? "a b",
		__devupForwarded0: rest.__devupForwarded0 ?? (({ "denied": __devupOmit0, "$tone": __devupOmit1, "blocked": __devupOmit2, "__devupCss0": __devupOmit3, "__devupForwarded0": __devupOmit4, ...__devupDom }) => __devupDom)(rest)
	}} as={DevupAs} className={className} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));
export const Mid = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = Target, forwardedAs, ...rest }) => (() => {
	const __devupRecord2 = (0, trace.push("controller"), order.push("B"), true);
	const __devupRecord3 = (0, __devupRecord2 ? (trace.push("leaf"), "red") : undefined);
	return <Base {...{
		...{
			...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
			forwardedAs
		},
		__devupCss0: rest.__devupCss0 ?? "a b",
		__devupForwarded0: rest.__devupForwarded0 ?? (({ "denied": __devupOmit0, "$tone": __devupOmit1, "blocked": __devupOmit2, "__devupCss0": __devupOmit3, "__devupForwarded0": __devupOmit4, ...__devupDom }) => __devupDom)(rest)
	}} as={DevupAs} className={["b--a", className].filter(Boolean).join(" ")} style={style} />;
})())({
	...__devupRefProps,
	ref: __devupRef
}));

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
import { Mid } from "./middle";
const trace = [];
export const Card = __devupForwardRef((__devupRefProps, __devupRef) => ((__devupProps) => (({ style, className, as: DevupAs = undefined, forwardedAs, ...rest }) => <Mid {...{
	...{
		...(({ "__devupCss0": __devupOmit0, "__devupForwarded0": __devupOmit1, ...__devupDom }) => __devupDom)(rest),
		forwardedAs
	},
	__devupCss0: rest.__devupCss0 ?? "c b",
	__devupForwarded0: rest.__devupForwarded0 ?? (({ "denied": __devupOmit0, "$tone": __devupOmit1, "blocked": __devupOmit2, "__devupCss0": __devupOmit3, "__devupForwarded0": __devupOmit4, ...__devupDom }) => __devupDom)(rest)
}} as={DevupAs} className={["c--a", className].filter(Boolean).join(" ")} style={style} />)(((__devupContext) => ({
	...__devupContext,
	className: [__devupContext.className, __devupProps.className].filter(Boolean).join(" ") || undefined
}))(((__devupContext) => ((__devupAttrs) => ({
	...__devupContext,
	...__devupAttrs,
	className: [__devupContext.className, __devupAttrs.className].filter(Boolean).join(" ") || undefined,
	style: {
		...__devupContext.style,
		...__devupAttrs.style
	}
}))({
	...{},
	...((p) => (trace.push([p.denied, p.$tone]), order.push("attrs"), {
		denied: p.denied + "-outer",
		$tone: p.$tone + "-outer"
	}))(__devupContext)
}))({
	...__devupProps,
	className: undefined
}))))({
	...__devupRefProps,
	ref: __devupRef
}));
const App = (ref) => <Card denied="caller" $tone="transient" ref={ref}>child</Card>;

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.c{color:blue}.a{color:green}.b{padding:2px}
[
  {
    "scenario": "selector-and-css-prop",
    "captured": false,
    "modelFirst": false,
    "html": "<section class=\"d\"><article class=\"c e a--a\">child</article></section>"
  },
  {
    "scenario": "selector-and-css-prop",
    "captured": false,
    "modelFirst": true,
    "html": "<section class=\"d\"><article class=\"c e a--a\">child</article></section>"
  },
  {
    "scenario": "selector-and-css-prop",
    "captured": true,
    "modelFirst": false,
    "html": "<section class=\"d\"><article class=\"a--a c e\">child</article></section>"
  },
  {
    "scenario": "selector-and-css-prop",
    "captured": true,
    "modelFirst": true,
    "html": "<section class=\"d\"><article class=\"a--a c e\">child</article></section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": false,
    "retarget": "custom",
    "html": "<aside class=\"b--a a--a d c e\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": false,
    "retarget": "native",
    "html": "<section class=\"b--a a--a d c e\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": true,
    "retarget": "custom",
    "html": "<aside class=\"b--a a--a d c e\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": false,
    "modelFirst": true,
    "retarget": "native",
    "html": "<section class=\"b--a a--a d c e\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": false,
    "retarget": "custom",
    "html": "<aside class=\"a--a d c e b--a\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": false,
    "retarget": "native",
    "html": "<section class=\"a--a d c e b--a\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": true,
    "retarget": "custom",
    "html": "<aside class=\"a--a d c e b--a\" style=\"border-color:orange\" title=\"caller\" data-custom=\"custom\">child</aside>"
  },
  {
    "scenario": "three-module-retarget",
    "captured": true,
    "modelFirst": true,
    "retarget": "native",
    "html": "<section class=\"a--a d c e b--a\" style=\"border-color:orange\">child</section>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": false,
    "attrs": false,
    "html": "<section class=\"a--a c b b--a c--a\">child</section>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": false,
    "attrs": true,
    "html": "<section class=\"a--a c b b--a c--a\">child</section>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": true,
    "attrs": false,
    "html": "<aside class=\"a--a c b b--a c--a\">child</aside>"
  },
  {
    "scenario": "read-bearing-fixed-descendant",
    "custom": true,
    "attrs": true,
    "html": "<aside class=\"a--a c b b--a c--a\">child</aside>"
  }
]

2026-10-17 CI 확인: head f4aaa8144e8f7d243fea03b570ae2b10c13f50c2의 run 38925940835은 모든 job 및 Codecov가 통과했습니다. publish job 117057365246 실제 로그에서 Linux Rust 100.00% coverage, 14543/14543 lines covered, Bun 5926개/실패 0개/전체 커버리지 100%를 확인했습니다. 확정 main a6ecc12 포함 및 현재 merge 상태는 최신 PR audit로 재확인했습니다.

2026-10-20 부모 갱신: GREEN #730 18e496f1을 이 PR의 head f4aaa814에 진짜 병합했습니다(merge 4255abd1, 부모 f4aaa814/18e496f1). 충돌 파일은 libs/extractor/src/lib.rs, visit.rs, style_values.rs, extractor/extract_style_from_styled.rs, 스냅샷 14개와 styled_source_tests/compatibility.rs였고 두 쪽의 변경을 모두 보존했습니다: 이 PR의 StyledCapability·imported_styled 읽기·컴포넌트 marker에 #730/#729/#728/main의 ReadContext·ClassNames 공유 scoping·$ 전달 prop 필터(styled_transient)·header pragma·parsing::parse를 합쳤습니다.

합친 결과로 바뀐 동작은 두 가지입니다. (1) 가져온 컴포넌트를 template 계산 키로 쓰는 [&:focus ${Dyn}]는 이제 &:focus .a--b로 컴파일되어, 이 PR의 기존 빌드 오류(styled() cannot use ...)가 사라집니다(#730의 template key 지원이 가져온 컴포넌트에도 적용됨). (2) 내보냈지만 컴포넌트가 아닌 상수(예: export const cls = css(...))도 marker를 먼저 만들면서 파일 번호를 등록하던 것을, marker 이름을 실제 컴포넌트가 될 때만 계산하도록 바꿨습니다. 등록된 파일 번호가 예약 슬롯 수(getUnreservedClassSlotCount)와 어긋나던 문제(rsbuild audit 시험 2개)를 고치고, css만 내보내는 파일의 불필요한 작업도 줄입니다. next-plugin webpack 전달 시험(webpack-delivery-http.cjs)은 선언이 없는 marker 클래스(-- 포함)만 건너뛰도록 시험 도우미를 갱신했고, 모든 스타일 클래스가 선언에 연결되어야 한다는 단언은 그대로입니다.

검증: 기본 스택, CARGO_BUILD_JOBS=2, 6 GiB 감시로 cargo fmt, clippy(-D warnings) 통과, workspace 테스트 5,796개 통과·실패 0, 스냅샷 20개 검토 후 반영(14개 충돌 스냅샷 + 가져온 컴포넌트 6개; 변경은 $ 필터 감싸기, __devupRecord0, header pragma 순서, 위 1번 하나뿐), WASM/root 재빌드, lint 0 오류(기존 경고 20개), Bun 6,597개 통과/실패 0/함수·라인 100%, 전체 hook 807초 통과.

새로 생기는 오류: 없음(위 1번으로 하나 줄었습니다). 남는 한계와 새 런타임 코드: 없음($ 전달 prop 필터는 main에서 이미 승인된 코드입니다).

[github-actions]

Changepacks

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

Patch

• Rewriting styled-components, Emotion and vanilla-extract imports keeps type-only imports type-only: import { type DefaultTheme, ThemeProvider } now leaves import type { DefaultTheme } on the package instead of a value import that made it a runtime dependency, and an import type declaration is left as written. spin.getName() on a keyframes() binding becomes the generated keyframes name instead of a call on a string that threw at runtime
• The styled-components and Emotion compat ThemeProvider now gives its theme through React context: useTheme, withTheme and the new ThemeConsumer return the real theme object (an object merged over the outer theme, or what a theme function makes of it) instead of an empty Proxy of var() references, withTheme forwards refs, lets a caller's theme win and sets a displayName. Styles keep reading the CSS variables the provider declares. styled-components v6.4 createTheme is available from the compat entry, and ThemeConsumer and createTheme imports are redirected there instead of staying a runtime dependency on styled-components
• 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
• Respect source-order property replacement across conditional spreads in styled rule objects, and document that styled callbacks cannot return runtime class names. No new build errors; existing located Cannot compose errors remain unchanged.
• Preserve unitless legacy vendor numbers, classify vendor time values as milliseconds and emit the Opera vendor prefix correctly; reject nested responsive arrays and known dead unprefixed CSS property names with source-located build errors, while preserving supported experimental CSS, unknown properties and documented shorthands.
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• Typography documents the emitted default breakpoints, and source-backed integration tests keep the public breakpoint lists and range bounds synchronized with the production defaults. No runtime changes or new build errors.
• Emotion'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/css is aliased by default: css and keyframes compile like Devup UI's own (numbers in px, as Emotion reads them), injectGlobal declares global CSS. cx takes class names, as in Emotion: strings and runtime values are classes kept as written (falsy values are skipped), an object is a { name: condition } class map, arrays nest, and inline css() calls and css() classes compose with the rules css(a, b) uses. merge(className) splits what the build can read (string tokens, template literal parts) and composes the css() classes in it, keeping a runtime string it cannot split as it is. Namespace members, constant-string bracket access, const destructuring and const alias chains compile through these same named APIs with scope-aware binding resolution; numeric values retain Emotion units after constant inlining and build-time evaluation. The Emotion import disappears when no runtime-only member is used. Ambient declarations type the styling imports (cx(...args: ClassNamesArg[]), merge(className: string)). New located build errors: cx() cannot use a spread, a getter, a setter or a method in a class map, or a template literal call; merge() takes exactly one class string, not a spread or a template literal call; the root module has no default export, namespace member keys must be constant strings naming supported exports, and styling functions cannot be passed, mutated or re-exported. Optional styling reads/calls, namespace rest destructuring, styling defaults or nested patterns, non-const aliases, exported styling bindings and reads whose initialization order cannot be established are build errors instead of runtime dependencies. Styling loaded through require, import-equals or dynamic import must use static ES module imports; an unawaited dynamic namespace that the build cannot follow is also a located error. Its runtime-only APIs (cache, flush, hydrate, sheet, getRegisteredStyles) stay on @emotion/css, including their nested/default destructuring, optional reads and recognized runtime-loader access
• 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
• Emotion's CacheProvider is available from the compat entry as a no-op that renders its children, and import { CacheProvider } from '@emotion/react' is redirected there instead of keeping @emotion/react as a runtime dependency; the cache it configures holds styles Emotion inserts at runtime, which Devup UI writes at build time
• In rule objects written against Emotion, styled-components or vanilla-extract, a property whose value is an array of literals (background: ['red', 'linear-gradient(...)']) declares each value in order as a browser fallback, as those libraries do, instead of being read as Devup UI breakpoints; numbers get px as the library gives them. Arrays holding runtime values stay as written
• 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.
• The extractor guide shows reproducible native-element output, generated CSS-variable bindings, and actual atomic CSS rather than obsolete class names. Documentation only: no new build errors.
• A styled component another module defines now composes at build time exactly as one the file defines itself: styled(ImportedBase)(...), styled(ImportedBase).attrs(...), ImportedBase.withComponent(...) and the Emotion css prop on ImportedBase render the base's tag with the base's styles under their own (the later declaration wins per property, selector, breakpoint and layer), merge attrs in order and filter props by what the styles read and shouldForwardProp. The build reads the other module through the same module resolution imported constants use (relative paths, tsconfig paths, package exports, include libraries) and reports it as a dependency, so a change to it rebuilds the importing file. A definition the build cannot read exactly (a base only the runtime gives, an attrs or style expression reading a binding of the defining module, a module with a build error, an unresolvable module, an import cycle) stays a runtime component that wraps, as before. Every exported styled component now carries a marker class computed from its file and its export name alone, so ${ImportedChild} { ... } in CSS text and [ImportedChild] as a rule key select it from another file; the marker replaces the registry-ordered one, which two files could not compute alike. No new build errors: the css prop on an imported styled component now reports the same override error a local one does when its styles overlap the component's
• Selectors: a nested rule without & in a styled or css template is scoped to the component instead of becoming a global rule (.child {} and > p {} select descendants, :hover {} and ::before {} the component), and a rule nested in a selector list applies under each of its selectors; content keeps the quotes of its strings (content: 'x', content: ""); params go on the pseudo-class that takes them, so _groupNthChild gives :is(...):nth-child(2n) .a also when nested; a bare selectors key is a pseudo-class name, an attribute of the element or a descendant selector ('div p', '> p'), under a parent too, and keeps the case of class names; ::part(), ::slotted(), ::highlight(), ::picker() and the view-transition pseudo-elements get two colons. New build errors: a _name prop or selector key that names nothing (_notASelector, selectors={{ div: ... }}), and a string under a selector that is not CSS text (_hover="external-class")
• 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
• stylex.attrs() gives the dynamic CSS variables it sets as style attribute text ("--a:" + value), as StyleX does for spreading onto non-React targets, instead of a style object; stylex.props() keeps the object React takes. The attrs() return type declares style as a string
• Tailwind classes in a className: each class compiles on its own and every class Tailwind does not define (custom, plugin and analytics classes) stays as written, where any recognized class used to rebuild the whole className without them and could rewrite part of another class; a class touching a template interpolation (icon-${name}) is left as written, and template classNames no longer get spaces inserted around interpolations. A class whose variant is not understood stays as written instead of applying unconditionally; variants follow Tailwind v4: stacked variants compose (hover:focus: matches the element itself), hover is guarded by @media (hover: hover), group-/peer- use the group/peer marker classes (and group-hover/name), and data-, aria-, has-, nth-, , **, supports-[…] and [&…]/[@media …] variants compile. Utilities emit all their declarations (size-, rounded-t-, truncate, sr-only, not-sr-only, text-sm with its line height, text-sm/6, leading-), translate/rotate/scale/skew compose through Tailwind's individual properties and registered variables (@Property) with negative values kept negative, and arbitrary values follow Tailwind's grammar: spaces for underscores except in url() and var() names, _ for an underscore, spaces around math operators, type hints, [property:value] and (--variable) shorthands. Words that only share a utility's prefix (select-wrapper, order-summary, cursor-foo) are no longer compiled
• Order standalone nonresponsive hover-capability guards within their selector group so active, focus and disabled styles can override hover. Keep responsive Tailwind hover and Devup selector prop ordering unchanged. No new build errors.
• More of Tailwind CSS v4 compiles: container queries (@sm:, @max-md:, @min-[400px]:, @sm/main:) and @container utilities, mask-* (all but the gradient masks), text-shadow-, inset-shadow-, font-variant-numeric utilities (tabular-nums and the like), 3D transforms (rotate-x/y/z, translate-z, scale-z, translate-3d, scale-3d, transform-3d, backface-, perspective-, perspective-origin-), contain- and outline-hidden (with its forced-colors fallback). The project's Tailwind CSS is read further: functional @Utility with --value() and --modifier(), @apply in @Utility, and theme(--name) in arbitrary values; classes of @plugin entries stay as written. A className now compiles the classes of cn()/twMerge() calls whose arguments are all static (merged as tailwind-merge does, the later class wins), of consts bound to class strings, and of cva() calls (base, variants, compound variants). The Rsbuild plugin reads the Tailwind CSS again and compiles every module again when it changes, and the Bun plugin reads it again. No new build errors
• Tailwind classes in a className follow Tailwind CSS v4: colors are the v4 default palette (oklch) and the colors and shadows of devup.json theme are usable as Tailwind theme values (bg-primary, text-text, shadow-card, as var(--token)); the opacity modifier (bg-red-500/50, /[71.37%], /(--alpha)) mixes with color-mix as v4 does; a trailing or leading ! makes every declaration important; blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and their backdrop-* forms compose through Tailwind's custom properties instead of overwriting filter and backdrop-filter; gradients use bg-linear-, bg-conic- and bg-radial-* with from-, via- and to-* composing through the gradient variables (bg-gradient-to-* is not defined by v4 and stays as written); animate-* brings the @Keyframes it names and transition, duration, delay and ease follow v4; space-* and divide-* apply to the children like v4 (:where(& > :not(:last-child))); @Property rules are emitted only for the custom properties a class uses. Anything the build cannot reproduce exactly (drop-shadow-*) stays as written in the className. No new build errors
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors
• A styled-components or Emotion style function reading the theme by literal keys, such as p => p.theme.space[2] or ({ theme }) => theme.colors['brand'], now reads the CSS variable ThemeProvider declares (var(--space-2)). A theme read the build cannot turn into a CSS variable, such as p => p.theme, p => p.theme.brand() or theme.space[i], is a build error naming the file, line, column and code, where it used to read a theme object that does not exist at runtime and give undefined or throw
• Generate React JSX-runtime calls for styled components in non-JSX source modules while preserving JSX and TSX output. No new build errors.
• While @vanilla-extract/css is aliased, importing @vanilla-extract/recipes or @vanilla-extract/sprinkles is a build error naming the file, line and column: those packages generate CSS Devup UI does not compile, so their rules used to be silently missing from the stylesheet. The error says to write the styles with css(), or to disable the alias and build with the vanilla-extract plugin. Type-only imports are allowed
• Skip source-map generation in the codeExtractWithoutSourceMap WASM export while preserving extracted code, CSS and dependencies. Add real WASM and Next loader regressions for map-enabled and map-disabled extraction. No new build errors.

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

Patch

• Bun plugin works with Bun.build: DevupUI() (from @devup-ui/bun-plugin/register) serves the generated stylesheet to the bundler's CSS loader once every other module is loaded, so the build emits a CSS output with the styles of the whole bundle instead of an empty module; class names are short there and readable under the runtime (debug option). Files importing the packages Devup UI takes the place of (@emotion/react, @emotion/styled, styled-components, @vanilla-extract/css), @stylexjs/stylex, or a subpath or re-export of these or @devup-ui/react, are compiled instead of skipped
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• 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
• More of Tailwind CSS v4 compiles: container queries (@sm:, @max-md:, @min-[400px]:, @sm/main:) and @container utilities, mask-* (all but the gradient masks), text-shadow-, inset-shadow-, font-variant-numeric utilities (tabular-nums and the like), 3D transforms (rotate-x/y/z, translate-z, scale-z, translate-3d, scale-3d, transform-3d, backface-, perspective-, perspective-origin-), contain- and outline-hidden (with its forced-colors fallback). The project's Tailwind CSS is read further: functional @Utility with --value() and --modifier(), @apply in @Utility, and theme(--name) in arbitrary values; classes of @plugin entries stay as written. A className now compiles the classes of cn()/twMerge() calls whose arguments are all static (merged as tailwind-merge does, the later class wins), of consts bound to class strings, and of cva() calls (base, variants, compound variants). The Rsbuild plugin reads the Tailwind CSS again and compiles every module again when it changes, and the Bun plugin reads it again. No new build errors
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors

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

Patch

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

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

Patch

• The @devup-ui/react README and the css-utils-literal-only rule docs link their mention of build errors to the new Build Errors reference (https://devup-ui.com/docs/build-errors), which lists the build errors grouped by API; the docs sidebar lists the page after Supported Syntax & Limitations, whose Build errors section links to it. Documentation only: no new build errors
• ESLint rules now check exactly what the build reads. The array, typography, media and styleOrder rules and css-utils-literal-only follow the import aliases the build compiles by default (@emotion/react, @emotion/styled, styled-components, @vanilla-extract/css) and the rules of styled (styled.div({...}), styled("div", {...}), styled(Base)({...}, {...}); not .attrs()), createGlobalStyle({...}) and the styles of Emotion Global, and check and fix a module-level const object that only styles read. Vanilla-extract stylesheets (.css.ts/.css.js) are no longer read as Devup UI. New rule no-runtime-read reports css/keyframes/styled/Box read as a value ("X is read at runtime, where it does not exist"), and css-utils-literal-only reports globals that do not exist where a .css.ts is evaluated (window, document, process, ...). No new build errors.
• style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.

@devup-ui/next-plugin@1.0.90 → 1.0.91 - packages/next-plugin/package.json

Patch

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

@devup-ui/plugin-utils@1.0.17 → 1.0.18 - packages/plugin-utils/package.json

Patch

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

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

Patch

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

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

Patch

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

@devup-ui/rsbuild-plugin@1.0.67 → 1.0.68 - packages/rsbuild-plugin/package.json

Patch

• Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles
• Class names and file numbers no longer depend on the order files are processed in. Every plugin walks the files it can extract (the project's source and the included packages) before the first transform and numbers them in path order (a file collapsed into a bucket is numbered as the bucket, and only files that mention the package, StyleX or an aliased package take numbers) through the new seedFileMap, so identical builds give identical class prefixes, CSS file names and output hashes; in development, files that appear later are numbered after the existing ones. Styles are given class names in a fixed order, not the order of a hash set. The exported class, file and canonical maps are canonical JSON (sorted keys). Stylesheet evaluation (vanilla-extract) refuses Math.random(), Date.now(), new Date() and Date(), which differ between builds, with a build error; fixed dates such as new Date(0) are unchanged. resetBuildState starts a build from its own options: the prefix, atom hoisting, routes, buckets, names, numbers and styles an earlier build in the process left are cleared, and the prefix is set on every setup even when it is absent. Engine snapshots from concurrent transforms are written one after another per file, so an older snapshot is never written last. File lists are ordered by code point rather than the locale
• 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
• More of Tailwind CSS v4 compiles: container queries (@sm:, @max-md:, @min-[400px]:, @sm/main:) and @container utilities, mask-* (all but the gradient masks), text-shadow-, inset-shadow-, font-variant-numeric utilities (tabular-nums and the like), 3D transforms (rotate-x/y/z, translate-z, scale-z, translate-3d, scale-3d, transform-3d, backface-, perspective-, perspective-origin-), contain- and outline-hidden (with its forced-colors fallback). The project's Tailwind CSS is read further: functional @Utility with --value() and --modifier(), @apply in @Utility, and theme(--name) in arbitrary values; classes of @plugin entries stay as written. A className now compiles the classes of cn()/twMerge() calls whose arguments are all static (merged as tailwind-merge does, the later class wins), of consts bound to class strings, and of cva() calls (base, variants, compound variants). The Rsbuild plugin reads the Tailwind CSS again and compiles every module again when it changes, and the Bun plugin reads it again. No new build errors
• Tailwind classes in a className read the Tailwind CSS of the project: the file that imports tailwindcss (the tailwind.css option of devup.json, else a conventional path) gives @theme variables (colors, spacing, shadows, blurs, radii, easings, animations with their @Keyframes, default transitions, breakpoints), @Utility utilities and @custom-variant variants, and the Vite, webpack and Next.js plugins read it again when it or a CSS file it imports changes. Anything that cannot be read exactly, and the classes of namespaces the build does not read, stay as written. More of Tailwind CSS v4 compiles: ring-, inset-ring-, ring-offset-* and drop-shadow-* compose with shadows and filters, borders and outlines draw in --tw-border-style and --tw-outline-style (a border now shows its style), line-clamp, text decoration, border-spacing, logical and scroll spacing, tables, perspective, font-stretch and more; the arguments of clsx(), classnames() and classNames() and [...].join(' ') compile in place. Radii follow v4 (rounded-sm is 0.25rem, rounded-full is calc(infinity * 1px)). No new build errors

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

Patch

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

@devup-ui/webpack-plugin@1.0.71 → 1.0.72 - packages/webpack-plugin/package.json

Patch

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
libs/css/src/lib.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/extractor/styled_capability.rs	100.00% <100.00%> (ø)
libs/extractor/src/extractor/styled_css_slot.rs	100.00% <100.00%> (ø)
libs/extractor/src/extractor/styled_retained.rs	100.00% <100.00%> (ø)
libs/extractor/src/import_alias_visit.rs	100.00% <100.00%> (ø)
libs/extractor/src/imported_constants.rs	100.00% <100.00%> (ø)
... and 19 more

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