feat: number units, compat layers, module loading and strict build-time values (#676, #677, #678)

.changepacks/changepack_log_changed_constants.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch"
+  },
+  "note": "An object, array or enum constant that code the build sees changes (a member assignment, delete, ++, push, sort, Object.assign, or handing it to a function the build does not know) is no longer read as its declared value: elements read its members at runtime, css(), styled() and element spreads taking it whole are build errors naming where it is changed, and values computed at build time do not read it. Values computed at build time cannot read window, document, navigator, location, process or globalThis properties the build does not define, so the CSS never holds the build environment's answer",
+  "date": "2026-09-29T00:00:00.000Z"
+}

.changepacks/changepack_log_compat_layers_typography.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch"
+  },
+  "note": "Fix vanilla-extract stylesheets: styles are named after the variable holding them, so style calls nested in objects no longer shift every later name onto the wrong styles and such objects export their classes; createVar, createContainer, layer, fontFace and theme variables get names unique to each stylesheet instead of colliding across files, createVar returns var() so template literals and fallbackVar work, createTheme(tokens, debugId), the three-argument createGlobalTheme and unassigned createGlobalTheme calls produce their variables, createThemeContract exports, styleVariants variants resolve in selectors and compositions and accept a map function, composition keeps transitive bases, '@layer' records, globalLayer, createGlobalThemeContract, assignVars and globalFontFace work, and layers keep their declaration order. Emotion and styled-components object styles read numbers as pixels (Devup UI shorthands keep the spacing scale), compose several style arguments or arrays, and accept Emotion's styled(tag, options) factory; css() composes class names passed with rule objects. A global '@layer' now covers responsive, selector and at-rule declarations, and layered declarations keep their breakpoints. Custom properties keep their value instead of reading a number as the spacing scale. A typography preset no longer overrides a property written beside it at a wider breakpoint, in components and globalCss",
+  "date": "2026-09-27T00:00:00.000Z"
+}

.changepacks/changepack_log_dynamic_as.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/eslint-plugin/package.json": "Patch"
+  },
+  "note": "A dynamic as renders what it gives: undefined, null and false give the default element, a component or a member such as motion.div renders as named, a condition between names becomes an element for each, and any other value (a lowercase variable, a template, a call, a lookup) is read at runtime, once, with the default element when it is empty, where member expressions rendered nothing, templates took their first part and lookups built every element. Build-time values read Math only through members with a known key, and toString only called at once without a radix. css-utils-literal-only checks every argument and the CSS text of css, globalCss, keyframes and createGlobalStyle, tagged templates included, and the StyleX functions devup-ui compiles, and reports aliases of Math and toString read other than called",
+  "date": "2026-09-30T00:00:00.000Z"
+}

.changepacks/changepack_log_library_numbers_full_engine.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/next-plugin/package.json": "Patch"
+  },
+  "note": "Numbers in vanilla-extract and StyleX styles keep their library's meaning instead of Devup UI's spacing scale: vanilla-extract styles add `px` in `.css.ts` files and in `style()`, `globalStyle()` and `keyframes()` calls inside ordinary modules, StyleX adds `px`/`ms` to static values and to numbers passed to dynamic styles, and unitless properties such as `columnCount`, `strokeWidth`, `orphans` or `zoom` keep a bare number everywhere. The Next.js plugin now evaluates every `.css.ts` module instead of taking a separate static fast path, so development and production builds produce the same output",
+  "date": "2026-09-27T00:00:00.000Z"
+}

.changepacks/changepack_log_module_loader_constants.json

