fix(extractor): preserve JavaScript semantics across values and element calls by owjs3901 · Pull Request #756 · dev-five-git/devup-ui

owjs3901 · 2026-10-04T15:58:22Z

Refs #695 (FN-08, FN-09, JSX-06, JSX-09, JSX-12, FN-04 및 JavaScript 평가 순서)

요약

2026-10-23 사용자 결정에 따라 기존 JSX-02의 unknown-spread 스타일 override 구현을 제거했습니다. 명시적으로 쓴 스타일은 unknown spread의 순서·키·값과 무관하게 spread가 없는 경우와 동일하게 컴파일합니다.
unknown spread는 렌더링 대상에 그대로 전달되는 일반 props입니다. spread의 color/bg/p 등을 스타일로 읽거나 선택·변환하지 않으며, 해당 키의 존재 검사·CSS 변수·fallback을 만들지 않습니다. 기존 className/style 병합은 유지합니다.
imported enum/정확한 Math 연산/음수 0, lexical const·TDZ, type-only import, shadowed require, createElement lowering, 원래 표현식의 단일 평가와 순서를 보존하는 독립 수정은 남습니다.
옛 #775의 유효한 factory props wrapper attachment만 소스에 반영했습니다. 닫힌 stacked PR을 부모로 합치거나 재개하지 않습니다. 기존 JSX-02 때문에 추가했던 UI 키트 6종과 landing 2곳의 prop 재배치는 제거했습니다.
fix(extractor): resolve compiled names by lexical binding #750 및 fix(components): give each Select trigger its own id #801/fix(vite-plugin): make shared class slots order independent #802/test: restore latest Bun coverage and preserve sparse values #803/#804를 포함한 main을 실제 merge로 통합했습니다. Input readOnly 누락은 main에도 있던 별도 문제이며 #805가 담당하므로 이 PR에서는 수정하지 않습니다.

동작

<Box bg="blue" {...rest}/>와 <Box {...rest} bg="blue"/>는 모두 blue 스타일입니다. rest.bg는 일반 raw prop으로 전달될 뿐 CSS를 바꾸지 않습니다. rest에서 스타일을 읽으려면 color={rest.color || 'black'}처럼 명시적으로 작성합니다.

opaque literal의 일부만 스타일로 추측하지 않습니다. 예를 들어 ...{color:'green',...rest} 전체가 pass-through이며 별도로 쓴 color와 독립적입니다. 반면 빌드가 전체를 아는 정적 spread는 기존 D1 규칙대로 뒤의 property/selector/breakpoint/layer가 이깁니다. 직접 작성한 dynamic value의 기존 CSS-variable 경로도 유지됩니다.

jsx/jsxs/jsxDEV/createElement의 parenthesized/as/satisfies props도 명시적 스타일을 보존합니다. getter·computed key·discarded expression·callee/receiver·children/key의 원래 평가 순서와 횟수를 유지합니다. 이는 일반 JavaScript/React props 전달이며 unknown-spread 스타일 runtime을 추가하는 것이 아닙니다.

새로 생기는 오류

factory의 명시적 스타일 값을 읽을 수 없으면 JSX와 같은 기존 오류를 실제 값의 file:line:col에서 냅니다. 예: /factory.tsx:3:58: <Box> cannot use () => 1 at build time: its styles must be an object literal or a constant object, or be computed from constants (실제 메시지의 코드 부분에는 backtick이 붙습니다). jsx/jsxs/jsxDEV/createElement 및 wrapper 모두 해당합니다. 완전히 shadow된 값의 원래 부작용과 최종 winner는 유지합니다.
runtime styleOrder, compile-only namespace의 runtime escape, 초기화 전 lexical style 읽기, 동기 wrapper로 옮길 수 없는 lazy logical await/yield는 기존 located 오류를 유지합니다.
unknown Devup spread가 selector/typography/css를 덮어쓴다는 이유의 오류는 제거했습니다. native Emotion div의 css+spread 제한과 styled의 별도 known-css-overlap 제한은 이번 정책 확대 대상이 아니므로 유지합니다.
computed-own __proto__를 가진 known factory spread는 own-key 의미와 D1을 보존합니다. 같은 키에 대한 기존 JSX invalid-selector 진단을 범용 성공으로 바꾸었다고 주장하지 않습니다.

남는 한계

unknown raw key 자체는 Devup 스타일 API가 아닙니다. 토큰·반응형 배열을 runtime에 정규화하지 않습니다. inline style은 일반 DOM inline style이고 rest.bg 해석과 다릅니다.
외부 className/runtime class 조합은 CSS cascade를 따릅니다. 빌드가 알 수 없는 실제 스타일 정의는 오류 또는 기존 authored dynamic-value 경로이며 styling helper/parser/runtime은 없습니다.
unknown-spread의 타입 기반 ESLint guard와 attrs 후속 범위는 별도 coordinator 소유입니다. 이 compiler 변경으로 그 작업까지 구현했다고 주장하지 않습니다.
일반 capture arrow/native object copy/className/style/React/ref/attrs/transient plumbing은 실행 가능한 JavaScript로 남습니다. 전체 emitted JavaScript가 0이라는 주장은 하지 않습니다.

검증

최종 상태와 실제 merge 이력

최종 head는 2b1087eb1057cb82fe5873ca953eb19f869ba337, CI는 40061143552입니다. 전체 결론은 FAILURE이며 남은 실패는 wasm-size 하나입니다. publish, benchmark, landing-next-e2e, vinext-rsc-css-e2e, react-18, webpack-extends-theme, release-compat는 모두 실제 SUCCESS입니다. release/deploy-pages만 PR 배포 방지 조건으로 정상 skip됐으며 테스트 job skip으로 대체한 것은 없습니다.

Linux Rust는 **100.00% (17989/17989)**입니다. CI Bun1.4.4 root 6248/0, Vite 867/0이고 두 All files 행 모두 functions/lines 100.00/100.00입니다. bun-plugin race regression10/0 및 publish E2E도 성공했습니다. 로컬 Windows Vite868/0과 Linux867/0을 섞지 않습니다. 이전 40053546840의99.90%(17975/17993) 실패는 아래 후속 커버리지 보완으로 해결됐으며 실패 기록을 green으로 덮어쓰거나 job 재실행으로 숨기지 않았습니다.

첫 실제 merge d9cf3898의 부모는 628f7c78 + 0807cc8a, 두 번째 실제 merge 505e68a6의 부모는 d9cf3898 + d1219765입니다. 일반 성능 커밋 6e457e91의 부모는505e 하나입니다. 이 세 커밋을 최초 정상 fast-forward push1회로 전달한 뒤, 별도로 승인된 커버리지 커밋 2b1087eb(부모6e 하나)을 추가 정상 push1회로 전달했습니다. merge마다 MERGE_HEAD를 유지했고, 모든 hook은 정상 실행했으며 tested/staged/commit tree와 전체 파일 hash를 검증했습니다. 최종 tree는 1674d09bb8f94f5e1dd21fdfb2b662dbf9388438이고2655파일이 일치한 깨끗한 상태입니다.

사용자의 마무리 지시에 따라 추가 코드/크기 축소/최적화/재실행은 시작하지 않았습니다. A: #756 크기 예외, B: 추가 최적화 여부는 아직 결정되지 않았습니다. 현재 CI는 latest Rust stable1.99.1/Bun1.4.4/Node26.12.1을 사용했고 이전 버전으로 고정하지 않았습니다.

로컬 관측 (`6e457e9` 성능 트리)

default Rust stack/stable/jobs2: 일반 workspace 7716/0, fmt, workspace/all-target strict Clippy 및 root lint 통과. 경고20개는 inherited이며 추가하지 않았습니다. LSP는 timeout/기존 설치 거절로 사용 불가, clean이라고 표기하지 않습니다.
private 공식 Bun1.4.4: root 6248/0, Vite 별도 suite 868/0. 두 All files 행 모두 functions/lines 100.00/100.00. 새 WASM/root/components 빌드를 거쳤고, shared Bun 설치는 변경하지 않았습니다.
실제 public WASM 427개 전체 record의 source/code/executable/CSS/순서/결정론을 post-main 최적화 전후 byte-identical로 확인했습니다. Node26.12.0/실제 React19.3.1 17080/0, Chromium 16+24/0, factory82frames와 독립 public proof12종 통과. owner도 SDK를 다시 호출하여 Node/React160건, Chromium4건, factory-arrow/TDZ located 오류2건을 별도로 확인했습니다.
정상 hook은 첫 merge/sharedBun1.4.3 1회, 두 번째 merge/latestBun1.4.4 876.541초 1회, 성능 커밋/latestBun1.4.4 818.675초 1회 모두 성공했습니다. 최종 hook의 Windows Rust coverage는 **97.79% (25415/25990)**이며 Linux100%로 혼동하지 않습니다. 당시 성능 tree는 846836999b27218663cf650449ca876c55df2de4, 테스트한 전체2652파일 hash와 커밋 tree가 일치합니다.
ENOSPC로 실패한 초기 Bun run은 실패 기록으로 남겼습니다. 실제 완료한 WASM/root/components는 검증 후 유지하고, 중단된 Bun 단계부터만 새 이름으로 재실행했습니다. 이후 모든 heavy 단계는 C:25GiB 이상 사전검사, build/test6GiB 및 hook12GiB watchdog, CI unset/default stack을 유지했습니다.

커버리지 후속 검증 (`2b1087e`)

18개 원래 CI 좌표를 안전한 private source archive의 wide-format과 실제 source에 매핑했습니다. 도달 가능한15줄은 Windows LLVM의 positive hit를 확인했고, 선행 flatten/whole-shape 검사 때문에 도달 불가인3줄은 두 개의 최소 동작 동일 구조 정리로 처리했습니다. threshold/exclusion/budget을 바꾸지 않았습니다. 기존 단언/스냅샷은 유지하고 실제 key/value/getter 순서, proto own-key 구별, conditional shorthand pruning, purity/diagnostic 보존 등 23행동 case를 추가했습니다.

최종 일반 Rust 7739/0, default stack fmt/strict workspace Clippy 통과, 새 WASM/root/components/lint/public 검증 후에도 427개 전체 record가 byte-identical이고 Node/React17080/0 및 Chromium16+24/0입니다. 최신 Bun1.4.4 로컬root6248/0+Vite868/0/두 표100.00/100.00, 자체 정상 hook 833.643초 통과했습니다. 이 hook의 Windows Rust는 **97.85% (25428/25988)**이며 실제 Linux100%는 위 최종CI에서 따로 확인했습니다. LSP는 계속 사용 불가이며 clean으로 주장하지 않습니다. 새 오류나 runtime/cache는 없습니다.

아래 landing/추출 수치는 6e457e9 엔진의 실제 관측입니다. 후속은 커버리지와 증명된 도달 불가 구조 정리뿐이며, 추가 성능 pass나 크기 축소는 수행하지 않았습니다. 후속 fresh engine의 전체 public 출력 동등성과 최종 CI benchmark PASS는 확인했지만 수치를 새 측정인 것처럼 재표기하지 않습니다.

실제 현재 출력

아래는 현재 엔진의 unknown spread-after 입력에 대한 실제 public 출력입니다. 원래 명시적 color는 red CSS이고 raw rest.color는 blue로 전달되지만 스타일 선택에 쓰이지 않습니다. className/style forwarding과 일반 once-only native copy가 남아 있으므로 emitted JavaScript 전체가 0이라는 뜻은 아닙니다.

