Strengthen css-to-rn runtime edge coverage

Author: cray0000

.github/workflows/test.yml

@@ -24,3 +24,12 @@ jobs:
 
     - name: Run tests
       run: yarn test
+
+    - name: Smoke source-condition package imports
+      run: |
+        node -C cssx-ts --input-type=module -e "import { cssx, useCssxLayer } from 'cssxjs'; if (typeof cssx !== 'function' || typeof useCssxLayer !== 'function') throw new Error('cssxjs source-condition import failed')"
+
+    - name: Smoke built package imports
+      run: |
+        yarn workspace @cssxjs/css-to-rn build
+        node --input-type=module -e "import { compileCss, resolveCssx } from '@cssxjs/css-to-rn'; const sheet = compileCss('.root { color: red; }'); const result = resolveCssx({ styleName: 'root', layers: sheet }); if (result.props.style.color !== 'red') throw new Error('built css-to-rn import failed')"

architecture.md

@@ -218,6 +218,13 @@ The sheet must remain serializable. Cache state, subscriptions, and runtime trac
 
 `src/compiler.ts` parses CSS with the lightweight `css` parser. Runtime mode returns an empty diagnostic sheet on syntax errors. Build mode throws for errors that should fail Babel/loader builds.
 
+Build mode validates static declaration values through the shared value resolver
+and property transformer. Unsupported static constructs such as
+layout-dependent `calc()` expressions, unsupported transform functions, and
+unsupported background images fail during Babel/loader compilation.
+Declarations containing `var()` or template slots are deferred to runtime
+validation because their final value is not knowable at build time.
+
 Supported selectors:
 
 - `.root`
@@ -303,12 +310,12 @@ Key pieces:
 - `store.ts`: `variables`, `defaultVariables`, `setDefaultVariables()`, dimensions/media state, microtask-batched notifications.
 - `tracker.ts`: `TrackedCssxSheet`, committed dependency snapshots, per-tracker cache.
 - `cssx.ts`: ergonomic `cssx()` wrapper that delegates to `resolveCssx()` and records dependencies into tracked sheets during render.
-- `hooks.ts`: `useCssxSheet()`, `useCompiledCss()`, `useCssxTemplate()`.
+- `hooks.ts`: `useCssxSheet()`, `useCompiledCss()`, `useCssxTemplate()`, `useCssxLayer()`.
 - `config.ts`: optional `CssxProvider`, `configureCssx()`, and `useCssxConfig()`.
 
 `useCssxSheet()` starts a render-local dependency collection before render and commits it in a layout/effect phase. If a render is aborted, for example because a component throws a promise into Suspense, the pending dependencies are not committed and do not leak global subscriptions.
 
-Variable writes and deletes notify subscribers once per microtask. Subscribers only rerender when a variable they actually used changes. Media and viewport-unit subscribers are tied to dimension changes. Web resize uses leading plus trailing debounced updates.
+Variable writes and deletes notify subscribers once per microtask. Subscribers only rerender when a variable they actually used changes. Viewport-unit subscribers are tied to dimension changes. Media-query dependencies store the match value observed during the committed render; dimension changes and platform media adapter changes only rerender subscribers whose committed media result changed. Browser `matchMedia` is used on web when available, and tests can install a media-query adapter for non-DOM media features such as `prefers-color-scheme`, `hover`, and `pointer`. Web resize uses leading plus trailing debounced updates.
 
 ## Loaders And Separate Files
 
@@ -392,7 +399,7 @@ cd packages/babel-plugin-rn-stylename-to-style && yarn test
 `@cssxjs/css-to-rn` tests:
 
 - `test/engine/**`: parser IR, value resolution, property transforms, resolver cascade, cache behavior.
-- `test/react/**`: variable batching, dependency tracking, aborted-render safety, tracked cache references.
+- `test/react/**`: variable batching, dependency tracking, media adapter invalidation, aborted-render safety, tracked cache references, React 19 hook/Suspense behavior.
 
 Babel plugin tests use `babel-plugin-tester` and Jest snapshots in:
 

docs/guide/caching.md

@@ -76,8 +76,9 @@ variables['--text-color'] = 'red'  // ThemedCard does not update
 ```
 
 Variable notifications are batched in a microtask. Media query updates use the
-runtime dimension store, and web resize handling can be configured globally
-through `configureCssx()`.
+runtime dimension store and browser media listeners when available, so CSSX only
+rerenders components whose committed media result changed. Web resize handling
+can be configured globally through `configureCssx()`.
 
 ```jsx
 import { configureCssx } from 'cssxjs'