@@ -0,0 +1,14 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/plugin-utils/package.json": "Patch",
+    "packages/vite-plugin/package.json": "Patch",
+    "packages/webpack-plugin/package.json": "Patch",
+    "packages/next-plugin/package.json": "Patch",
+    "packages/rsbuild-plugin/package.json": "Patch",
+    "packages/bun-plugin/package.json": "Patch",
+    "packages/eslint-plugin/package.json": "Patch"
+  },
+  "note": "Load the modules a file imports: a .css.ts stylesheet can import other stylesheets and ordinary modules (an imported stylesheet exports the names its own CSS uses and stays imported), and a string or number declared with const in an imported module stays a static class instead of a CSS variable. The plugins resolve imports like the bundler (relative paths, tsconfig paths) through setModuleResolver and watch the files read (Output.dependencies). styled-components .attrs() (objects and functions) and .withConfig() compile, a file may import styled from several libraries, and conditional style arguments (cond && { ... }, ternaries) merge per property in css() and styled. Dynamic values inside '@layer' stay in the layer, and a layered declaration no longer shares a class with the same unlayered one. A declaration written only on a condition now wins over a typography preset, which sits in a cascade layer below direct declarations. Emotion's number-to-px conversion reaches conditional branches, and a side-effect import in a .css.ts file is kept. Imports also resolve to packages (exports conditions, module, main) and CommonJS modules, import cycles behave as in ES modules, value || { ... } and value ?? { ... } compose, styled composes classes like css(), and a style argument that cannot be known at build time is a build error instead of a silently missing style. A string or number const at the top of the file itself is inlined too, with templates and arithmetic over constants folded; css(), globalCss(), keyframes() and stylex.create() report a value known only at runtime as a build error instead of emitting an unset CSS variable; template interpolations of globalCss, createGlobalStyle and keyframes are written into the CSS, a template mixin (${mixin}, ${p => cond && mixin}) composes its class, and an unknown interpolation in a selector or property name is a build error; Next.js keeps the files a prewarmed extraction read so their changes rebuild; the css-utils-literal-only lint rule accepts the constants the build inlines; the webpack plugin prewarms with the module resolver, so a file merged into another file's CSS keeps the classes its loader emits; StyleX variables, constants and themes imported from another module resolve to the names that module generates, and every namespace or default StyleX import is recognized; a .css.ts file that throws while evaluated reports the exception instead of emitting runtime style() calls; constant inlining skips scope analysis when no style reads a constant; build errors carry file:line:column and all of them are reported; StyleX defineVars and createTheme values may depend on @media, @supports and @container conditions (optionally wrapped in types.*()), emitted as one block per set of conditions after the unconditional values with nested conditions last, in the defining file and in the files importing it; a StyleX variable or theme value that is not static is a build error; Math.* calls over constants fold at build time; a style value computed from constants when the module runs (darken(0.1, PRIMARY), a helper call) is computed at build time and becomes a static class; StyleX create(), defineVars(), defineConsts(), createTheme(), keyframes(), positionTry(), viewTransitionClass() and include() report what they cannot read (spreads, computed keys, non-object arguments) as located build errors instead of printing or dropping it, and stylex.props()/attrs() join styles compiled elsewhere (a style prop, a spread) at runtime; object, array and TypeScript enum constants (declared in the file or imported) read as if written in place wherever styles are read (css(base), {...base}, _hover: hover, space[2], Size.M, <Box {...base} />), a later property replacing an earlier one as in JavaScript, both in style objects and among JSX props; styles the build cannot read where an object is expected (a spread of an unknown object, a selector given a non-object, a computed key, a non-object globalCss/keyframes argument) are build errors instead of silently missing, a single css()/styled argument that is not a rule object composes as a class, a JSX spread of an object literal keeps its non-style props, a member read such as theme.colors[key] becomes a CSS variable instead of vanishing, and an index or key a spread may supply is read at runtime; values computed from constants through a const or an import, spreads, shorthand properties, computed keys and conditions are computed at build time, with stand-ins for the style packages and for modules the build cannot load; a TypeScript enum no longer crashes stylesheet evaluation; a binding css() or styled() composes that holds rules the module computes (const base = makeStyles(); css(base)) applies those rules, and a class computed in its place is never read as CSS text; build errors name what the build accepts (constants, and values computed from them); source maps point at the code as written when imports were rewritten or values computed in its place; an imported stylesheet runs once per script it evaluates to, and each module is stripped of TypeScript once instead of on every evaluation importing it; css-utils-literal-only accepts what module functions, imports and built-ins compute from constants, and reports Date, Math.random and functions only known at runtime. A runtime value an element holds is written as it is, where it was optimized as CSS text (a string passed to a function lost digits, --i became var(--i)), and every value an element can hold reaches it: await, new, assignments, sequences and tagged templates were dropped. globalCss() used as a value gives undefined instead of invalid code, a condition known only at runtime is a build error in globalCss(), keyframes() and <Global> (it was dropped), and a condition the build knows picks its branch. A JSX spread, a selector prop and a spread, selector or computed key in a styled object compute what the module computes, as do css(...parts) and a template argument of css(); a namespace or object of known classes no longer runs the module; a stylesheet that loops forever fails instead of hanging the build; and css-utils-literal-only accepts the parameters of a callback written in the value. A component with a non-literal as (as={Link}, as={cond ? \"a\" : \"b\"}) is replaced where it stands: in JSX children it replaced its parent element or a later expression and left the component in the output, and in lists it lost its key inside a fragment. A spread whose value may change when read again (<Box {...register(\"email\")} />, a hook) is evaluated once, with the props and children written before it in order, where it was evaluated for the spread, the className and the style; and a literal spread no longer reads className or style it does not write.",
+  "date": "2026-09-27T00:00:00.000Z"
+}