/** @jsxImportSource react */
import "@devup-ui/react/devup-ui.css";
import { jsx, jsxs } from "react/jsx-runtime";
import { jsxDEV } from "react/jsx-dev-runtime";
import { createElement } from "react";
const trace = [];
function App(rest, on = true, key) {
	const value = () => {
		trace.push("value");
		return "5px";
	};
	return ((__devupSpread0) => <div {...__devupSpread0} className={`${__devupSpread0?.className || ""} a`} style={__devupSpread0?.style} />)({
		__proto__: null,
		...rest
	});
}

/*! devup-ui v1.0.83, | Apache License 2.0 | https://devup-ui.com */.a{color:red}

새로 강제되는 factory 오류의 실제 관측:

Error: /factory.tsx:3:58: `<Box>` cannot use `() => 1` at build time: its styles must be an object literal or a constant object, or be computed from constants

main의 jsx/jsxs/jsxDEV에도 이 unreadable explicit value의 silent drop이 있었습니다. main의 createElement는 같은 supported-route 버그가 아니라 frontdoor 미지원 오류였고, #756가 추가한 createElement 범위에서 동일한 value 진단을 보완했습니다. fully-shadowed arrow의 효과와 최종 winner는 유지합니다.

Landing Client JavaScript 크기

각 fixture의 실제 production/Oxc minification pipeline과 기존 prerender 검사를 사용했습니다. main archive/실제 엔진은 d1219765이고, 현재 source는 post-main 작업 트리의 실제 파일 복사입니다. 두 fixture 모두 frozen install과 자체 JS-only package build를 거쳤습니다. matched main 두 cell은 같은 설치 경로/source/lock/package-output hash에서 private 엔진 bytes만 변경했습니다. baseline을 호환시키는 source 수정이나 live workspace pkg swap은 없습니다.

raw는 dist/client의 모든 .js/.mjs/.cjs bytes 합, gzip은 파일별 level9 합입니다. SSR/server/cache/maps는 제외하며 initial-route 전송량이 아닙니다. metadata/path/hash 노이즈를 임의 제거하지 않았습니다. 각 cell1회이고 OS/dependency cache를 cold 통제하지 않았으므로 build 시간 차이를 추출 속도 개선으로 해석하지 않습니다.

구분	Raw bytes	Gzip bytes	파일 수
post-main main source + genuine main	676431	217812	70
같은 main source + 최종 엔진	679398	218948	70
실제 최종 source + 최종 엔진	679407	218942	70

matched main 증가는 **+2967raw (+0.439%), +1136gzip (+0.522%)**입니다. 실제 최종 app/main 비교는 +2976raw (+0.440%), +1130gzip (+0.519%)이며 별개 입력일 수 있어 compiler overhead와 동일시하지 않습니다. 세 production build/prerender 모두 실제 PASS입니다. 현재 양쪽 vinext1.3.0/Vite8.3.4/React19.3.1 및 로컬 제공 Node26.12.0을 사용했습니다.

이전 관측도 보존합니다. 두 번째 main merge 전 matched-main 측정은 676431/217801 → 679398/218934 bytes로 +2967raw/+0.439%였습니다. 옛 scalar source의 matched 엔진 비교는 735962/232357 → 705472/224080 (-30490raw/-4.143%)입니다. 당시 실제 서로 다른 app/main 입력의 +4.296%는 vinext1.2.1/1.3.0·source/lock 차이까지 포함한 값이므로 compiler overhead가 아닙니다. 과거709465는 pre-repair 구현이지 main 기준이 아닙니다.

추출 성능과 남는 비용 (`6e457e9` 측정)

동일8fixture corpus(hash bb67b982...), 각 엔진별 measured9초 이상, warmup500ms 이상, 6개 실행 순서/18개 실제 Node process로 main/post-main-preopt/final을 교차 비교했습니다. reset/config/extract/output read/정확한 동등성 확인/disposal을 포함하며 load·sentinel·warmup은 측정에서 제외했습니다.

엔진	Corpus 중앙값 ms	p95 ms
genuine main	0.1519310	0.1747385
post-main 최적화 전	0.1798760	0.2216490
최종 엔진	0.1744525	0.2028080

최적화 전 대비 약 3.015% 개선, 하지만 main 대비 **1.148235배 (+14.824%)**로 5% 이내 목표는 미달입니다. 6round 중5개는 이전 엔진보다 빨랐고1개는 느렸습니다. 반복 batch는 독립 표본이 아니며 통계적 유의성을 주장하지 않습니다. 첫 merge 전의 +14.740% 역시 역사적 관측이지 성능 parity/최종 승인으로 바꾸지 않습니다.

실제 제거한 작업은 참조가 없는 const initializer clone과 빈 read 집합에서도 먼저 하던 read-only 초기화 정보 수집이며, production diff는 +2/-1줄, 모든 기존 테스트/스냅샷/427public 출력이 그대로입니다. cache나 새 runtime은 없습니다. 이름이 보존된 진단용 build의 inclusive sample은 constant inlining11.857%, lexical collection1.997%, initialization1.461%였지만 최적화된 production과 다른 profiling build이고 그룹이 겹치므로 더하거나 main 대비 잔여 비용으로 쓰지 않습니다.

별도 같은-corpus/6-order의 fixture별 전체 경로 중앙값(μs)은 다음과 같습니다. interleaved corpus와 JIT 조건이 달라 이 값들을 합쳐 위 중앙값을 재구성하면 안 됩니다.

경로	Main	Pre-opt	Final
static JSX	14.5555	15.6295	14.9740
known D1	14.1825	15.8670	14.9345
authored dynamic	14.3825	16.2630	16.0895
conditional	16.2120	18.3770	17.9675
responsive	15.5370	16.7655	15.8940
selector	16.5240	17.7335	17.0655
utility	16.7665	17.4600	16.8720
StyleX	17.4210	19.1400	18.4490

동적 값/조건/StyleX 경로에서 더 큰 차이가 관측되지만 이는 marginal phase 비용이 아닙니다. 남은 약22.52μs/corpus를 인과적으로 분해했거나 불가피함/다른150줄 이내 hotspot 부재를 증명한 것은 아닙니다. 승인된 단일 bounded unit에서 확인한 불필요한 작업만 제거하고 추측성 확장 없이 중단했습니다. Oracle의 source review도 이 제한을 유지한 MEDIUM APPROVE이며 전체 배송/성능 목표 달성 승인은 아닙니다. 별도의 CI benchmark job은 실제 PASS입니다.

WASM Size Gate (최종 CI FAIL, A/B 미결정)

최종 CI는 같은 latest 도구와 lock-matched wasm-bindgen0.2.129로 main/후보를 각 fresh target에서 빌드했습니다. main은d1219765, merge-ref 후보의 tree는 최종 head와 같은1674d09b입니다. 기존1% growth/1024B 올림 한도를 그대로 적용했습니다.

Metric	Main bytes	Candidate bytes	Limit bytes	결과
wasm/raw	6096656	6181807	6158336	FAIL
wasm/gzip	2202045	2227164	2224128	FAIL
glue/raw	43165	43165	44032	PASS
glue/gzip	7327	7327	8192	PASS

WASMraw는 main 대비 +1.397%, 한도보다 23471B 크고 gzip은 +1.141%, 한도보다 3036B 큽니다. glue는 두 항목 모두 동일합니다. #756은 현재 one-time 예외 대상이 아니며 A: 크기 예외 / B: 추가 최적화 결정 대기입니다. 크기 축소/예산 완화/baseline 수정/실패 재실행은 하지 않았고, 전체CI가 green이라고 주장하지 않습니다. 사용자 wrap-up 지시에 따라 이 정확한 상태를 보고하고 중단합니다.

과거 출력 보존

아래 25개 출력 블록은 이전 JSX-02 override 구현 당시의 역사적 관측을 byte-identical로 보존한 것입니다. 현재 기대 동작·현재 UI CSS·현재 오류·최종 승인 증거가 아닙니다. 특히 spread-style 변수/fallback, selector/css spread 오류 및 UI 재배치는 이번 구현에서 제거되었습니다. 과거 head/run 번호나 이전 카운트를 현재 검증으로 재사용하지 않습니다.

과거 출력 1 (현재 동작 아님)