example/package.json

@@ -10,11 +10,12 @@
     "@babel/core": "^7.0.0",
     "cssxjs": "^0.3.0",
     "esbuild": "^0.21.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
   },
   "devDependencies": {
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
     "cli-highlight": "^2.1.11"
   }
 }

package.json

@@ -20,15 +20,16 @@
   },
   "devDependencies": {
     "@rspress/core": "^2.0.0",
-    "@types/react": "~18.2.45",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
     "eslint": "^9.39.4",
     "eslint-plugin-cssxjs": "^0.3.0-alpha.0",
     "husky": "^4.3.0",
     "lerna": "^9.0.3",
     "lint-staged": "^15.2.2",
     "neostandard": "^0.13.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "ts-node": "^10.9.2",
     "typescript": "^5.1.3"
   },

packages/css-to-rn/package.json

@@ -65,8 +65,14 @@
     }
   },
   "devDependencies": {
+    "@types/jsdom": "^28.0.3",
     "@types/node": "^22.8.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "^29.1.1",
     "mocha": "^8.4.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "typescript": "^6.0.3"
   },
   "license": "MIT"

packages/css-to-rn/src/compiler.ts

@@ -4,6 +4,8 @@ import valueParser from 'postcss-value-parser'
 import { addDiagnostic, diagnostic } from './diagnostics.ts'
 import { cssxHash } from './hash.ts'
 import { parseSelector } from './selectors.ts'