.changepacks/changepack_log_remove_lite_engine.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/next-plugin/package.json": "Patch"
+  },
+  "note": "Remove the lite engine: `@devup-ui/wasm` ships one build that evaluates stylesheets and computed style values, the `@devup-ui/wasm/lite` export is gone, and the Next.js plugin always loads `@devup-ui/wasm` instead of choosing an engine from the project's files",
+  "date": "2026-09-29T00:00:00.000Z"
+}

.changepacks/changepack_log_runtime_value_gaps.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/eslint-plugin/package.json": "Patch"
+  },
+  "note": "Close the gaps left in reading changed objects and the build environment: an object a namespace import or another object holds that code changes is a build error where taken whole instead of silently composed as a class; CommonJS modules, changes to elements in for...of loops and forEach/map callbacks, and methods using this count as changes; export default, module.exports, Object.freeze, Array.from, Object.keys and element props (except ref) only read what they are given, so token objects stay static classes; notes tell a change apart from handing an object on. Values computed at build time never read Intl or locale methods (toLocaleString, toLocaleUpperCase, localeCompare), directly or through a variable or an import, and a value reading a statement that threw or a module the build cannot load is not computed instead of taking a branch on a stand-in. A module checking the environment at its top still gives its other exports, a top-level console call no longer stops a module or a .css.ts stylesheet, and a computed value only reads the modules its code reads. content, font-size-adjust and math-depth keep their numbers instead of scaling them to px. css-utils-literal-only reports a constant or an import the file changes",
+  "date": "2026-09-29T00:00:00.000Z"
+}

.changepacks/changepack_log_strict_build_time_values.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/eslint-plugin/package.json": "Patch"
+  },
+  "note": "Only run build-time code whose result is certain: this file's const, function and enum declarations computing from literals and constants with exact built-ins. Imports are read as the literal, object or array their module declares and another module's code never runs. Other globals, Math.random and approximate Math functions, **, toString with a radix, locale and Unicode methods, this, new, classes, regular expressions, try, getters, async code, generators, JSX, methods chosen at runtime and functions writing module-level bindings are not run: elements and styled() keep such values as CSS variables, css(), globalCss() and keyframes() report a build error, and so do css() and styled() for a whole style computed that way. Constant conditions and &&, || and ?? choose their side in style arguments and props only, so application code keeps reading its bindings. Objects holding booleans, undefined or functions are no longer taken as changed. transition and animation durations and delays are milliseconds instead of spacing (a .css.ts file keeps vanilla-extract's px), and counters keep their numbers. css-utils-literal-only follows the same rules: it reports calls of imported functions and of functions the build does not run, changing elements in for...of loops and forEach/map callbacks, methods using this, and objects handed to unknown code",
+  "date": "2026-09-29T00:00:00.000Z"
+}