/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */@layer b,t,o1,o2;@layer t{:root{color-scheme:light;--background:light-dark(#F5F5F5,#202020);--base:light-dark(#FFF,#000);--base50:light-dark(#FFFFFF80,#00000080);--black:#000;--black5:#0000000D;--black50:#00000080;--border:light-dark(#E4E4E4,#434343);--borderBold:light-dark(#BCBCBC,#535353);--caption:#787878;--codeBackground:light-dark(#F5F5F5,#2E2E2E);--containerBackground:light-dark(#FFF,#1E1E1E);--containerHover:light-dark(#EEE,#3A3A3A);--containerPush:light-dark(#DADAE1,#606066);--error:light-dark(#D52B2E,#FF5B5E);--familyHover:light-dark(#A0A1A5,#94969E);--familysiteBg:light-dark(#828389,#B0B0B0);--familysiteTxt:#272727;--filterBg:light-dark(#EFEEF2,#4B494F);--footerAward:light-dark(#EAEAED,#3D3D3D);--footerBackground:light-dark(#2F313B,#D8D8D8);--footerBody:light-dark(#FFF,#404040);--footerCaption:light-dark(#CACACA,#7D7D7D);--footerLink:light-dark(#B7B5C0,#5E6063);--footerNavTitle:light-dark(#98989D,#747276);--footerTitle:light-dark(#F2F2F2,#1F1F1F);--gnbBg:light-dark(#FFFC,#000C);--iconBold:light-dark(#8D8C9A,#666577);--info:#2196F3;--inputBg:light-dark(#FFF,#2E2E2E);--inputCaption:light-dark(#9B9BA6,#C3C2C8);--inputDisabledBg:light-dark(#F0F0F3,#414244);--inputDisabledText:light-dark(#D6D7DE,#373737);--inputIcon:light-dark(#C3C2C8,#696A6F);--inputPlaceholder:light-dark(#A9A8AB,#CBCBCB);--kakaoHover:light-dark(#F0C81A,#FFE232);--kakoBg:#FFE232;--link:light-dark(#7C8EE1,#006BFF);--negative10:light-dark(#0000001A,#FFFFFF1A);--negative20:light-dark(#0003,#FFF6);--negativeBase:light-dark(#000,#FFF);--placeHolder:#9D9D9D;--primary:light-dark(#674DC7,#8163E1);--primary20:light-dark(#614FC433,#7D6DD833);--primary50:light-dark(#614FC480,#7D6DD880);--primaryActive:light-dark(#312395,#BEB3ED);--primaryBg:light-dark(#F4F3FA,#F4F3FA0D);--primaryFocus:light-dark(#9385D3,#927CE4);--primaryHover:light-dark(#4D38AE,#A290E7);--secondary:light-dark(#E3E0F2,#272331);--selectBoxBg:light-dark(#00000012,#FFFFFF12);--selectDisabled:light-dark(#C4C5D1,#45464D);--snackBg:#29292CCC;--snackLink:light-dark(#B2B0EF,#7C8EE1);--success:light-dark(#2CA353,#4CAF50);--tableSearch:light-dark(#FFED8A,#B55100);--text:light-dark(#272727,#F6F6F6);--textFixed:#272727;--title:light-dark(#1A1A1A,#FAFAFA);--toggleBg:light-dark(#E4E4E4,#383838);--warning:#FF9800;--white:#FFF;--white10:light-dark(#FFFFFF1A,#0000001A)}:root[data-theme=dark]{color-scheme:dark}.typo-body{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:-.01em}.typo-buttonM{font-family:Pretendard;font-size:16px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:0}.typo-buttonS{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:0}.typo-buttonxs{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.02em}.typo-footerL{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:500;line-height:1.3;letter-spacing:-.02em}.typo-footerList{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:500;line-height:1.2;letter-spacing:-.02em}.typo-footerM{font-family:Pretendard;font-size:13px;font-style:normal;font-weight:300;line-height:18px;letter-spacing:-.01em}.typo-footerMsemibold{font-family:Pretendard;font-size:13px;font-style:normal;font-weight:600;line-height:18px;letter-spacing:-.01em}.typo-footerNav{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:500;line-height:1.3;letter-spacing:-.02em}.typo-footerS{font-family:Pretendard;font-size:12px;font-style:normal;font-weight:300;line-height:1.2;letter-spacing:-.02em}.typo-footerSsemibold{font-family:Pretendard;font-size:12px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.02em}.typo-footerXSsemibold{font-family:Pretendard;font-size:10px;font-style:normal;font-weight:600;line-height:18px;letter-spacing:-.02em}.typo-footerxl{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:700;line-height:1.3;letter-spacing:-.02em}.typo-footerxs{font-family:Pretendard;font-size:10px;font-style:normal;font-weight:300;line-height:1.2;letter-spacing:-.02em}.typo-inlineLabelL{font-family:Pretendard;font-size:16px;font-style:normal;font-weight:500;line-height:1.3;letter-spacing:-.03em}.typo-inlineLabelS{font-family:Pretendard;font-size:12px;font-style:normal;font-weight:500;line-height:1.3;letter-spacing:-.03em}.typo-inputBold{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.02em}.typo-inputPhBold{font-family:Pretendard;font-size:13px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.02em}.typo-inputPlaceholder{font-family:Pretendard;font-size:13px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:-.02em}.typo-inputText{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:-.02em}.typo-langButton{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.02em}.typo-langMenu{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:500;line-height:1.2;letter-spacing:-.02em}.typo-pagination{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.02em}.typo-paginationSelected{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:900;line-height:1.2;letter-spacing:-.02em}.typo-resetButton{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.02em}.typo-subMenu{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:-.01em}.typo-tableText{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:-.01em}.typo-tableTextBold{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:-.01em}.typo-tableTitle{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.01em}.typo-uploadButton{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:-.01em}@media(min-width:1280px){.typo-body{font-family:Pretendard;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:-.01em}.typo-buttonM{font-family:Pretendard;font-size:18px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.01em}.typo-buttonS{font-family:Pretendard;font-size:16px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.01em}.typo-buttonxs{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.03em}.typo-inlineLabelL{font-family:Pretendard;font-size:18px;font-style:normal;font-weight:500;line-height:1.3;letter-spacing:-.03em}.typo-inputBold{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.02em}.typo-inputPhBold{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.02em}.typo-inputPlaceholder{font-family:Pretendard;font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:-.02em}.typo-inputText{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:-.03em}.typo-langButton{font-family:Pretendard;font-size:16px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.02em}.typo-resetButton{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:-.02em}.typo-subMenu{font-family:Pretendard;font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:-.01em}.typo-tableText{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:-.01em}.typo-tableTextBold{font-family:Pretendard;font-size:15px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.01em}.typo-tableTitle{font-family:Pretendard;font-size:16px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:-.01em}}}

과거 출력 2 (현재 동작 아님)

@layer b{.an{align-items:center}.al{display:flex}.f4{flex-direction:column}.am{justify-content:center}}@keyframes g3{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}@layer o1{.dh{accent-color:var(--primary,light-dark(#6159D4,#6670F9))}.ek{align-items:center}.di{appearance:none}.ex{background:light-dark(#FFF,#2E2E2E)}.l{background:var(--background,light-dark(#FFF,#2E2E2E))}.e_{background:var(--bg,light-dark(#FFF,#2E2E2E))}.g1{background:var(--border,light-dark(#E4E4E4,#434343))}.b0{background:var(--inputBackground,#FFF)}.dj{background:var(--inputBg,light-dark(#FFF,#2E2E2E))}.el{background:var(--negative20,light-dark(#0003,#FFF6))}.b1{background:var(--primary,#8163E1)}.ey{border:1px solid}.b2{border:1px solid var(--border,#E4E4E4)}.dk{border:1px solid var(--border,light-dark(#E0E0E0,#333))}.f5{border:1px solid var(--border,light-dark(#E4E4E4,#434343))}.b3{border:none}.ez{border-color:var(--border)}.m{border-color:var(--border,light-dark(#E4E4E4,#434343))}.eg{border-color:var(--error,light-dark(#D52B2E,#FF5B5E))}.fb{border-radius:0 8px 8px 0}.e0{border-radius:100%}.b4{border-radius:10px}.dl{border-radius:2px}.em{border-radius:50%}.gp{border-radius:6px}.n{border-radius:8px}.fa{border-radius:8px 0 0 8px}.o{border-style:solid}.p{border-width:1px}.f6{bottom:-4px}.aa{bottom:-8px}.f7{box-shadow:0 2px 2px 0 var(--base10,light-dark(#0000001A,#FFFFFF1A))}.b5{box-sizing:border-box}.b8{color:#FFF}.ep{color:var(--base,light-dark(#FFF,#000))}.b7{color:var(--error,#D52B2E)}.ab{color:var(--error,light-dark(#D52B2E,#FF5B5E))}.d5{color:var(--iconBold,light-dark(#8D8C9A,#666577))}.d4{color:var(--inputDisabledText,light-dark(#D6D7DE,#373737))}.gr{color:var(--primary,light-dark(#674DC7,#8163E1))}.gq{color:var(--selectDisabled,light-dark(#C4C5D1,#45464D))}.b6{color:var(--text,#272727)}.fc{color:var(--text,light-dark(#000,#FFF))}.q{color:var(--text,light-dark(#272727,#F6F6F6))}.gs{color:var(--title,light-dark(#1A1A1A,#FAFAFA))}.gt{cursor:default}.dm{cursor:not-allowed}.b9{cursor:pointer}.dn{display:block}.eq{display:flex}.fq{display:inline-block}.eu{display:none}.ac{font-size:12px}.b_{font-size:14px}.cb{font-size:15px}.r{font-size:16px}.gu{font-weight:400}.cd{font-weight:700}.gw{gap:0}.gv{gap:10px}.f8{gap:6px}.do{height:100%}.e1{height:18px}.g2{height:1px}.en{height:20px}.d2{height:24px}.gx{height:40px}.fr{height:fit-content}.er{justify-content:center}.a-d{left:0}.d6{left:12px}.ce{letter-spacing:-.02em}.cg{letter-spacing:0}.t{line-height:1.5}.dp{margin:0}.u{min-height:80px}.f9{min-width:232px}.ev{opacity:0}.dq{opacity:1}.ci{outline-offset:2px}.f_{padding:10px}.v{padding:12px}.es{padding:2px}.cx{padding-bottom:10px}.cw{padding-bottom:12px}.cy{padding-bottom:8px}.gz{padding-left:10px}.cs{padding-left:12px}.cr{padding-left:16px}.cq{padding-left:20px}.cv{padding-left:24px}.cu{padding-left:28px}.ct{padding-left:32px}.eh{padding-left:36px}.gy{padding-right:10px}.cm{padding-right:12px}.cl{padding-right:16px}.ck{padding-right:20px}.cp{padding-right:24px}.co{padding-right:28px}.cn{padding-right:32px}.ei{padding-right:36px}.c0{padding-top:10px}.cz{padding-top:12px}.c1{padding-top:8px}.dr{pointer-events:none}.ae{position:absolute}.ga{position:fixed}.cj{position:relative}.et{right:12px}.ds{top:0}.d7{top:50%}.d8{transform:translateY(-50%)}.af{transform:translateY(100%)}.c2{transition:.25s}.ej{transition:all .1s ease-in-out}.g0{transition:background-color .1s ease-in-out}.fl{transition:background-color .25s,border-color .25s}.z{transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.gb{user-select:none}._{width:100%}.e9{width:18px}.eo{width:20px}.d3{width:24px}.fm{width:fit-content}.dt{z-index:0}.gc{z-index:1}@media(min-width:1280px){.s{font-size:14px}.ca{font-size:15px}.cc{font-size:16px}.ch{letter-spacing:-.01em}.cf{letter-spacing:-.03em}}.bj:hover{background:color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)}.bi:hover{background:color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)}.df:hover{background:light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))}.go:hover{background:var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))}.dg:hover{border:1px solid var(--primary,light-dark(#6159D4,#6670F9))}.ee:hover{border:1px solid var(--primary,light-dark(#674DC7,#8163E1))}.bh:hover{border-color:var(--error,#D52B2E)}.bg:hover{border-color:var(--primary,#8163E1)}.j:hover{border-color:var(--primary,light-dark(#674DC7,#8163E1))}:root[data-theme=dark] .bt:hover{background:color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)}:root[data-theme=dark] .bu:hover{background:color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)}:root[data-theme=dark] .bs:hover{border-color:var(--error,#FF5B5E)}:root[data-theme=dark] .br:hover{border-color:var(--primary,#8163E1)}:root[data-theme=dark] .bv:hover{outline-color:var(--primary,#674DC7)}.bd:focus-visible{outline:2px solid}.bf:focus-visible{outline-color:var(--error,#FF5B5E)}.be:focus-visible{outline-color:var(--primaryFocus,#9385D3)}:root[data-theme=dark] .bx:focus-visible{outline-color:var(--error,#D52B2E)}:root[data-theme=dark] .bw:focus-visible{outline-color:var(--primaryFocus,#927CE4)}.ec:focus{background:var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))}.ed:focus{border:1px solid var(--primary,light-dark(#674DC7,#8163E1))}.g:focus{border-color:var(--primary,light-dark(#674DC7,#8163E1))}.h:focus{box-shadow:0 0 0 3px var(--focusRing,light-dark(#674DC726,#8163E140))}.ew:focus{outline:1px sold var(--border,var(--primary))}.i:focus{outline:none}.a_:active{background:color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)}.a5:active{background:color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)}.c_:active{background:light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))}.a6:active{background:var(--error,#D52B2E)}.a8:active{border:1px solid var(--error,#D52B2E)}.a7:active{border:1px solid var(--primary,#8163E1)}.a9:active{color:var(--text,#272727)}:root[data-theme=dark] .bn:active{background:color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)}:root[data-theme=dark] .bl:active{background:var(--error,#FF5B5E)}:root[data-theme=dark] .bk:active{background:var(--primary,#8163E1)}:root[data-theme=dark] .bm:active{color:var(--text,#F6F6F6)}.de:disabled{background:light-dark(#F0F0F3,#47474A)}.b:disabled{background:var(--disabledBg,light-dark(#F0F0F3,#414244))}.d_:disabled{background:var(--inputDisabledBg,light-dark(#F0F0F3,#414244))}.bb:disabled{background-color:#F0F0F3}.ea:disabled{border:1px solid var(--border,light-dark(#E4E4E4,#434343))}.bc:disabled{border-color:var(--border,#E4E4E4)}.c:disabled{border-color:var(--border,light-dark(#E4E4E4,#434343))}.ba:disabled{color:#D6D7DE}.d:disabled{color:var(--disabledText,light-dark(#D6D7DE,#373737))}.eb:disabled{color:var(--inputDisabledText,light-dark(#D6D7DE,#373737))}.e:disabled{cursor:not-allowed}.f:disabled{opacity:.5}:root[data-theme=dark] .bp:disabled{background-color:#47474A}:root[data-theme=dark] .bq:disabled{border-color:transparent}:root[data-theme=dark] .bo:disabled{color:#373737}.fs{box-sizing:border-box}.ft *{box-sizing:border-box}.ef::placeholder{color:var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))}.k::placeholder{color:var(--placeholder,light-dark(#A9A8AB,#CBCBCB))}.da:checked{background:var(--primary,light-dark(#6159D4,#6670F9))}.db:checked{border:none}.dd:checked:disabled{background:light-dark(#F0F0F3,#47474A)}.dc:checked:hover{background:light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))}.e2:checked:not(:disabled){background:var(--checkedBg,var(--primary,light-dark(#FFF,#2E2E2E)))}.e3:checked:not(:disabled){border:3px solid}.e4:checked:not(:disabled){border-color:var(--checkedBg,light-dark(#FFF,#2E2E2E))}.e5:checked:not(:disabled){box-shadow:0 0 0 1px var(--checkedBorder,var(--primary))}.a:disabled::placeholder{color:var(--disabledText,light-dark(#D6D7DE,#373737))}.d9:disabled::placeholder{color:var(--inputDisabledText,light-dark(#D6D7DE,#373737))}.e7:hover:not(:disabled,:checked){background:var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))}.e6:hover:not(:disabled,:checked){border:1px solid var(--hoverBorder,var(--primary))}.fh:hover:not([aria-disabled=true]){background:var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))}.fi:hover:not([aria-disabled=true]){border-color:var(--hoverBorder,var(--primary))}.e8:is(:disabled,[aria-disabled=true]){background-color:var(--disabledBg,light-dark(#F0F0F3,#47474A))}.fn[aria-disabled=true]{color:var(--disabledColor,light-dark(#D6D7DE,#373737))}.w[aria-invalid="true"]{border-color:var(--error,light-dark(#D52B2E,#FF5B5E))}.x[aria-invalid="true"]:focus{border-color:var(--error,light-dark(#D52B2E,#FF5B5E))}.y[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--focusRing,light-dark(#D52B2E33,#FF5B5E66))}:root[data-theme=dark] .by{background:var(--inputBackground,#2E2E2E)}:root[data-theme=dark] .bz{background:var(--primary,#8163E1)}[data-radio-input]:checked + .fe:not([aria-disabled=true]){background:var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))}[data-radio-input]:checked + .ff:not([aria-disabled=true]){border-color:var(--checkedBorder,var(--primary))}[data-radio-input]:checked + .fg:not([aria-disabled=true]){color:var(--checkedColor,var(--primary))}[data-radio-input]:checked + .fd:not([aria-disabled=true]){font-weight:600}[data-radio-input]:disabled + .fj{background:var(--disabledBg,light-dark(#F0F0F3,#47474A))}[data-radio-input]:disabled + .fk{color:var(--disabledColor,light-dark(#D6D7DE,#373737))}}@layer o2{.fu{border-radius:8px}}.c4{align-items:center}.g4{animation-duration:1s}.g5{animation-iteration-count:infinite}.g6{animation-name:g3}.g7{animation-timing-function:linear}.gi{background:var(--border,light-dark(#E4E4E4,#434343))}.gh{background:var(--inputDisabledBackground,light-dark(#F0F0F3,#414244))}.fw{background:var(--primary,light-dark(#674DC7,#8163E1))}.gj{border-radius:4px}.fx{border-radius:8px}.f2{color:#FFF}.gn{color:inherit}.dx{color:light-dark(#D6D7DE,#6F6E6E)}.gd{color:var(--inputDisabledText,light-dark(#E5E5E5,#373737))}.dy{color:var(--text,light-dark(#2F2F2F,#EDEDED))}.c8{cursor:not-allowed}.c9{cursor:pointer}.c3{display:flex}.ag{display:inline-block}.fo{display:inline-flex}.dz{font-size:14px}.d1{gap:8px}.c7{height:16px}.gk{height:18px}.ao{height:24px}.c5{justify-content:center}.f3{justify-content:end}.aq{left:4px}.gf{left:50%}.ay{line-height:1.2}.a3{margin-left:auto}.a2{margin-right:auto}.a1{max-width:100%}.az{min-height:1.2em}.du{opacity:1}.av{overflow:hidden}.f0{padding-bottom:10px}.fz{padding-left:30px}.fy{padding-right:30px}.f1{padding-top:10px}.dv{pointer-events:none}.ar{position:absolute}.ah{position:relative}.fv{text-align:end}.aw{text-overflow:ellipsis}.at{top:50%}.ge{top:55%}.au{transform:translate(-100%,-50%)}.gg{transform:translate(-50%,-50%)}.a0{transform:translateX(8px)}.gm{transition:background-color .1s ease-in-out}.d0{user-select:none}.ax{white-space:nowrap}.ak{width:100%}.c6{width:16px}.gl{width:18px}.ap{width:24px}.a4{width:fit-content}.dw{z-index:1}.ai{box-sizing:border-box}.aj *{box-sizing:border-box}.as>svg{color:inherit}.fp[aria-disabled=true]{cursor:default}

과거 출력 3 (현재 동작 아님)

@layer b{.az{align-items:center}.ax{display:flex}.h1{flex-direction:column}.ay{justify-content:center}}@keyframes iu{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}@layer o1{.d3{accent-color:var(--d2,var(--primary,light-dark(#6159D4,#6670F9)))}.fu{align-items:var(--ft,center)}.d4{appearance:var(--d1,none)}.gm{background:var(--bg,light-dark(#FFF,#2E2E2E))}.cm{background:var(--inputBackground,#FFF)}.f9{background:var(--l,light-dark(#FFF,#2E2E2E))}.m{background:var(--l,var(--background,light-dark(#FFF,#2E2E2E)))}.is{background:var(--l,var(--border,light-dark(#E4E4E4,#434343)))}.d5{background:var(--l,var(--inputBg,light-dark(#FFF,#2E2E2E)))}.fv{background:var(--l,var(--negative20,light-dark(#0003,#FFF6)))}.cn{background:var(--primary,#8163E1)}.gn{border:1px solid}.co{border:1px solid var(--border,#E4E4E4)}.cp{border:none}.d6{border:var(--d0,1px solid var(--border,light-dark(#E0E0E0,#333)))}.hq{border:var(--d0,1px solid var(--border,light-dark(#E4E4E4,#434343)))}.f_{border:var(--d0,1px solid)}.fw{border:var(--d0,none)}.go{border-color:var(--border)}.ga{border-color:var(--k,var(--border))}.n{border-color:var(--k,var(--border,light-dark(#E4E4E4,#434343)))}.e9{border-color:var(--k,var(--error,light-dark(#D52B2E,#FF5B5E)))}.gq{border-radius:0 8px 8px 0}.cq{border-radius:10px}.cr{border-radius:8px}.gp{border-radius:8px 0 0 8px}.gb{border-radius:var(--j,100%)}.d7{border-radius:var(--j,2px)}.fx{border-radius:var(--j,50%)}.ie{border-radius:var(--j,6px)}.o{border-radius:var(--j,8px)}.p{border-style:var(--i,solid)}.q{border-width:var(--h,1px)}.am{bottom:-8px}.hr{bottom:var(--hp,-4px)}.hs{box-shadow:var(--ho,0 2px 2px 0 var(--base10,light-dark(#0000001A,#FFFFFF1A)))}.bl{box-sizing:var(--bk,border-box)}.cu{color:#FFF}.ct{color:var(--error,#D52B2E)}.an{color:var(--error,light-dark(#D52B2E,#FF5B5E))}.f0{color:var(--g,var(--base,light-dark(#FFF,#000)))}.ig{color:var(--g,var(--primary,light-dark(#674DC7,#8163E1)))}.if{color:var(--g,var(--selectDisabled,light-dark(#C4C5D1,#45464D)))}.r{color:var(--g,var(--text,light-dark(#272727,#F6F6F6)))}.ih{color:var(--g,var(--title,light-dark(#1A1A1A,#FAFAFA)))}.e1{color:var(--iconBold,light-dark(#8D8C9A,#666577))}.e0{color:var(--inputDisabledText,light-dark(#D6D7DE,#373737))}.cs{color:var(--text,#272727)}.gr{color:var(--text,light-dark(#000,#FFF))}.gs{cursor:pointer}.ii{cursor:var(--bj,default)}.d8{cursor:var(--bj,not-allowed)}.bm{cursor:var(--bj,pointer)}.gt{display:flex}.d9{display:var(--dz,block)}.f1{display:var(--dz,flex)}.g8{display:var(--dz,inline-block)}.f7{display:var(--dz,none)}.ao{font-size:12px}.cv{font-size:14px}.cx{font-size:15px}.s{font-size:var(--f,16px)}.ij{font-weight:var(--bi,400)}.bn{font-weight:var(--bi,700)}.iq{gap:0}.ip{gap:10px}.ir{gap:6px}.hv{gap:var(--hn,6px)}.ey{height:24px}.d_{height:var(--dy,100%)}.gc{height:var(--dy,18px)}.fy{height:var(--fs,20px)}.ht{height:var(--fs,fit-content)}.it{height:var(--g7,1px)}.ik{height:var(--g7,40px)}.g9{height:var(--g7,fit-content)}.f2{justify-content:var(--fq,center)}.ap{left:0}.e2{left:12px}.ea{left:var(--dx,0)}.cz{letter-spacing:-.02em}.c1{letter-spacing:0}.u{line-height:var(--e,1.5)}.eb{margin:var(--dw,0)}.v{min-height:var(--d,80px)}.hw{min-width:var(--hm,232px)}.f8{opacity:var(--dv,0)}.ec{opacity:var(--dv,1)}.bo{outline-offset:var(--bh,2px)}.hx{padding:var(--c,10px)}.w{padding:var(--c,12px)}.f3{padding:var(--c,2px)}.df{padding-bottom:10px}.de{padding-bottom:12px}.dg{padding-bottom:8px}.fd{padding-bottom:var(--e6,12px)}.da{padding-left:12px}.c_{padding-left:16px}.c9{padding-left:20px}.dd{padding-left:24px}.dc{padding-left:28px}.db{padding-left:32px}.fa{padding-left:var(--e8,12px)}.e_{padding-left:var(--e8,36px)}.im{padding-left:var(--ic,10px)}.c5{padding-right:12px}.c4{padding-right:16px}.c3{padding-right:20px}.c8{padding-right:24px}.c7{padding-right:28px}.c6{padding-right:32px}.fc{padding-right:var(--e7,12px)}.fb{padding-right:var(--e7,36px)}.il{padding-right:var(--id,10px)}.di{padding-top:10px}.dh{padding-top:12px}.dj{padding-top:8px}.fe{padding-top:var(--e5,12px)}.ed{pointer-events:var(--du,none)}.aq{position:absolute}.ee{position:var(--bg,absolute)}.hy{position:var(--bg,fixed)}.bp{position:var(--bg,relative)}.f4{right:var(--fp,12px)}.e3{top:50%}.ef{top:var(--dt,0)}.f5{top:var(--dt,50%)}.e4{transform:translateY(-50%)}.ar{transform:translateY(100%)}.f6{transform:var(--fo,translateY(-50%))}.g2{transition:background-color .25s,border-color .25s}.bq{transition:var(--b,.25s)}.ff{transition:var(--b,all .1s ease-in-out)}.in{transition:var(--b,background-color .1s ease-in-out)}.x{transition:var(--b,border-color .15s ease-in-out,box-shadow .15s ease-in-out)}.hz{user-select:var(--hl,none)}.ez{width:24px}.g3{width:fit-content}.y{width:var(--a,100%)}.eg{width:var(--ds,100%)}.gd{width:var(--ds,18px)}.fz{width:var(--fr,20px)}.hu{width:var(--fr,fit-content)}.eh{z-index:var(--dr,0)}.h0{z-index:var(--dr,1)}@media(min-width:1280px){.cw{font-size:15px}.cy{font-size:16px}.t{font-size:var(--f,14px)}.c2{letter-spacing:-.01em}.c0{letter-spacing:-.03em}}.b6:hover{background:color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)}.b5:hover{background:color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)}.eo:hover{background:light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))}.io:hover{background:var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))}.ep:hover{border:1px solid var(--primary,light-dark(#6159D4,#6670F9))}.fm:hover{border:1px solid var(--primary,light-dark(#674DC7,#8163E1))}.b4:hover{border-color:var(--error,#D52B2E)}.b3:hover{border-color:var(--primary,#8163E1)}.ah:hover{border-color:var(--primary,light-dark(#674DC7,#8163E1))}:root[data-theme=dark] .cf:hover{background:color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)}:root[data-theme=dark] .cg:hover{background:color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)}:root[data-theme=dark] .ce:hover{border-color:var(--error,#FF5B5E)}:root[data-theme=dark] .cd:hover{border-color:var(--primary,#8163E1)}:root[data-theme=dark] .ch:hover{outline-color:var(--primary,#674DC7)}.b0:focus-visible{outline:2px solid}.b2:focus-visible{outline-color:var(--error,#FF5B5E)}.b1:focus-visible{outline-color:var(--primaryFocus,#9385D3)}:root[data-theme=dark] .cj:focus-visible{outline-color:var(--error,#D52B2E)}:root[data-theme=dark] .ci:focus-visible{outline-color:var(--primaryFocus,#927CE4)}.fk:focus{background:var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))}.fl:focus{border:1px solid var(--primary,light-dark(#674DC7,#8163E1))}.ae:focus{border-color:var(--primary,light-dark(#674DC7,#8163E1))}.af:focus{box-shadow:0 0 0 3px var(--focusRing,light-dark(#674DC726,#8163E140))}.ge:focus{outline:1px sold var(--border,var(--primary))}.ag:focus{outline:none}.bw:active{background:color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)}.br:active{background:color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)}.ei:active{background:light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))}.bs:active{background:var(--error,#D52B2E)}.bu:active{border:1px solid var(--error,#D52B2E)}.bt:active{border:1px solid var(--primary,#8163E1)}.bv:active{color:var(--text,#272727)}:root[data-theme=dark] .b_:active{background:color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)}:root[data-theme=dark] .b8:active{background:var(--error,#FF5B5E)}:root[data-theme=dark] .b7:active{background:var(--primary,#8163E1)}:root[data-theme=dark] .b9:active{color:var(--text,#F6F6F6)}.en:disabled{background:light-dark(#F0F0F3,#47474A)}._:disabled{background:var(--disabledBg,light-dark(#F0F0F3,#414244))}.fh:disabled{background:var(--inputDisabledBg,light-dark(#F0F0F3,#414244))}.by:disabled{background-color:#F0F0F3}.fi:disabled{border:1px solid var(--border,light-dark(#E4E4E4,#434343))}.bz:disabled{border-color:var(--border,#E4E4E4)}.aa:disabled{border-color:var(--border,light-dark(#E4E4E4,#434343))}.bx:disabled{color:#D6D7DE}.ab:disabled{color:var(--disabledText,light-dark(#D6D7DE,#373737))}.fj:disabled{color:var(--inputDisabledText,light-dark(#D6D7DE,#373737))}.ac:disabled{cursor:not-allowed}.a-d:disabled{opacity:.5}:root[data-theme=dark] .cb:disabled{background-color:#47474A}:root[data-theme=dark] .cc:disabled{border-color:transparent}:root[data-theme=dark] .ca:disabled{color:#373737}.g_{box-sizing:border-box}.ha *{box-sizing:border-box}.fn::placeholder{color:var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))}.ai::placeholder{color:var(--placeholder,light-dark(#A9A8AB,#CBCBCB))}.ej:checked{background:var(--primary,light-dark(#6159D4,#6670F9))}.ek:checked{border:none}.em:checked:disabled{background:light-dark(#F0F0F3,#47474A)}.el:checked:hover{background:light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))}.gf:checked:not(:disabled){background:var(--checkedBg,var(--primary,light-dark(#FFF,#2E2E2E)))}.gg:checked:not(:disabled){border:3px solid}.gh:checked:not(:disabled){border-color:var(--checkedBg,light-dark(#FFF,#2E2E2E))}.gi:checked:not(:disabled){box-shadow:0 0 0 1px var(--checkedBorder,var(--primary))}.z:disabled::placeholder{color:var(--disabledText,light-dark(#D6D7DE,#373737))}.fg:disabled::placeholder{color:var(--inputDisabledText,light-dark(#D6D7DE,#373737))}.gk:hover:not(:disabled,:checked){background:var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))}.gj:hover:not(:disabled,:checked){border:1px solid var(--hoverBorder,var(--primary))}.gy:hover:not([aria-disabled=true]){background:var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))}.gz:hover:not([aria-disabled=true]){border-color:var(--hoverBorder,var(--primary))}.gl:is(:disabled,[aria-disabled=true]){background-color:var(--disabledBg,light-dark(#F0F0F3,#47474A))}.g4[aria-disabled=true]{color:var(--disabledColor,light-dark(#D6D7DE,#373737))}.aj[aria-invalid="true"]{border-color:var(--error,light-dark(#D52B2E,#FF5B5E))}.ak[aria-invalid="true"]:focus{border-color:var(--error,light-dark(#D52B2E,#FF5B5E))}.al[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--focusRing,light-dark(#D52B2E33,#FF5B5E66))}:root[data-theme=dark] .ck{background:var(--inputBackground,#2E2E2E)}:root[data-theme=dark] .cl{background:var(--primary,#8163E1)}[data-radio-input]:checked + .gv:not([aria-disabled=true]){background:var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))}[data-radio-input]:checked + .gw:not([aria-disabled=true]){border-color:var(--checkedBorder,var(--primary))}[data-radio-input]:checked + .gx:not([aria-disabled=true]){color:var(--checkedColor,var(--primary))}[data-radio-input]:checked + .gu:not([aria-disabled=true]){font-weight:600}[data-radio-input]:disabled + .g0{background:var(--disabledBg,light-dark(#F0F0F3,#47474A))}[data-radio-input]:disabled + .g1{color:var(--disabledColor,light-dark(#D6D7DE,#373737))}}@layer o2{.hb{border-radius:8px}}.dl{align-items:center}.iv{animation-duration:1s}.iw{animation-iteration-count:infinite}.ix{animation-name:iu}.iy{animation-timing-function:linear}.h7{background:var(--border,light-dark(#E4E4E4,#434343))}.h6{background:var(--inputDisabledBackground,light-dark(#F0F0F3,#414244))}.hd{background:var(--primary,light-dark(#674DC7,#8163E1))}.h8{border-radius:4px}.he{border-radius:8px}.hj{color:#FFF}.ib{color:inherit}.et{color:light-dark(#D6D7DE,#6F6E6E)}.h2{color:var(--inputDisabledText,light-dark(#E5E5E5,#373737))}.eu{color:var(--text,light-dark(#2F2F2F,#EDEDED))}.dp{cursor:not-allowed}.dq{cursor:pointer}.dk{display:flex}.as{display:inline-block}.g5{display:inline-flex}.ev{font-size:14px}.ex{gap:8px}.do{height:16px}.h9{height:18px}.a0{height:24px}.dm{justify-content:center}.hk{justify-content:end}.a2{left:4px}.h4{left:50%}.a_{line-height:1.2}.be{margin-left:auto}.bd{margin-right:auto}.bc{max-width:100%}.ba{min-height:1.2em}.eq{opacity:1}.a7{overflow:hidden}.hh{padding-bottom:10px}.hg{padding-left:30px}.hf{padding-right:30px}.hi{padding-top:10px}.er{pointer-events:none}.a3{position:absolute}.at{position:relative}.hc{text-align:end}.a8{text-overflow:ellipsis}.a5{top:50%}.h3{top:55%}.a6{transform:translate(-100%,-50%)}.h5{transform:translate(-50%,-50%)}.bb{transform:translateX(8px)}.ia{transition:background-color .1s ease-in-out}.ew{user-select:none}.a9{white-space:nowrap}.aw{width:100%}.dn{width:16px}.h_{width:18px}.a1{width:24px}.bf{width:fit-content}.es{z-index:1}.au{box-sizing:border-box}.av *{box-sizing:border-box}.a4>svg{color:inherit}.g6[aria-disabled=true]{cursor:default}

과거 출력 4 (현재 동작 아님)

accent-color; key=accentColor-0-; bp=0; fallback=var(--primary,light-dark(#6159D4,#6670F9))
align-items; key=alignItems-0-; bp=0; fallback=center
appearance; key=appearance-0-; bp=0; fallback=none
background; key=bg-0-; bp=0; fallback=light-dark(#FFF,#2E2E2E)
background; key=bg-0-; bp=0; fallback=var(--background,light-dark(#FFF,#2E2E2E))
background; key=bg-0-; bp=0; fallback=var(--border,light-dark(#E4E4E4,#434343))
background; key=bg-0-; bp=0; fallback=var(--inputBg,light-dark(#FFF,#2E2E2E))
background; key=bg-0-; bp=0; fallback=var(--negative20,light-dark(#0003,#FFF6))
border; key=border-0-; bp=0; fallback=1px solid var(--border,light-dark(#E0E0E0,#333))
border; key=border-0-; bp=0; fallback=1px solid var(--border,light-dark(#E4E4E4,#434343))
border; key=border-0-; bp=0; fallback=1px solid
border; key=border-0-; bp=0; fallback=none
border-color; key=borderColor-0-; bp=0; fallback=var(--border)
border-color; key=borderColor-0-; bp=0; fallback=var(--border,light-dark(#E4E4E4,#434343))
border-color; key=borderColor-0-; bp=0; fallback=var(--error,light-dark(#D52B2E,#FF5B5E))
border-radius; key=borderRadius-0-; bp=0; fallback=100%
border-radius; key=borderRadius-0-; bp=0; fallback=2px
border-radius; key=borderRadius-0-; bp=0; fallback=50%
border-radius; key=borderRadius-0-; bp=0; fallback=6px
border-radius; key=borderRadius-0-; bp=0; fallback=8px
border-style; key=borderStyle-0-; bp=0; fallback=solid
border-width; key=borderWidth-0-; bp=0; fallback=1px
bottom; key=bottom-0-; bp=0; fallback=-4px
box-shadow; key=boxShadow-0-; bp=0; fallback=0 2px 2px 0 var(--base10,light-dark(#0000001A,#FFFFFF1A))
box-sizing; key=boxSizing-0-; bp=0; fallback=border-box
color; key=color-0-; bp=0; fallback=var(--base,light-dark(#FFF,#000))
color; key=color-0-; bp=0; fallback=var(--primary,light-dark(#674DC7,#8163E1))
color; key=color-0-; bp=0; fallback=var(--selectDisabled,light-dark(#C4C5D1,#45464D))
color; key=color-0-; bp=0; fallback=var(--text,light-dark(#272727,#F6F6F6))
color; key=color-0-; bp=0; fallback=var(--title,light-dark(#1A1A1A,#FAFAFA))
cursor; key=cursor-0-; bp=0; fallback=default
cursor; key=cursor-0-; bp=0; fallback=not-allowed
cursor; key=cursor-0-; bp=0; fallback=pointer
display; key=display-0-; bp=0; fallback=block
display; key=display-0-; bp=0; fallback=flex
display; key=display-0-; bp=0; fallback=inline-block
display; key=display-0-; bp=0; fallback=none
font-size; key=fontSize-0-; bp=0; fallback=16px
font-weight; key=fontWeight-0-; bp=0; fallback=400
font-weight; key=fontWeight-0-; bp=0; fallback=700
gap; key=gap-0-; bp=0; fallback=6px
height; key=boxSize-0-; bp=0; fallback=20px
height; key=boxSize-0-; bp=0; fallback=fit-content
height; key=h-0-; bp=0; fallback=1px
height; key=h-0-; bp=0; fallback=40px
height; key=h-0-; bp=0; fallback=fit-content
height; key=height-0-; bp=0; fallback=100%
height; key=height-0-; bp=0; fallback=18px
justify-content; key=justifyContent-0-; bp=0; fallback=center
left; key=left-0-; bp=0; fallback=0
line-height; key=lineHeight-0-; bp=0; fallback=1.5
margin; key=m-0-; bp=0; fallback=0
min-height; key=minH-0-; bp=0; fallback=80px
min-width; key=minW-0-; bp=0; fallback=232px
opacity; key=opacity-0-; bp=0; fallback=0
opacity; key=opacity-0-; bp=0; fallback=1
outline-offset; key=outlineOffset-0-; bp=0; fallback=2px
padding; key=p-0-; bp=0; fallback=10px
padding; key=p-0-; bp=0; fallback=12px
padding; key=p-0-; bp=0; fallback=2px
padding-bottom; key=py-0-; bp=0; fallback=12px
padding-left; key=pl-0-; bp=0; fallback=12px
padding-left; key=pl-0-; bp=0; fallback=36px
padding-left; key=px-0-; bp=0; fallback=10px
padding-right; key=pr-0-; bp=0; fallback=12px
padding-right; key=pr-0-; bp=0; fallback=36px
padding-right; key=px-0-; bp=0; fallback=10px
padding-top; key=py-0-; bp=0; fallback=12px
pointer-events; key=pointerEvents-0-; bp=0; fallback=none
position; key=pos-0-; bp=0; fallback=absolute
position; key=pos-0-; bp=0; fallback=fixed
position; key=pos-0-; bp=0; fallback=relative
right; key=right-0-; bp=0; fallback=12px
top; key=top-0-; bp=0; fallback=0
top; key=top-0-; bp=0; fallback=50%
transform; key=transform-0-; bp=0; fallback=translateY(-50%)
transition; key=transition-0-; bp=0; fallback=.25s
transition; key=transition-0-; bp=0; fallback=all .1s ease-in-out
transition; key=transition-0-; bp=0; fallback=background-color .1s ease-in-out
transition; key=transition-0-; bp=0; fallback=border-color .15s ease-in-out,box-shadow .15s ease-in-out
user-select; key=userSelect-0-; bp=0; fallback=none
width; key=boxSize-0-; bp=0; fallback=20px
width; key=boxSize-0-; bp=0; fallback=fit-content
width; key=w-0-; bp=0; fallback=100%
width; key=width-0-; bp=0; fallback=100%
width; key=width-0-; bp=0; fallback=18px
z-index; key=zIndex-0-; bp=0; fallback=0
z-index; key=zIndex-0-; bp=0; fallback=1
font-size; key=fontSize-0-; bp=4; fallback=14px

과거 출력 5 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
import { E } from "./values";
export const value = "height-0-20px--255";

과거 출력 6 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
import { imul } from "./values";
export const value = "width-0-48px--255";

과거 출력 7 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
import { clz } from "./values";
export const value = "width-0-124px--255";

과거 출력 8 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
import { fround } from "./values";
export const value = "width-0-6px--255";

과거 출력 9 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
export function before(props: object) {
	return ((__devupSpread0) => <div {...__devupSpread0} className={`${__devupSpread0?.className || ""} color-0-red--255`} style={__devupSpread0?.style} />)({
		__proto__: null,
		...props
	});
}
export function after(props: object) {
	return ((__devupSpread1) => <div {...__devupSpread1} className={`${__devupSpread1?.className || ""} color-0-var_lp_--color-spread-color-0-_cm_red_rp_--255`} style={{
		...{ "--color-spread-color-0-": "color" in __devupSpread1 ? __devupSpread1.color : void 0 },
		...__devupSpread1?.style
	}} />)({
		__proto__: null,
		...props
	});
}
export function call(props: object) {
	return ((__devupSpread2) => <div {...__devupSpread2} className={`${__devupSpread2?.className || ""} background-0-gray--255`} style={__devupSpread2?.style} />)({
		__proto__: null,
		...getProps(props)
	});
}
declare function getProps(props: object): object;

과거 출력 10 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
export function responsive(props: object) {
	return ((__devupSpread0) => <div {...__devupSpread0} className={`${__devupSpread0?.className || ""} background-0-var_lp_--background-spread-bg-0-_cm_red_rp_--255 background-1-var_lp_--background-spread-bg-0-_cm_blue_rp_--255`} style={{
		...{ "--background-spread-bg-0-": "bg" in __devupSpread0 ? __devupSpread0.bg : void 0 },
		...__devupSpread0?.style
	}} />)({
		__proto__: null,
		...props
	});
}
export function token(props: object) {
	return ((__devupSpread1) => <div {...__devupSpread1} className={`${__devupSpread1?.className || ""} color-0-var_lp_--color-spread-color-0-_cm__dl_primary_rp_--255`} style={{
		...{ "--color-spread-color-0-": "color" in __devupSpread1 ? __devupSpread1.color : void 0 },
		...__devupSpread1?.style
	}} />)({
		__proto__: null,
		...props
	});
}
export function multiple(first: object, last: object) {
	return ((__devupSpread2, __devupSpread3) => <div {...__devupSpread2} {...__devupSpread3} className={`${("className" in __devupSpread3 ? __devupSpread3.className : __devupSpread2?.className) || ""} color-0-var_lp_--color-spread-color-0-_cm_red_rp_--255`} style={{
		...{ "--color-spread-color-0-": "color" in __devupSpread3 ? __devupSpread3.color : "color" in __devupSpread2 ? __devupSpread2.color : void 0 },
		..."style" in __devupSpread3 ? __devupSpread3.style : __devupSpread2?.style
	}} />)({
		__proto__: null,
		...first
	}, {
		__proto__: null,
		...last
	});
}
export function nestedBefore(props: object) {
	return ((__devupSpread4) => <div {...__devupSpread4} className={`${__devupSpread4?.className || ""} background-0-blue-_a__c_hover-255`} style={__devupSpread4?.style} />)({
		__proto__: null,
		...props
	});
}

과거 출력 11 (현재 동작 아님)

C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/jsx02-selectors-error.tsx:2:58: `<Box>` cannot use `_hover` at build time: a spread after it can replace the whole `_hover` object, which no stylesheet rule can follow: write the spread before `_hover`, or give the nested object through the spread yourself

과거 출력 12 (현재 동작 아님)

C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/jsx02-css-error.tsx:2:78: `css` on `<Box>` cannot use `...props` at build time: a spread after the `css` prop may carry a `css` of its own, which replaces it whole where only the runtime could tell: write the spread before `css`

과거 출력 13 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
import { forwardRef as __devupForwardRef } from "react";
const Card = __devupForwardRef((__devupRefProps, __devupRef) => (({ style, className, as: DevupAs = "div", forwardedAs, ...rest }) => <DevupAs {...(({ "theme": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={["background-0-white--255", className].filter(Boolean).join(" ")} style={style} />)({
	...__devupRefProps,
	ref: __devupRef
}));
export function before(props: object) {
	return ((__devupSpread0) => <Card {...__devupSpread0} className={`${__devupSpread0?.className || ""} color-0-red--255`} style={__devupSpread0?.style} />)({
		__proto__: null,
		...props
	});
}
export function after(props: object) {
	return ((__devupSpread1) => <Card {...__devupSpread1} className={`${__devupSpread1?.className || ""} color-0-var_lp_--color-spread-color-0-_cm_red_rp_--255`} style={{
		...{ "--color-spread-color-0-": "color" in __devupSpread1 ? __devupSpread1.color : void 0 },
		...__devupSpread1?.style
	}} />)({
		__proto__: null,
		...props
	});
}

과거 출력 14 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
import React, { createElement as make } from "react";
export const named = make("div", { className: "color-0-red--255" }, "child");
export const namespace = React.createElement("div", { className: "background-0-blue--255" }, "child");

과거 출력 15 (현재 동작 아님)

C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/jsx09.tsx:3:50: `<Box>` cannot use `runtime` at build time: `styleOrder` must be a number, or a condition choosing between numbers, since the stylesheet places rules by it before the code runs

과거 출력 16 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
export function render() {
	const color = "green";
	const width = Math.imul(2, 3);
	return <div className="color-0-green--255 width-0-24px--255" />;
}

과거 출력 17 (현재 동작 아님)

import type { Box, css } from "@devup-ui/react";
import { type Flex, type keyframes } from "@devup-ui/react";
export type A = typeof Box;
export type B = typeof css;
export type C = typeof Flex;
export type D = typeof keyframes;

과거 출력 18 (현재 동작 아님)

C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/namespace.ts:3:26: `ns` cannot use `ns` at build time: read its members by name, as `ns.css`, `ns['css']` or `const { css } = ns`, or import them by name

과거 출력 19 (현재 동작 아님)

C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/tdz-error.tsx:2:33: style value cannot use `color` at build time: it is read before its lexical declaration is initialized, so the original JavaScript throws ReferenceError; move the declaration of `color` above this use

과거 출력 20 (현재 동작 아님)

import "@devup-ui/react/devup-ui.css";
export function Render() {
	return <div className="color-0-red--255" />;
}
const color = "red";
export const beforeVar = <div className="color-0---255" style={{ "--color-0-": later }} />;
var later = "blue";

과거 출력 21 (현재 동작 아님)

C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/tdz-block-function.tsx:2:28: style value cannot use `color` at build time: it is read before its lexical declaration is initialized, so the original JavaScript throws ReferenceError; move the declaration of `color` above this use
C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/tdz-block-function.tsx:3:53: style value cannot use `local` at build time: it is read before its lexical declaration is initialized, so the original JavaScript throws ReferenceError; move the declaration of `local` above this use
C:/Users/devfive3901/AppData/Local/Temp/opencode/workers/w22-js-semantics/tdz-block-function.tsx:4:38: style value cannot use `Color` at build time: it is read before its lexical declaration is initialized, so the original JavaScript throws ReferenceError; move the declaration of `Color` above this use

과거 출력 22 (현재 동작 아님)

@layer b,o1;@layer b{.a{display:flex}.b{flex-direction:column}}@layer o1{.f{background:var(--containerBackground)}.g{border:1px solid var(--border)}.h{border-radius:10px}.i{cursor:pointer}.j{transition:all .2s ease}.e:hover{box-shadow:0 0 20px 0 #00000026}.c:active{box-shadow:none}.d:active{transform:scale(.95)}}

과거 출력 23 (현재 동작 아님)

@layer b,o1;@layer b{.k{display:flex}.l{flex-direction:column}}@layer o1{.f{background:var(--e,var(--containerBackground))}.g{border:var(--d,1px solid var(--border))}.h{border-radius:var(--c,10px)}.i{cursor:var(--b,pointer)}.j{transition:var(--a,all .2s ease)}.o:hover{box-shadow:0 0 20px 0 #00000026}.m:active{box-shadow:none}.n:active{transform:scale(.95)}}

과거 출력 24 (현재 동작 아님)

@layer b;@layer b{.i{display:flex}}.j{align-items:center}.k{background:var(--menuHover)}.d{background:transparent}.e{border:none}.l{border-radius:8px}.f{color:var(--text)}.m{gap:10px}.a{height:24px}.g{outline:none}.n{padding:8px 8px 6px}.h{width:100%}.b{width:24px}.c::placeholder{color:var(--caption)}

과거 출력 25 (현재 동작 아님)

@layer b;@layer b{.n{display:flex}}.o{align-items:center}.p{background:var(--menuHover)}.h{background:var(--g,transparent)}.i{border:var(--f,none)}.q{border-radius:8px}.j{color:var(--e,var(--text))}.r{gap:10px}.a{height:24px}.k{outline:var(--d,none)}.s{padding:8px 8px 6px}.t{width:100%}.b{width:24px}.l{width:var(--c,100%)}.m::placeholder{color:var(--caption)}

2026-10-24 사용자 결정: napi가 기본 엔진이 될 예정이라 WASM 크기 초과는 일회 예외로 허용합니다. Linux raw는 6,181,807(한도 6,158,336, main 대비 +1.40%), gzip은 2,227,164(한도 2,224,128, +1.14%)입니다. size-budget.json은 바꾸지 않습니다.

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

github-actions · 2026-10-04T20:13:41Z

Changepacks

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

Patch

A project module re-exporting Devup UI (export { Box, css } from '@devup-ui/react', export * from '@devup-ui/react', export { styled as s }, export * as Devup, a default export of an import, chains of barrels and the compat entry) now works: a file importing Box or css from it compiles exactly as if it imported from the package, following the barrel through the resolver (relative paths, tsconfig paths, package exports), and hasDevupUI sees such a file. Members read from a namespace or default import of the package (Devup['css'], const { css } = Devup, Devup.css as a value) compile where the build can follow them, Devup.x for a name the package compiles being read like the named import. New build errors, located at the use: what a barrel re-exports but the build cannot read (an unresolvable export * or module, a namespace of modules re-exporting the package) is an error where its name is used instead of a runtime crash, and a namespace member read by a key the build cannot know (Devup[key]), written, or destructured in a form it cannot follow (a rest, a computed key, a default value, a nested pattern, an exported declaration, or members mixed with ones that stay at runtime) is an error that names the members to read. A namespace passed on whole (Object.keys(Devup), spyOn(Devup, 'css'), export default Devup) is left as it is
css(a, b) composing classes whose styles the build knows (a const bound to css() in the file, or a css() result another module exports with a rule object every value of which is known) merges their styles: a later part's declaration replaces an earlier one's for the same property, selector, breakpoint and layer, also under conditions (css(base, cond && danger)) and for ||/?? parts, where the classes used to be joined and the stylesheet order picked the winner. vanilla-extract style([a, b]) passes each composed style as its own argument, so the later one wins, and a style composed again later (style([a, b, a])) is kept. Classes the build does not know (strings, props, CSS Modules) are kept as they are
styled(Base) extending a styled component the file binds to a const renders Base's tag directly with Base's styles composed under its own, so the extension's declarations replace Base's for the same property, selector, breakpoint and layer instead of losing to them by stylesheet order; Base's attrs apply before the extension's. attrs merge as styled-components merges them: className is joined with the caller's, style is merged and other props replace earlier ones. On an element, a className or style spread after the explicit prop now wins, as React merges props in the order they are written
Emotion's now compiles at build time with no runtime: the element becomes what its child function ({ css, cx, theme }) => ... renders, each css and cx call becomes the classes it composes (later styles replace earlier ones; css reads strings as CSS text and its tagged templates split around mixins; cx keeps unknown classes, reads { name: condition } objects as conditional classes and composes nested css and cx calls), and theme.a.b in their values becomes var(--a-b). Numbers in css rules are px lengths, as Emotion reads them, and top-level constants are inlined. New build errors, each at file:line:col: a without exactly one child function taking { css, cx, theme } that gives what it renders at once (attributes, other children, rest or default parameters, async or generator functions, several statements); reading the theme other than as theme.a.b in a css value; using css or cx other than by calling them; a cx object with a spread, getter or method; parts css and cx cannot compose (runtime calls, spreads, a condition choosing between styles and classes). @devup-ui/react/compat exports ClassNames with the ClassNamesContent and ClassNamesArg types, and the @emotion/react declarations include them
Emotion and styled-components component selectors now compile at build time: a styled component the file defines that another style selects (${Child} { ... } in CSS text, [Child] or [&:hover ${Child}] as a rule key) gets a short marker class, which only such components get, and the selector reads it as .marker; a component extending it, or an element inlining it for its css prop, keeps the marker. Selectors written without & now nest under the component as stylis nests them (ul { ... } is & ul, a selector list nests each selector, :hover applies to the component itself) instead of becoming global rules, and rule-object keys starting with ., #, [, *, >, + or ~ are read as nested selectors instead of properties
Emotion's css prop compiles at build time while @emotion/react is aliased: on tags and Devup UI components always, and on every element once the file imports @emotion/react or @emotion/styled or names @emotion/react in a @jsxImportSource pragma; jsx, jsxs and jsxDEV from @emotion/react/jsx-runtime (or jsx-dev-runtime) and jsx from @emotion/react compile it too, so libraries built with Emotion's JSX runtime do as well. The prop becomes the element's className, with CSS variables in its style for values only the runtime gives: arrays and conditions compose with a later part replacing what an earlier one sets, css() classes the file knows compose by their styles, strings and templates are CSS text, css`` mixins split the text around them, a function of the theme reads theme.a.b as var(--a-b), unitless numbers are px as in Emotion (constants included), and a className holding known css() classes overrides the prop as Emotion's registered classes do. A styled component the file defines renders its tag in the element's place when the prop overrides its styles and it renders a tag with no attrs or props read and the element has no spread, as or forwardedAs. Emotion's JSX runtime imports become react/jsx-runtime, the pragma names react, and jsx comes from @devup-ui/react/compat (React's createElement); @devup-ui/react/compat/css-prop types the prop on React.Attributes. New build errors, each with file:line:column and the code: a css prop part the build cannot read (a call, an element), a style object declared inside a function or with let, a binding only running the module gives or code changes, a theme function that does more than return rules or reads the theme other than as theme.a.b in a value, an interpolation CSS text cannot place or a mixin inside a nested rule, and a css prop overriding a styled component's styles where its tag cannot be rendered in place. Composing css() with a part that reads a known binding (such as a keyframes name) now reads its value
A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.
hasDevupUI takes the import aliases and is true for a file extraction changes: one importing a redirected package (@emotion/styled, ...), naming @emotion/react in a @jsxImportSource pragma, or in a project whose tsconfig jsxImportSource is @emotion/react, so the Bun plugin no longer skips files whose only Devup UI is Emotion's css prop or an aliased import. Aliases of Devup UI now compile like the original: export const B = Box, const c = css; export { c as cc }, export const D = Devup and export const C = Devup.css in a barrel (the barrel module exports them as re-exports of the package, and what imports them follows them), export { Box } after an import, export default Box, const D = Devup namespace aliases, and const inner = css declared inside a function. A css() or keyframes() const that a function reads before its declaration compiles. New build error: a css()/keyframes() const read before its declaration runs (outside a function) is located and says to move the declaration above its first read
Preserve JavaScript semantics for exact imported enum and Math values including negative zero, lexical constants, binding-aware CommonJS require, React createElement calls, type-only imports, and source-ordered props evaluation with native spread snapshots and CSS-variable fallbacks without a styling runtime. Migrate UI-kit style defaults by pure reordering and test reset CSS through compiled output. Report located build errors for runtime styleOrder values, unknowable whole-object style overrides, opaque selector literals, genuinely unmovable lazy logical suspension, Devup UI namespaces passed whole to runtime code, and immediate style reads in the temporal dead zone of lexical bindings; deferred initialized reads keep folding and pre-assignment var reads remain dynamic.
Resolve compiled styling APIs and components by their lexical binding so shadowed local names, including minified library identifiers, remain ordinary JavaScript and JSX. No new build errors; existing diagnostics now apply only to the compiled binding they describe.
Styled components the build generates are wrapped in React's forwardRef, so a ref passed to them reaches the element they render on React 18 as well as React 19; the file imports forwardRef from react when it defines one
Styled components no longer pass every prop to the tag they render: $ props, theme and the props their style functions or attrs read are kept away from a tag unless it takes them as attributes, and shouldForwardProp (Emotion options or styled-components withConfig) is evaluated at build time. A shouldForwardProp the build cannot evaluate is a build error naming the file, line and code, with the forms it accepts. An element using a styled component the file defines drops props the component neither reads nor passes on; spread props are passed as written
Styled components render what their as prop names, defaulting to the tag or component they were defined with, and pass forwardedAs on as as, as styled-components and Emotion do; as used to reach the rendered tag as an attribute. Component.withComponent(target) on a styled component the file binds to a const builds a component rendering the same styles and attrs as target (a tag name or a component JSX can name), where it used to call a method the generated function does not have and throw
Tailwind classes in a className: each class compiles on its own and every class Tailwind does not define (custom, plugin and analytics classes) stays as written, where any recognized class used to rebuild the whole className without them and could rewrite part of another class; a class touching a template interpolation (icon-${name}) is left as written, and template classNames no longer get spaces inserted around interpolations. A class whose variant is not understood stays as written instead of applying unconditionally; variants follow Tailwind v4: stacked variants compose (hover:focus: matches the element itself), hover is guarded by @media (hover: hover), group-/peer- use the group/peer marker classes (and group-hover/name), and data-, aria-, has-, nth-, , **, supports-[…] and [&…]/[@media …] variants compile. Utilities emit all their declarations (size-, rounded-t-, truncate, sr-only, not-sr-only, text-sm with its line height, text-sm/6, leading-), translate/rotate/scale/skew compose through Tailwind's individual properties and registered variables (@Property) with negative values kept negative, and arbitrary values follow Tailwind's grammar: spaces for underscores except in url() and var() names, _ for an underscore, spaces around math operators, type hints, [property:value] and (--variable) shorthands. Words that only share a utility's prefix (select-wrapper, order-summary, cursor-foo) are no longer compiled

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

Patch

Bun plugin works with Bun.build: DevupUI() (from @devup-ui/bun-plugin/register) serves the generated stylesheet to the bundler's CSS loader once every other module is loaded, so the build emits a CSS output with the styles of the whole bundle instead of an empty module; class names are short there and readable under the runtime (debug option). Files importing the packages Devup UI takes the place of (@emotion/react, @emotion/styled, styled-components, @vanilla-extract/css), @stylexjs/stylex, or a subpath or re-export of these or @devup-ui/react, are compiled instead of skipped
A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source
hasDevupUI takes the import aliases and is true for a file extraction changes: one importing a redirected package (@emotion/styled, ...), naming @emotion/react in a @jsxImportSource pragma, or in a project whose tsconfig jsxImportSource is @emotion/react, so the Bun plugin no longer skips files whose only Devup UI is Emotion's css prop or an aliased import. Aliases of Devup UI now compile like the original: export const B = Box, const c = css; export { c as cc }, export const D = Devup and export const C = Devup.css in a barrel (the barrel module exports them as re-exports of the package, and what imports them follows them), export { Box } after an import, export default Box, const D = Devup namespace aliases, and const inner = css declared inside a function. A css() or keyframes() const that a function reads before its declaration compiles. New build error: a css()/keyframes() const read before its declaration runs (outside a function) is located and says to move the declaration above its first read

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

Patch

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

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

Patch

style-order-range only checks styleOrder where the build reads it: a prop of a Devup UI component and a top-level key of a style object passed to css/globalCss/keyframes. A styleOrder key in nested data, in a prop value such as an element passed as a prop, or in a call of a function sharing a name with an Object.prototype member is no longer reported. The array, typography and media rules already skip non-style data, and css-utils-literal-only accepts a css()/keyframes() result held in a const inside a function. No new build errors.

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

Patch

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

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

Patch

Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles
A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

Emotion's now compiles at build time with no runtime: the element becomes what its child function ({ css, cx, theme }) => ... renders, each css and cx call becomes the classes it composes (later styles replace earlier ones; css reads strings as CSS text and its tagged templates split around mixins; cx keeps unknown classes, reads { name: condition } objects as conditional classes and composes nested css and cx calls), and theme.a.b in their values becomes var(--a-b). Numbers in css rules are px lengths, as Emotion reads them, and top-level constants are inlined. New build errors, each at file:line:col: a without exactly one child function taking { css, cx, theme } that gives what it renders at once (attributes, other children, rest or default parameters, async or generator functions, several statements); reading the theme other than as theme.a.b in a css value; using css or cx other than by calling them; a cx object with a spread, getter or method; parts css and cx cannot compose (runtime calls, spreads, a condition choosing between styles and classes). @devup-ui/react/compat exports ClassNames with the ClassNamesContent and ClassNamesArg types, and the @emotion/react declarations include them
Emotion's css prop compiles at build time while @emotion/react is aliased: on tags and Devup UI components always, and on every element once the file imports @emotion/react or @emotion/styled or names @emotion/react in a @jsxImportSource pragma; jsx, jsxs and jsxDEV from @emotion/react/jsx-runtime (or jsx-dev-runtime) and jsx from @emotion/react compile it too, so libraries built with Emotion's JSX runtime do as well. The prop becomes the element's className, with CSS variables in its style for values only the runtime gives: arrays and conditions compose with a later part replacing what an earlier one sets, css() classes the file knows compose by their styles, strings and templates are CSS text, css`` mixins split the text around them, a function of the theme reads theme.a.b as var(--a-b), unitless numbers are px as in Emotion (constants included), and a className holding known css() classes overrides the prop as Emotion's registered classes do. A styled component the file defines renders its tag in the element's place when the prop overrides its styles and it renders a tag with no attrs or props read and the element has no spread, as or forwardedAs. Emotion's JSX runtime imports become react/jsx-runtime, the pragma names react, and jsx comes from @devup-ui/react/compat (React's createElement); @devup-ui/react/compat/css-prop types the prop on React.Attributes. New build errors, each with file:line:column and the code: a css prop part the build cannot read (a call, an element), a style object declared inside a function or with let, a binding only running the module gives or code changes, a theme function that does more than return rules or reads the theme other than as theme.a.b in a value, an interpolation CSS text cannot place or a mixin inside a nested rule, and a css prop overriding a styled component's styles where its tag cannot be rendered in place. Composing css() with a part that reads a known binding (such as a keyframes name) now reads its value
A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

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

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

Patch

Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles
A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

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

Patch

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

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

Patch

Webpack and Rsbuild builds hold every style in their stylesheets: a stylesheet module is built on its first import, so styles extracted later (the global styles of files webpack or Rsbuild reached late, often outside src) were missing from the output. The files the entries reach under src are now extracted before the build, the shared base on disk is kept current, and when a stylesheet still changed during the build it is compiled once more, writing only the complete result. Rsbuild serves each stylesheet from the current sheet instead of a module-wide string kept only when it grew, which left edits that shortened the CSS and later builds in the same process stale. plugin-utils adds computeReachableFiles
A project whose tsconfig.json (or jsconfig.json) builds JSX with Emotion (compilerOptions.jsxImportSource of @emotion/react, through extends and project references too) now compiles the css prop on every element of every file, and its .tsx and .jsx files are built with React's JSX runtime through a /** @jsxImportSource react */ pragma, which a file's own JSX pragma overrides, so the bundler no longer imports Emotion's runtime. The plugins read the setting into a new @emotion/react/jsx-runtime alias (importAliases can turn it off with false, and it is left out when @emotion/react is not aliased); @devup-ui/react/compat/emotion-jsx-runtime declares Emotion's JSX runtimes as React's so the project type-checks without Emotion installed. plugin-utils exports readJsxImportSource, and mergeImportAliases takes the JSX import source

codecov · 2026-10-04T20:14:09Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
libs/extractor/src/barrel.rs	`100.00% <ø> (ø)`
libs/extractor/src/barrel/aliases.rs	`100.00% <100.00%> (ø)`
libs/extractor/src/barrel/namespace_aliases.rs	`100.00% <100.00%> (ø)`
libs/extractor/src/build_time_values.rs	`100.00% <ø> (ø)`
libs/extractor/src/build_time_values/exact_math.rs	`100.00% <100.00%> (ø)`
...tractor/src/extract_style/extract_dynamic_style.rs	`100.00% <ø> (ø)`
...tor/src/extractor/extract_style_from_expression.rs	`100.00% <100.00%> (ø)`
...tractor/src/extractor/extract_style_from_styled.rs	`100.00% <100.00%> (ø)`
libs/extractor/src/extractor/styled_record.rs	`100.00% <100.00%> (ø)`
...ibs/extractor/src/extractor/styled_record_value.rs	`100.00% <100.00%> (ø)`
... and 32 more

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

Merge updated parent PR 750 (74afb76), containing main 11790be. Conflicts: libs/extractor/src/prop_modify_utils.rs and conditional Tailwind snapshot. Share main's per-class Tailwind compiler between normal generation and PR 756 class capture, retaining semantic IDs and single evaluation. Regenerate the conditional snapshot to combine main's extra line-height declaration with the captured controller; retain all assertions and update five exact template-code expectations for PR 756 single-coercion IIFEs. Full workspace tests, fresh WASM/root builds and real WASM probe pass; no snapshots were hand-merged. Refs #686 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

No conflicted files; retain PR changes and merge updated parent #756, which contains main 11790be.

Merge #756 at f2fc451, retaining the style-order metadata policy and forwarding/callback provenance from faff4a0. Keep the current scope-aware style-order-range rule and clarify that nested style metadata is checked while ordinary props and data are ignored. Coordinator-approved integration reconciliation: the incoming test_tailwind_keeps_other_classes cases 07, 08, 09, 14 and 15 retain the current once-only __devupValue0 controller captures; case 10 folds the truthy literal a without reading the right side of OR. See the source-fed failure evidence D/W38g-756-test-conflict.md and successful executed controls W38g-756-tailwind-qa3.log. Existing HEAD assertions and goldens are unchanged. Reclassify exactly the two incoming ESLint fixtures containing nested zero and a computed styleOrder zero from valid to invalid, retaining their source and ordinary props/data controls. #766 reads metadata at those positions; #756 alone predated it. Pin the 2+1 original diagnostic locations, as recorded in W38g-756-eslint-focused.log. Rule production behavior is unchanged. Fresh gates: Rust1.99 clippy, default workspace4119/0, rebuilt WASM/root, Bun6472/0 aggregate100%, lint0errors/2baselinewarnings, original48probes with only the incoming1.0.82-to1.0.83 banner delta, and named literal/wrapper QA. The incoming guarded-hover/active cascade finding is reported separately, not fixed by this merge, per coordinator attribution instructions. Refs #684 #685 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Merge #757 at 78ef660 after the genuine #756 integration975f3371. Recursive merge bases74afb760 and6d0c9c83 produce an identical tree3c14e7e427686d8802d1e0722afc33515d3eed28 with no conflicts or source changes. Preserve both exact base histories and normal hook gates. Keep the approved six incoming Tailwind expectation and two incoming ESLint fixture reconciliations from the prior merge, current JSX capture/constant-fold semantics, located metadata errors, and existing HEAD assertions/goldens. F195 and the remaining coverage units are separate subsequent changes. Refs #684 #685 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Refs #690, #693 Merge exact f2fc451 retaining the current native/readback/provenance and incoming namespace/JS-semantics changes, without resetting merge state. Resolve five combined source/snapshot seams, use direct private tracking fields and current evaluate_located test API, and bind the incoming reachable-file helper to existing resolveSourceFile. Coordinator-approved merge-test alignments: lexical local require is not a module request; genuine unbound require keeps its original helper.ts:1:25 semantic site and unchanged cause/Fix/no-publication, while reference-free exploration falls back to entry.tsx:2:23 ingress; eight native consumer cases evaluate independent runtime sentinels, exact once-only getters/calls and wrong-slot/restoration instead of generated identifier spellings; only positive g uses valid styleOrder={undefined}, with the complete original invalid JSX retained as the located a.tsx:9:34 negative. All other fixtures and oracles remain unchanged; incoming capture/spread snapshot preserves the existing CJS_DYNAMIC alias. Full workspace4719, Rust1.99clippy, fresh WASM/root, Bun5535, preservation/API/carrier/graph and50both-mode browser positive/wrong-class/restoration gates passed. The prior advisory B Oracle result was lost to tool failure; coordinator authorized full-diff self-review and objective gates, not a claimed clean Oracle review. No contextual carrier/plugin delivery or out-of-scope Devup-only composition fix is included. Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Refs #682 #695 #688 #689 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

owjs3901 and others added 11 commits October 5, 2026 00:13

fix(extractor): reject whole Devup namespace runtime escapes

c647ab5

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

fix(extractor): preserve exact lexical values and binding-aware require

81d9a56

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

fix(extractor): preserve JavaScript props evaluation during lowering

d257aac

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

fix(components): reorder compile-time style defaults after DOM spreads

d4e0187

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

fix(landing): keep selector defaults after Card DOM props

58fe5a1

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

test(extractor): cover direct literal selection and dynamic value paths

955bf5e

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

test(extractor): cover native written class spread precedence

1e81fdf

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

test(extractor): cover scalar order and runtime CSS suffix branches

4b24361

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

test(extractor): cover initialization and exact constant safety branches

6749633

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

test(extractor): cover native logical and suspension capture edges

5657601

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

refactor(extractor): make JSX ordering and pruning paths measurable

f0969a0

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

owjs3901 added a commit that referenced this pull request Oct 8, 2026

merge: update PR #758 with PR #756

b0407cc

No conflicted files; retain PR changes and merge updated parent #756, which contains main 11790be.

merge: update PR #756 with PR #750

628f7c7

Refs #682 #695 #688 #689 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

owjs3901 added a commit that referenced this pull request Oct 17, 2026

merge: update PR #775 with PR #756

1fbc589

Refs #682 #695 #688 #689 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

This was referenced Oct 18, 2026

chore(deps): update all libraries including Oxc #768

Merged

fix(extractor): compile factory dynamic utility references #804

Merged

fix(extractor): compile StyleX position and view-transition contracts #762

Closed

owjs3901 and others added 4 commits October 24, 2026 02:53

fix(extractor): preserve explicit styles across parent merge

d9cf389

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

fix(extractor): integrate settled main semantics

505e68a

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

perf(extractor): avoid unused constant preparation

6e457e9

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

test(extractor): cover merged semantic edge paths

2b1087e

Refs #695 Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Navigation Menu

Repository navigation

fix(extractor): preserve JavaScript semantics across values and element calls - #756

fix(extractor): preserve JavaScript semantics across values and element calls#756
owjs3901 wants to merge 17 commits into
mainfrom
fix/js-semantics

owjs3901 commented Oct 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 4, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Oct 4, 2026 •

edited

Loading

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

owjs3901 commented Oct 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요약

동작

새로 생기는 오류

남는 한계

검증

최종 상태와 실제 merge 이력

로컬 관측 (6e457e9 성능 트리)

커버리지 후속 검증 (2b1087e)

실제 현재 출력

Landing Client JavaScript 크기

추출 성능과 남는 비용 (6e457e9 측정)

WASM Size Gate (최종 CI FAIL, A/B 미결정)

과거 출력 보존

Uh oh!

github-actions Bot commented Oct 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changepacks

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

Patch

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

Patch

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

Patch

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

Patch

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

Patch

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

Patch

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

Patch

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

Patch

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

Patch

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

Patch

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

Patch

Uh oh!

codecov Bot commented Oct 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

owjs3901 commented Oct 4, 2026 •

edited

Loading

로컬 관측 (`6e457e9` 성능 트리)

커버리지 후속 검증 (`2b1087e`)

추출 성능과 남는 비용 (`6e457e9` 측정)

github-actions Bot commented Oct 4, 2026 •

edited

Loading

codecov Bot commented Oct 4, 2026 •

edited

Loading