+import { transformDeclarations } from './transform/index.ts'
+import { resolveCssValue } from './values.ts'
 import type {
   CompileCssOptions,
   CompileCssTemplateOptions,
@@ -13,7 +15,8 @@ import type {
   CssxDiagnostic,
   CssxKeyframe,
   CssxMetadata,
-  CssxRule
+  CssxRule,
+  CssxTarget
 } from './types.ts'
 
 const VAR_RE = /var\(\s*(--[A-Za-z0-9_-]+)/
@@ -93,7 +96,7 @@ function compileCssInternal (
   for (const rule of ast.stylesheet?.rules ?? []) {
     if (rule.type === 'rule') {
       const styleRule = rule as CssStyleRuleAst
-      compileRuleList(styleRule.selectors ?? [], styleRule.declarations ?? [], null, rules, state, orderRef(() => order++), isTemplate, exports)
+      compileRuleList(styleRule.selectors ?? [], styleRule.declarations ?? [], null, rules, state, orderRef(() => order++), isTemplate, exports, options.target)
       continue
     }
 
@@ -104,7 +107,7 @@ function compileCssInternal (
       if (!mediaIsValid && state.mode === 'build') continue
       for (const child of mediaRule.rules ?? []) {
         if (child.type !== 'rule') continue
-        compileRuleList(child.selectors ?? [], child.declarations ?? [], media, rules, state, orderRef(() => order++), isTemplate, exports)
+        compileRuleList(child.selectors ?? [], child.declarations ?? [], media, rules, state, orderRef(() => order++), isTemplate, exports, options.target)
       }
       continue
     }
@@ -113,7 +116,7 @@ function compileCssInternal (
       const keyframesRule = rule as CssKeyframesAst
       const name = keyframesRule.name
       if (!name) continue
-      keyframes[name] = compileKeyframes(keyframesRule, state, orderRef(() => order++), isTemplate)
+      keyframes[name] = compileKeyframes(keyframesRule, state, orderRef(() => order++), isTemplate, options.target)
       continue
     }
 
@@ -149,8 +152,11 @@ function compileRuleList (
   state: CompileState,
   nextOrder: () => number,
   isTemplate: boolean,
-  exports: Record<string, string>
+  exports: Record<string, string>,
+  target: CssxTarget | undefined
 ): void {
+  let compiledDeclarations: CssxDeclaration[] | undefined
+
   for (const selector of selectors) {
     if (selector === ':export') {
       compileExports(declarations, exports, state, isTemplate)
@@ -172,6 +178,7 @@ function compileRuleList (
       continue
     }
     if (!parsed.result) continue
+    compiledDeclarations ??= compileDeclarations(declarations, state, isTemplate, target)
 
     output.push({
       selector: parsed.result.selector,
@@ -180,7 +187,7 @@ function compileRuleList (
       specificity: parsed.result.specificity,
       order: nextOrder(),
       media,
-      declarations: compileDeclarations(declarations, state, isTemplate)
+      declarations: compiledDeclarations
     })
   }
 }
@@ -209,7 +216,8 @@ function compileExports (
 function compileDeclarations (
   declarations: CssDeclarationAst[],
   state: CompileState,
-  isTemplate: boolean
+  isTemplate: boolean,
+  target: CssxTarget | undefined
 ): CssxDeclaration[] {
   const output: CssxDeclaration[] = []
   let order = 0
@@ -231,15 +239,18 @@ function compileDeclarations (
     }
 
     const dynamicSlots = isTemplate ? getDynamicSlots(value) : undefined
-    output.push({
+    const compiledDeclaration: CssxDeclaration = {
       property,
       value,
       raw: `${property}: ${value}`,
       order: order++,
       dynamicSlots,
       line: declaration.position?.start?.line,
       column: declaration.position?.start?.column
-    })
+    }
+
+    validateBuildDeclaration(compiledDeclaration, state, target)
+    output.push(compiledDeclaration)
   }
 
   return output
@@ -249,19 +260,76 @@ function compileKeyframes (
   rule: CssKeyframesAst,
   state: CompileState,
   nextOrder: () => number,
-  isTemplate: boolean
+  isTemplate: boolean,
+  target: CssxTarget | undefined
 ): CssxKeyframe[] {
   const output: CssxKeyframe[] = []
   for (const frame of rule.keyframes ?? []) {
     output.push({
       selector: (frame.values ?? []).join(', '),
-      declarations: compileDeclarations(frame.declarations ?? [], state, isTemplate),
+      declarations: compileDeclarations(frame.declarations ?? [], state, isTemplate, target),
       order: nextOrder()
     })
   }
   return output
 }
 
+function validateBuildDeclaration (
+  declaration: CssxDeclaration,
+  state: CompileState,
+  target: CssxTarget | undefined
+): void {
+  if (state.mode !== 'build') return
+
+  if (
+    declaration.dynamicSlots?.length ||
+    declaration.value.includes('var(')
+  ) {
+    return
+  }
+
+  const position = {
+    line: declaration.line,
+    column: declaration.column
+  }
+  const resolved = resolveCssValue(declaration.value, {
+    dimensions: {
+      width: 100,
+      height: 100
+    }
+  })
+
+  if (!resolved.valid) {
+    for (const item of resolved.diagnostics) {
+      addDiagnostic(state, diagnostic(
+        item.code,
+        item.message,
+        'error',
+        position
+      ))
+    }
+    return
+  }
+
+  const transformed = transformDeclarations([{
+    property: declaration.property,
+    value: resolved.value,
+    raw: `${declaration.property}: ${resolved.value}`,
+    order: declaration.order
+  }], {
+    platform: target ?? 'react-native'
+  })
+
+  for (const item of transformed.diagnostics) {
+    addDiagnostic(state, diagnostic(
+      item.code,
+      item.message,
+      'error',
+      position
+    ))
+  }
+}
+
 function validateMedia (
   rule: CssMediaAst,
   state: CompileState,

packages/css-to-rn/src/index.ts

@@ -37,6 +37,7 @@ export type {
   CssxCache,
   CssxDimensions,
   CssxLayerInput,
+  CssxMediaQueryEvaluator,
   InlineStyleInput,
   ResolveCssxDependencies,
   ResolveCssxLayer,

packages/css-to-rn/src/react-native.ts

@@ -20,6 +20,7 @@ import {
 } from './react/tracker.ts'
 import {
   configureDimensionsAdapter,
+  configureMediaQueryAdapter,
   defaultVariables,
   flushMicrotasksForTests,
   getRuntimeSubscriberCountForTests,
@@ -119,6 +120,7 @@ export function useCssxTemplate (
 export const __cssxInternals = {
   clearRawCssCacheForTests,
   configureDimensionsAdapterForTests: configureDimensionsAdapter,
+  configureMediaQueryAdapterForTests: configureMediaQueryAdapter,
   createTrackedCssxSheet,
   flushMicrotasksForTests,
   getRuntimeSubscriberCountForTests,

packages/css-to-rn/src/react/cssx.ts

@@ -11,6 +11,7 @@ import {
 } from '../resolve.ts'
 import {
   evaluateMediaQuery,
+  getMediaQueryEvaluator,
   getDefaultVariableValues,
   getDimensions,
   getDimensionsVersion,
@@ -67,6 +68,7 @@ export function cssx (
     variables: getVariableValues(),
     defaultVariables: getDefaultVariableValues(),
     dimensions: getDimensions(),
+    mediaQueryEvaluator: getMediaQueryEvaluator(),
     cache: options.cache ?? normalized.cache
   })