.changepacks/changepack_log_style_results_as_values.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/eslint-plugin/package.json": "Patch"
+  },
+  "note": "A const holding what keyframes() or css() gives is a build-time value, so css(), globalCss(), keyframes(), styled(), Global and style props read it, in rule objects and computed selector keys; in CSS text a class stays a mixin. The package imported whole (import * as Devup) compiles Devup.css, Devup.keyframes, Devup.createGlobalStyle, Devup.styled and Devup.Global. styled() renders any base: a member such as motion.div as named, any other value (forwardRef(...), a variable) read once; null, numbers, booleans and undefined, and a styled left uncompiled, are build errors. A top-level alias of a compiled import (const myCss = css, const Row = Flex) compiles and is removed, and any other runtime read of a removed import is a build error instead of a ReferenceError. A selectors key only the runtime knows is a build error instead of a dropped rule. css-utils-literal-only reads css() and keyframes() results held in a module-level const as static",
+  "date": "2026-09-30T00:00:00.000Z"
+}

README.md

@@ -103,7 +103,7 @@ Turbopack values are medians of six cold builds in alternating order:
 | **devup-ui (direct APIs, single CSS)** | 1.0.40  | **5.46s**         | **36,507,782 bytes** |
 | **devup-ui (static `.css.ts`)**        | 1.0.40  | **5.41s**         | 36,586,883 bytes     |
 
-The Turbopack ranges overlap, so the direct-API median is 0.06s (1.1%) ahead but still effectively parity with Tailwind on this fixture. The six cold samples were Tailwind `5.42, 5.56, 5.70, 5.53, 5.41, 5.52s`, direct Devup UI `5.64, 5.40, 5.42, 5.46, 5.54, 5.46s`, and static `.css.ts` `5.42, 5.38, 5.42, 5.47, 5.40, 5.38s`. The fixtures have comparable app shapes, not pixel-identical styling: Tailwind styles the leading paragraph and button more heavily, while Devup UI exercises typed component/style props. Treat these as build-pipeline results rather than a per-rule microbenchmark. The static `.css.ts` row uses the `lite` WASM fast path; dynamic `.css.ts` modules use the full Boa evaluator and are not represented by that median.
+The Turbopack ranges overlap, so the direct-API median is 0.06s (1.1%) ahead but still effectively parity with Tailwind on this fixture. The six cold samples were Tailwind `5.42, 5.56, 5.70, 5.53, 5.41, 5.52s`, direct Devup UI `5.64, 5.40, 5.42, 5.46, 5.54, 5.46s`, and static `.css.ts` `5.42, 5.38, 5.42, 5.47, 5.40, 5.38s`. The fixtures have comparable app shapes, not pixel-identical styling: Tailwind styles the leading paragraph and button more heavily, while Devup UI exercises typed component/style props. Treat these as build-pipeline results rather than a per-rule microbenchmark. The static `.css.ts` row was measured with the former `lite` fast path for static modules; every `.css.ts` module now runs on the full Boa evaluator, which adds about 20 ms for the first module and under 1 ms for each further one.
 
 ## How it works
 

README_ko.md

@@ -103,7 +103,7 @@ Turbopack 값은 실행 순서를 번갈아 측정한 cold build 6회의 중앙
 | **devup-ui (direct APIs, single CSS)** | 1.0.40 | **6.54s**        | **36,519,234 bytes** |
 | **devup-ui (static `.css.ts`)**        | 1.0.40 | **6.47s**        | 36,550,197 bytes     |
 
-Turbopack 측정 범위는 서로 겹치므로 direct API 결과는 이 fixture에서 Tailwind와 사실상 동률입니다. static `.css.ts` 행은 `lite` WASM 빠른 경로를 사용하며, full Boa evaluator가 필요한 dynamic `.css.ts`는 해당 중앙값에 포함되지 않습니다.
+Turbopack 측정 범위는 서로 겹치므로 direct API 결과는 이 fixture에서 Tailwind와 사실상 동률입니다. static `.css.ts` 행은 정적 모듈용 `lite` 빠른 경로가 있던 때에 측정한 값입니다. 지금은 모든 `.css.ts`를 full Boa evaluator로 처리하며, 첫 모듈에 약 20ms, 이후 모듈마다 1ms 미만이 더 듭니다.
 
 ## 작동 원리