Hello
@@ -1190,9 +1163,19 @@ function Test ({ style, active, submit, disabled, titleStyle }) {
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
function Test({ style, active, submit, disabled, titleStyle }) {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
return (
);
@@ -1263,7 +1240,10 @@ const Test = ({ style, layout, cardStyle: myCardStyle, contentStyle, title, ...p
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
const Test = ({
columnStyle: _columnStyle,
@@ -1275,41 +1255,36 @@ const Test = ({
title,
...props
}) => {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
function render() {
return (
);
@@ -1341,7 +1316,10 @@ const Test = ({ style, cardStyle: myCardStyle, contentStyle, title, ...props })
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
const Test = ({
activeStyle: _activeStyle,
@@ -1351,37 +1329,32 @@ const Test = ({
title,
...props
}) => {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
function render() {
return (
);
@@ -1413,7 +1386,10 @@ const Test = ({ style, cardStyle: myCardStyle, contentStyle, title, ...props })
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
const Test = ({
activeStyle: _activeStyle,
@@ -1423,40 +1399,35 @@ const Test = ({
title,
...props
}) => {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
function render() {
return (
);
@@ -1482,12 +1453,12 @@ SyntaxError: unknown file:
'part' attribute only supports literal or string keys in object.
Dynamic keys or spreads are not supported.
-[0m [90m 2 |[39m [36mfunction[39m [33mTest[39m ({ variant }) {
- [90m 3 |[39m [36mreturn[39m (
-[31m[1m>[22m[39m[90m 4 |[39m [33m<[39m[33mCard[39m part[33m=[39m{{[variant][33m:[39m [36mtrue[39m}} [33m/[39m[33m>[39m
- [90m |[39m [31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m
- [90m 5 |[39m )
- [90m 6 |[39m }[0m
+ 2 | function Test ({ variant }) {
+ 3 | return (
+> 4 |
+ | ^^^^^^^^^^^^^^^
+ 5 | )
+ 6 | }
`;
@@ -1505,12 +1476,12 @@ function Test ({ variant }) {
SyntaxError: unknown file:
'part' attribute only supports static strings or objects inside an array.
-[0m [90m 2 |[39m [36mfunction[39m [33mTest[39m ({ variant }) {
- [90m 3 |[39m [36mreturn[39m (
-[31m[1m>[22m[39m[90m 4 |[39m [33m<[39m[33mCard[39m part[33m=[39m{[[32m'card'[39m[33m,[39m variant]} [33m/[39m[33m>[39m
- [90m |[39m [31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m
- [90m 5 |[39m )
- [90m 6 |[39m }[0m
+ 2 | function Test ({ variant }) {
+ 3 | return (
+> 4 |
+ | ^^^^^^^
+ 5 | )
+ 6 | }
`;
@@ -1533,12 +1504,12 @@ SyntaxError: unknown file:
Basically the rule is that the name of the part must be static so that
it is possible to determine at compile time which parts are being used.
-[0m [90m 2 |[39m [36mfunction[39m [33mTest[39m ({ variant }) {
- [90m 3 |[39m [36mreturn[39m (
-[31m[1m>[22m[39m[90m 4 |[39m [33m<[39m[33mCard[39m part[33m=[39m{variant} [33m/[39m[33m>[39m
- [90m |[39m [31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m[31m[1m^[22m[39m
- [90m 5 |[39m )
- [90m 6 |[39m }[0m
+ 2 | function Test ({ variant }) {
+ 3 | return (
+> 4 |
+ | ^^^^^^^^^^^^^^
+ 5 | )
+ 6 | }
`;
@@ -1560,7 +1531,10 @@ function Test ({ title, style, ...props }) {
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
function Test({
activeStyle: _activeStyle,
@@ -1569,36 +1543,31 @@ function Test({
style,
...props
}) {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
return (
);
@@ -1625,7 +1594,10 @@ function Test ({ title, ...props }) {
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
function Test({
activeStyle: _activeStyle,
@@ -1634,36 +1606,31 @@ function Test({
title,
...props
}) {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
return (
);
@@ -1695,48 +1662,46 @@ function Test () {
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
function Test(_props) {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
return (
+
-
);
@@ -1766,7 +1731,10 @@ const Test = ({ style, cardStyle: myCardStyle, contentStyle, title, ...props })
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
const Test = ({
activeStyle: _activeStyle,
@@ -1776,37 +1744,32 @@ const Test = ({
title,
...props
}) => {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
function render() {
return (
);
@@ -1835,7 +1798,10 @@ function Test ({ style, cardStyle, title, ...props }) {
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
function Test({
activeStyle: _activeStyle,
@@ -1845,36 +1811,31 @@ function Test({
title,
...props
}) {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
return (
);
@@ -1901,39 +1862,37 @@ function Test (props) {
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
function Test(props) {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
return (
);
@@ -1968,7 +1927,10 @@ const Test = ({ style, active, variant, cardStyle: myCardStyle, contentStyle, ti
↓ ↓ ↓ ↓ ↓ ↓
import _css from "./index.styl";
-import { runtime as _runtime } from "cssxjs/runtime";
+import {
+ runtime as _runtime,
+ useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
const _cssx = _runtime;
const Test = ({
style,
@@ -1979,26 +1941,27 @@ const Test = ({
title,
...props
}) => {
+ const _local = _useCssxLayer(
+ typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+ );
+ const _global = _useCssxLayer(
+ typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+ );
+ const _file__css = _useCssxLayer(_css);
function render() {
return (
diff --git a/packages/babel-plugin-rn-stylename-to-style/__tests__/index.spec.js b/packages/babel-plugin-rn-stylename-to-style/__tests__/index.spec.js
index 4648421..c86cc89 100644
--- a/packages/babel-plugin-rn-stylename-to-style/__tests__/index.spec.js
+++ b/packages/babel-plugin-rn-stylename-to-style/__tests__/index.spec.js
@@ -119,6 +119,20 @@ pluginTester({
)
}
`,
+ 'Local css interpolation after hook': /* js */`
+ import { useThemeColor } from './theme'
+ import { View } from 'react-native'
+
+ function Card ({ ready, pad }) {
+ const color = useThemeColor('primary')
+ const __CSS_LOCAL__ = {
+ sheet: _localCssInstance,
+ values: [color, pad]
+ }
+ if (!ready) return
+ return
+ }
+ `,
'Puts compiled attribute to the end of attributes list': /* js */`
import './index.styl'
function Test ({ style, active, submit, disabled }) {
diff --git a/packages/babel-plugin-rn-stylename-to-style/index.js b/packages/babel-plugin-rn-stylename-to-style/index.js
index 9ba95bc..35671ab 100644
--- a/packages/babel-plugin-rn-stylename-to-style/index.js
+++ b/packages/babel-plugin-rn-stylename-to-style/index.js
@@ -3,7 +3,6 @@ const fs = require('fs')
const t = require('@babel/types')
const template = require('@babel/template').default
const parser = require('@babel/parser')
-const { GLOBAL_NAME, LOCAL_NAME } = require('@cssxjs/runtime/constants')
const { addNamed } = require('@babel/helper-module-imports')
const COMPILERS = require('@cssxjs/loaders/compilers')
@@ -14,7 +13,10 @@ const STYLE_NAME_REGEX = /(?:^s|S)tyleName$/
const STYLE_REGEX = /(?:^s|S)tyle$/
const ROOT_STYLE_PROP_NAME = 'style'
const RUNTIME_IMPORT_NAME = 'runtime'
+const RUNTIME_LAYER_HOOK_NAME = 'useCssxLayer'
const RUNTIME_FRIENDLY_NAME = 'cssx'
+const GLOBAL_NAME = '__CSS_GLOBAL__'
+const LOCAL_NAME = '__CSS_LOCAL__'
const OPTIONS_CACHE = ['teamplay']
const OPTIONS_REACT_TYPES = ['react-native', 'web']
const DEFAULT_MAGIC_IMPORTS = ['cssxjs', 'startupjs']
@@ -41,6 +43,7 @@ module.exports = function (babel) {
let $program
let usedCompilers
let runtime
+ let useCssxLayer
function getOrCreateRuntime (state) {
if (runtime) return runtime
@@ -68,15 +71,42 @@ module.exports = function (babel) {
return runtime
}
- function getStyleFromExpression (expression, state) {
+ function getOrCreateUseCssxLayer (state) {
+ if (useCssxLayer) return useCssxLayer
+ const runtimePath = getRuntimePath($program, state, hasObserver)
+ useCssxLayer = addNamedImport($program, RUNTIME_LAYER_HOOK_NAME, runtimePath)
+ return useCssxLayer
+ }
+
+ function getStyleFromExpression ($path, expression, state) {
const cssStyles = cssIdentifier.name
const processCall = t.callExpression(
getOrCreateRuntime(state),
- [expression, t.identifier(cssStyles)]
+ [
+ expression,
+ getTrackedLayer($path, state, t.identifier(cssStyles), `file:${cssStyles}`)
+ ]
)
return processCall
}
+ function getTrackedLayer ($path, state, expression, key) {
+ const $fnComponent = findReactFnComponent($path)
+ if (!$fnComponent) return expression
+
+ const dataKey = `cssxTrackedLayer:${key}`
+ const existing = $fnComponent.getData(dataKey)
+ if (existing) return t.identifier(existing)
+
+ const identifier = $fnComponent.scope.generateUidIdentifier(key.replace(/[^a-zA-Z0-9_$]/g, '_'))
+ $fnComponent.setData(dataKey, identifier.name)
+ insertIntoFunctionBody($fnComponent, buildConst({
+ variable: identifier,
+ value: t.callExpression(getOrCreateUseCssxLayer(state), [expression])
+ }))
+ return identifier
+ }
+
function addPartStyleToProps ($jsxAttribute) {
const parts = getParts($jsxAttribute.get('value'))
const $fnComponent = findReactFnComponent($jsxAttribute)
@@ -139,9 +169,9 @@ module.exports = function (babel) {
const partStyle = styleHash[ROOT_STYLE_PROP_NAME]?.partStyle
const inlineStyles = []
- // Always process if 'observer' import is found in the file
- // which is needed for styles caching.
- // Otherwise, if no 'observer' found and no 'styleName' or 'part' found then skip
+ // Keep old observer-triggered behavior for files that relied on cached
+ // inline style prop normalization without styleName/part attributes.
+ // Normal styleName handling does not require observer().
if (!(hasObserver || styleName || partStyle)) return
// Check if styleName exists and if it can be processed
@@ -193,10 +223,25 @@ module.exports = function (babel) {
)
: t.stringLiteral(''),
cssIdentifier
- ? t.identifier(cssIdentifier.name)
+ ? getTrackedLayer(
+ jsxOpeningElementPath,
+ state,
+ t.identifier(cssIdentifier.name),
+ `file:${cssIdentifier.name}`
+ )
: t.objectExpression([]),
- buildSafeVar({ variable: t.identifier(GLOBAL_NAME) }),
- buildSafeVar({ variable: t.identifier(LOCAL_NAME) }),
+ getTrackedLayer(
+ jsxOpeningElementPath,
+ state,
+ buildSafeVar({ variable: t.identifier(GLOBAL_NAME) }),
+ 'global'
+ ),
+ getTrackedLayer(
+ jsxOpeningElementPath,
+ state,
+ buildSafeVar({ variable: t.identifier(LOCAL_NAME) }),
+ 'local'
+ ),
t.objectExpression(inlineStyles)
]
)
@@ -237,11 +282,11 @@ module.exports = function (babel) {
if (t.isStringLiteral(styleName.node.value)) {
expressions = [
- getStyleFromExpression(styleName.node.value, state)
+ getStyleFromExpression(styleName, styleName.node.value, state)
]
} else if (t.isJSXExpressionContainer(styleName.node.value)) {
expressions = [
- getStyleFromExpression(styleName.node.value.expression, state)
+ getStyleFromExpression(styleName, styleName.node.value.expression, state)
]
}
@@ -276,6 +321,7 @@ module.exports = function (babel) {
$program = undefined
usedCompilers = undefined
runtime = undefined
+ useCssxLayer = undefined
},
visitor: {
Program: {
@@ -417,10 +463,25 @@ module.exports = function (babel) {
? $this.get('arguments.0').node
: t.stringLiteral(''),
cssIdentifier
- ? t.identifier(cssIdentifier.name)
+ ? getTrackedLayer(
+ $this,
+ state,
+ t.identifier(cssIdentifier.name),
+ `file:${cssIdentifier.name}`
+ )
: t.objectExpression([]),
- buildSafeVar({ variable: t.identifier(GLOBAL_NAME) }),
- buildSafeVar({ variable: t.identifier(LOCAL_NAME) }),
+ getTrackedLayer(
+ $this,
+ state,
+ buildSafeVar({ variable: t.identifier(GLOBAL_NAME) }),
+ 'global'
+ ),
+ getTrackedLayer(
+ $this,
+ state,
+ buildSafeVar({ variable: t.identifier(LOCAL_NAME) }),
+ 'local'
+ ),
$this.get('arguments.1')
? $this.get('arguments.1').node
: t.objectExpression([])
@@ -520,7 +581,8 @@ function buildDynamicPart (expr, part) {
}
}
-// if cache is 'teamplay'
+// Legacy cache compatibility: observer imports still select the old
+// cssxjs/runtime/*-teamplay entrypoints, which now wrap the unified runtime.
function checkObserverImport ($import, state) {
const observerImports = state.opts.observerImports || DEFAULT_OBSERVER_IMPORTS
const observerName = state.opts.observerName || DEFAULT_OBSERVER_NAME
@@ -586,8 +648,8 @@ function getRuntimePath ($node, state, hasObserver) {
`Invalid cache option value: "${cache}". Supported values: ${OPTIONS_CACHE.join(', ')}`
)
}
- // If observer() is used in this file then we force cache to 'teamplay'
- // TODO: this is a bit of a hack, think of a better way to do this
+ // Preserve the old import path shape for codebases that still use observer().
+ // The runtime behind that path no longer imports Teamplay.
if (!cache && hasObserver) cache = 'teamplay'
const reactType = state.opts.reactType
if (reactType && !OPTIONS_REACT_TYPES.includes(reactType)) {
@@ -614,6 +676,31 @@ function addNamedImport ($program, name, sourceName) {
})
}
+function insertIntoFunctionBody ($function, statement) {
+ const $body = $function.get('body')
+ if (!$body.isBlockStatement()) {
+ $body.replaceWith(t.blockStatement([
+ t.returnStatement($body.node)
+ ]))
+ }
+
+ const body = $function.get('body')
+ const statements = body.get('body')
+ const localCssDeclaration = statements.find($statement => {
+ if (!$statement.isVariableDeclaration()) return false
+ return $statement.node.declarations.some(declaration => (
+ t.isIdentifier(declaration.id) &&
+ declaration.id.name === LOCAL_NAME
+ ))
+ })
+
+ if (localCssDeclaration) {
+ localCssDeclaration.insertAfter(statement)
+ } else {
+ body.unshiftContainer('body', statement)
+ }
+}
+
function insertAfterImports ($program, expressionStatement) {
const lastImport = $program
.get('body')
diff --git a/packages/babel-plugin-rn-stylename-to-style/package.json b/packages/babel-plugin-rn-stylename-to-style/package.json
index de3874e..e45ceb5 100644
--- a/packages/babel-plugin-rn-stylename-to-style/package.json
+++ b/packages/babel-plugin-rn-stylename-to-style/package.json
@@ -14,7 +14,7 @@
],
"main": "index.js",
"scripts": {
- "test": "jest"
+ "test": "NO_COLOR=1 FORCE_COLOR=0 jest"
},
"author": "Pavel Zhukov",
"license": "MIT",
@@ -26,8 +26,7 @@
"@babel/helper-module-imports": "^7.0.0",
"@babel/parser": "^7.0.0",
"@babel/template": "^7.4.0",
- "@babel/types": "^7.0.0",
- "@cssxjs/runtime": "^0.3.0"
+ "@babel/types": "^7.0.0"
},
"devDependencies": {
"@babel/plugin-syntax-jsx": "^7.0.0",
diff --git a/packages/babel-preset-cssxjs/index.js b/packages/babel-preset-cssxjs/index.js
index cb5d9a5..b0ef840 100644
--- a/packages/babel-preset-cssxjs/index.js
+++ b/packages/babel-preset-cssxjs/index.js
@@ -2,8 +2,8 @@
// On React Native this should be passed.
// reactType - force the React target platform (e.g. 'react-native', 'web'). Default: undefined.
// This shouldn't be needed in most cases since it will be automatically detected.
-// cache - force the CSS caching library instance (e.g. 'teamplay'). Default: undefined
-// This shouldn't be needed in most cases since it will be automatically detected.
+// cache - legacy compatibility option. 'teamplay' is still accepted but caching
+// is owned by cssxjs internally.
module.exports = (api, {
platform,
reactType,
@@ -45,6 +45,7 @@ module.exports = (api, {
transformCss && [require('@cssxjs/babel-plugin-rn-stylename-to-style'), {
useImport: true,
reactType,
+ platform,
cache
}]
].filter(Boolean)
diff --git a/packages/css-to-rn/package.json b/packages/css-to-rn/package.json
new file mode 100644
index 0000000..6f839b7
--- /dev/null
+++ b/packages/css-to-rn/package.json
@@ -0,0 +1,79 @@
+{
+ "name": "@cssxjs/css-to-rn",
+ "version": "0.3.0",
+ "description": "Unified CSS to React Native style compiler and runtime resolver for CSSX",
+ "type": "module",
+ "main": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "exports": {
+ ".": {
+ "cssx-ts": "./src/index.ts",
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.js"
+ },
+ "./react": {
+ "react-native": {
+ "cssx-ts": "./src/react-native.ts",
+ "types": "./dist/react-native.d.ts",
+ "default": "./dist/react-native.js"
+ },
+ "cssx-ts": "./src/web.ts",
+ "types": "./dist/web.d.ts",
+ "default": "./dist/web.js"
+ },
+ "./react-native": {
+ "cssx-ts": "./src/react-native.ts",
+ "types": "./dist/react-native.d.ts",
+ "default": "./dist/react-native.js"
+ },
+ "./web": {
+ "cssx-ts": "./src/web.ts",
+ "types": "./dist/web.d.ts",
+ "default": "./dist/web.js"
+ }
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "scripts": {
+ "test": "npm run test:engine && npm run test:react && npm run test:types",
+ "test:engine": "NODE_OPTIONS=\"${NODE_OPTIONS:-} -C cssx-ts\" mocha 'test/engine/**/*.test.ts'",
+ "test:react": "NODE_OPTIONS=\"${NODE_OPTIONS:-} -C cssx-ts\" mocha 'test/react/**/*.test.ts'",
+ "test:types": "tsc -p tsconfig.json --noEmit",
+ "build": "rm -rf dist && tsc -p tsconfig.build.json",
+ "prepublishOnly": "npm run build"
+ },
+ "files": [
+ "dist",
+ "src"
+ ],
+ "dependencies": {
+ "css": "^3.0.0",
+ "css-mediaquery": "^0.1.2",
+ "postcss-value-parser": "^4.2.0"
+ },
+ "peerDependencies": {
+ "react": "*",
+ "react-native": "*"
+ },
+ "peerDependenciesMeta": {
+ "react": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ }
+ },
+ "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"
+}
diff --git a/packages/css-to-rn/src/compiler.ts b/packages/css-to-rn/src/compiler.ts
new file mode 100644
index 0000000..dc74647
--- /dev/null
+++ b/packages/css-to-rn/src/compiler.ts
@@ -0,0 +1,519 @@
+import parseCss from 'css/lib/parse/index.js'
+import mediaQuery from 'css-mediaquery'
+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,
+ CompileState,
+ CompiledCssSheet,
+ CssxDeclaration,
+ CssxDiagnostic,
+ CssxKeyframe,
+ CssxMetadata,
+ CssxRule,
+ CssxTarget
+} from './types.ts'
+
+const VAR_RE = /var\(\s*(--[A-Za-z0-9_-]+)/
+const VIEWPORT_UNIT_RE = /(?:^|[^\w-])[-+]?(?:\d*\.)?\d+(?:vh|vw|vmin|vmax)\b/
+const DYNAMIC_SLOT_RE = /var\(\s*--__cssx_dynamic_(\d+)\b/g
+const ANIMATION_PROPS = new Set([
+ 'animation',
+ 'animation-name',
+ 'animation-duration',
+ 'animation-timing-function',
+ 'animation-delay',
+ 'animation-iteration-count',
+ 'animation-direction',
+ 'animation-fill-mode',
+ 'animation-play-state'
+])
+const TRANSITION_PROPS = new Set([
+ 'transition',
+ 'transition-property',
+ 'transition-duration',
+ 'transition-timing-function',
+ 'transition-delay'
+])
+
+export function compileCss (css: string, options: CompileCssOptions = {}): CompiledCssSheet {
+ return compileCssInternal(css, options)
+}
+
+export function compileCssTemplate (
+ css: string,
+ options: CompileCssTemplateOptions = {}
+): CompiledCssSheet {
+ return compileCssInternal(css, {
+ ...options,
+ sourceIdentity: options.sourceIdentity ?? options.id
+ }, true)
+}
+
+function compileCssInternal (
+ css: string,
+ options: CompileCssOptions,
+ isTemplate = false
+): CompiledCssSheet {
+ const mode = options.mode ?? 'runtime'
+ const state: CompileState = { mode, diagnostics: [] }
+ const contentHash = options.contentHash ?? cssxHash(css)
+ const sourceId = options.sourceId ?? (options.sourceIdentity ? cssxHash(options.sourceIdentity) : undefined)
+ const id = options.id ?? cssxHash(`${sourceId ?? 'runtime'}:${contentHash}`)
+ const empty = (): CompiledCssSheet => createSheet({
+ id,
+ sourceId,
+ contentHash,
+ diagnostics: state.diagnostics,
+ error: state.diagnostics.find(item => item.level === 'error')
+ })
+
+ let ast: CssAst
+ try {
+ ast = parseCss(css, { silent: false }) as CssAst
+ } catch (error) {
+ const err = error as Error & { line?: number, column?: number, reason?: string }
+ const item = diagnostic(
+ 'CSS_SYNTAX_ERROR',
+ err.reason ?? err.message,
+ 'error',
+ { line: err.line, column: err.column }
+ )
+ addDiagnostic(state, item)
+ return empty()
+ }
+
+ const rules: CssxRule[] = []
+ const keyframes: Record = {}
+ const exports: Record = {}
+ let order = 0
+
+ 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, options.target)
+ continue
+ }
+
+ if (rule.type === 'media') {
+ const mediaRule = rule as CssMediaAst
+ const media = `@media ${mediaRule.media ?? ''}`.trim()
+ const mediaIsValid = validateMedia(mediaRule, state, isTemplate)
+ 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, options.target)
+ }
+ continue
+ }
+
+ if (rule.type === 'keyframes') {
+ const keyframesRule = rule as CssKeyframesAst
+ const name = keyframesRule.name
+ if (!name) continue
+ keyframes[name] = compileKeyframes(keyframesRule, state, orderRef(() => order++), isTemplate, options.target)
+ continue
+ }
+
+ if (rule.type !== 'comment') {
+ addDiagnostic(state, diagnostic(
+ 'UNSUPPORTED_AT_RULE',
+ `Unsupported at-rule or CSS rule type "${rule.type}" ignored.`,
+ 'warning',
+ positionOf(rule)
+ ))
+ }
+ }
+
+ const metadata = buildMetadata(rules, keyframes, isTemplate)
+ return createSheet({
+ id,
+ sourceId,
+ contentHash,
+ rules,
+ keyframes,
+ exports: Object.keys(exports).length > 0 ? exports : undefined,
+ metadata,
+ diagnostics: state.diagnostics,
+ error: state.diagnostics.find(item => item.level === 'error')
+ })
+}
+
+function compileRuleList (
+ selectors: string[],
+ declarations: CssDeclarationAst[],
+ media: string | null,
+ output: CssxRule[],
+ state: CompileState,
+ nextOrder: () => number,
+ isTemplate: boolean,
+ exports: Record,
+ target: CssxTarget | undefined
+): void {
+ let compiledDeclarations: CssxDeclaration[] | undefined
+
+ for (const selector of selectors) {
+ if (selector === ':export') {
+ compileExports(declarations, exports, state, isTemplate)
+ continue
+ }
+
+ if (selector.trim().startsWith(':root')) {
+ addDiagnostic(state, diagnostic(
+ 'UNSUPPORTED_SELECTOR',
+ `Unsupported selector "${selector}" ignored. Use setDefaultVariables() for CSS variable defaults.`,
+ 'warning'
+ ))
+ continue
+ }
+
+ const parsed = parseSelector(selector, positionOfDeclarationList(declarations))
+ if (parsed.diagnostic) {
+ addDiagnostic(state, parsed.diagnostic)
+ continue
+ }
+ if (!parsed.result) continue
+ compiledDeclarations ??= compileDeclarations(declarations, state, isTemplate, target)
+
+ output.push({
+ selector: parsed.result.selector,
+ classes: parsed.result.classes,
+ part: parsed.result.part,
+ specificity: parsed.result.specificity,
+ order: nextOrder(),
+ media,
+ declarations: compiledDeclarations
+ })
+ }
+}
+
+function compileExports (
+ declarations: CssDeclarationAst[],
+ exports: Record,
+ state: CompileState,
+ isTemplate: boolean
+): void {
+ for (const declaration of declarations) {
+ if (declaration.type !== 'declaration') continue
+ if (isTemplate && hasDynamicSlots(declaration.value ?? '')) {
+ addDiagnostic(state, diagnostic(
+ 'UNSUPPORTED_INTERPOLATION_POSITION',
+ 'Interpolation is not supported inside :export blocks.',
+ 'error',
+ positionOf(declaration)
+ ))
+ continue
+ }
+ if (declaration.property) exports[declaration.property] = declaration.value ?? ''
+ }
+}
+
+function compileDeclarations (
+ declarations: CssDeclarationAst[],
+ state: CompileState,
+ isTemplate: boolean,
+ target: CssxTarget | undefined
+): CssxDeclaration[] {
+ const output: CssxDeclaration[] = []
+ let order = 0
+
+ for (const declaration of declarations) {
+ if (declaration.type !== 'declaration') continue
+ const property = declaration.property
+ const value = declaration.value ?? ''
+ if (!property) continue
+
+ if (property.startsWith('--')) {
+ addDiagnostic(state, diagnostic(
+ 'INVALID_DECLARATION',
+ `CSS custom property declaration "${property}" ignored. Use variables or setDefaultVariables() instead.`,
+ 'warning',
+ positionOf(declaration)
+ ))
+ continue
+ }
+
+ const dynamicSlots = isTemplate ? getDynamicSlots(value) : undefined
+ 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
+}
+
+function compileKeyframes (
+ rule: CssKeyframesAst,
+ state: CompileState,
+ nextOrder: () => number,
+ 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, 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,
+ isTemplate: boolean
+): boolean {
+ if (isTemplate && hasDynamicSlots(rule.media ?? '')) {
+ addDiagnostic(state, diagnostic(
+ 'UNSUPPORTED_INTERPOLATION_POSITION',
+ 'Interpolation is not supported inside media queries.',
+ 'error',
+ positionOf(rule)
+ ))
+ return false
+ }
+
+ try {
+ mediaQuery.parse(rule.media ?? '')
+ return true
+ } catch (error) {
+ addDiagnostic(state, diagnostic(
+ 'UNSUPPORTED_AT_RULE',
+ `Unsupported media query "${rule.media ?? ''}" ignored: ${(error as Error).message}`,
+ 'warning',
+ positionOf(rule)
+ ))
+ return false
+ }
+}
+
+function buildMetadata (
+ rules: CssxRule[],
+ keyframes: Record,
+ isTemplate: boolean
+): CssxMetadata {
+ const vars = new Set()
+ let hasMedia = false
+ let hasViewportUnits = false
+ let hasAnimations = Object.keys(keyframes).length > 0
+ let hasTransitions = false
+ let hasInterpolations = isTemplate
+
+ for (const rule of rules) {
+ if (rule.media) hasMedia = true
+ scanDeclarations(rule.declarations)
+ }
+ for (const frames of Object.values(keyframes)) {
+ for (const frame of frames) scanDeclarations(frame.declarations)
+ }
+
+ function scanDeclarations (declarations: CssxDeclaration[]): void {
+ for (const declaration of declarations) {
+ collectVars(declaration.value, vars)
+ if (VIEWPORT_UNIT_RE.test(declaration.value)) hasViewportUnits = true
+ if (ANIMATION_PROPS.has(declaration.property)) hasAnimations = true
+ if (TRANSITION_PROPS.has(declaration.property)) hasTransitions = true
+ if (declaration.dynamicSlots && declaration.dynamicSlots.length > 0) hasInterpolations = true
+ }
+ }
+
+ return {
+ hasVars: vars.size > 0,
+ vars: Array.from(vars).sort(),
+ hasMedia,
+ hasViewportUnits,
+ hasInterpolations,
+ hasDynamicRuntimeDependencies: vars.size > 0 || hasMedia || hasViewportUnits || hasInterpolations,
+ hasAnimations,
+ hasTransitions
+ }
+}
+
+function collectVars (value: string, vars: Set): void {
+ const parsed = valueParser(value)
+ parsed.walk(node => {
+ if (node.type !== 'function' || node.value !== 'var') return
+ const first = node.nodes.find(child => child.type === 'word')
+ if (first?.value && VAR_RE.test(`var(${first.value})`)) vars.add(first.value)
+ })
+}
+
+function getDynamicSlots (value: string): number[] | undefined {
+ const slots: number[] = []
+ DYNAMIC_SLOT_RE.lastIndex = 0
+ let match: RegExpExecArray | null
+ while ((match = DYNAMIC_SLOT_RE.exec(value)) != null) {
+ slots.push(Number(match[1]))
+ }
+ return slots.length > 0 ? slots : undefined
+}
+
+function hasDynamicSlots (value: string): boolean {
+ DYNAMIC_SLOT_RE.lastIndex = 0
+ return DYNAMIC_SLOT_RE.test(value)
+}
+
+function createSheet (input: Partial & {
+ id: string
+ contentHash: string
+ diagnostics: CssxDiagnostic[]
+}): CompiledCssSheet {
+ return {
+ version: 1,
+ id: input.id,
+ sourceId: input.sourceId,
+ contentHash: input.contentHash,
+ rules: input.rules ?? [],
+ keyframes: input.keyframes ?? {},
+ exports: input.exports,
+ metadata: input.metadata ?? {
+ hasVars: false,
+ vars: [],
+ hasMedia: false,
+ hasViewportUnits: false,
+ hasInterpolations: false,
+ hasDynamicRuntimeDependencies: false,
+ hasAnimations: false,
+ hasTransitions: false
+ },
+ diagnostics: input.diagnostics,
+ error: input.error
+ }
+}
+
+function orderRef (next: () => number): () => number {
+ return next
+}
+
+function positionOf (node: CssPositioned): { line?: number, column?: number } {
+ return {
+ line: node.position?.start?.line,
+ column: node.position?.start?.column
+ }
+}
+
+function positionOfDeclarationList (declarations: CssDeclarationAst[]): { line?: number, column?: number } | undefined {
+ const first = declarations.find(item => item.position)
+ return first ? positionOf(first) : undefined
+}
+
+interface CssAst {
+ stylesheet?: {
+ rules?: CssRuleAst[]
+ }
+}
+
+type CssRuleAst = CssStyleRuleAst | CssMediaAst | CssKeyframesAst | CssUnsupportedAst
+
+interface CssPositioned {
+ position?: {
+ start?: {
+ line?: number
+ column?: number
+ }
+ }
+}
+
+interface CssStyleRuleAst extends CssPositioned {
+ type: 'rule'
+ selectors?: string[]
+ declarations?: CssDeclarationAst[]
+}
+
+interface CssMediaAst extends CssPositioned {
+ type: 'media'
+ media?: string
+ rules?: CssStyleRuleAst[]
+}
+
+interface CssKeyframesAst extends CssPositioned {
+ type: 'keyframes'
+ name?: string
+ keyframes?: Array
+}
+
+interface CssDeclarationAst extends CssPositioned {
+ type: 'declaration' | string
+ property?: string
+ value?: string
+}
+
+interface CssUnsupportedAst extends CssPositioned {
+ type: string
+}
diff --git a/packages/css-to-rn/src/diagnostics.ts b/packages/css-to-rn/src/diagnostics.ts
new file mode 100644
index 0000000..3db8892
--- /dev/null
+++ b/packages/css-to-rn/src/diagnostics.ts
@@ -0,0 +1,24 @@
+import type { CompileState, CssxDiagnostic, CssxDiagnosticCode, CssxDiagnosticLevel } from './types.ts'
+
+export function diagnostic (
+ code: CssxDiagnosticCode,
+ message: string,
+ level: CssxDiagnosticLevel = 'warning',
+ position?: { line?: number, column?: number }
+): CssxDiagnostic {
+ return {
+ level,
+ code,
+ message,
+ line: position?.line,
+ column: position?.column
+ }
+}
+
+export function addDiagnostic (state: CompileState, item: CssxDiagnostic): void {
+ state.diagnostics.push(item)
+ if (state.mode === 'build' && item.level === 'error') {
+ const location = item.line == null ? '' : ` (${item.line}:${item.column ?? 1})`
+ throw new Error(`[cssx] ${item.code}${location}: ${item.message}`)
+ }
+}
diff --git a/packages/css-to-rn/src/hash.ts b/packages/css-to-rn/src/hash.ts
new file mode 100644
index 0000000..9c7a70d
--- /dev/null
+++ b/packages/css-to-rn/src/hash.ts
@@ -0,0 +1,11 @@
+// ref: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0
+export function simpleNumericHash (value: string): number {
+ let i = 0
+ let h = 0
+ for (; i < value.length; i++) h = Math.imul(31, h) + value.charCodeAt(i) | 0
+ return h
+}
+
+export function cssxHash (value: string): string {
+ return `cssx_${Math.abs(simpleNumericHash(value)).toString(36)}`
+}
diff --git a/packages/css-to-rn/src/index.ts b/packages/css-to-rn/src/index.ts
new file mode 100644
index 0000000..b3420ca
--- /dev/null
+++ b/packages/css-to-rn/src/index.ts
@@ -0,0 +1,48 @@
+export {
+ compileCss,
+ compileCssTemplate
+} from './compiler.ts'
+export {
+ cssxHash,
+ simpleNumericHash
+} from './hash.ts'
+export {
+ resolveCssValue
+} from './values.ts'
+export {
+ createCssxCache,
+ cssx,
+ resolveCssx
+} from './resolve.ts'
+
+export type {
+ CompileCssOptions,
+ CompileCssTemplateOptions,
+ CompileMode,
+ CompiledCssSheet,
+ CssxDeclaration,
+ CssxDiagnostic,
+ CssxDiagnosticCode,
+ CssxKeyframe,
+ CssxMetadata,
+ CssxRule,
+ CssxTarget
+} from './types.ts'
+export type {
+ InterpolationValue,
+ ResolveCssValueOptions,
+ ResolveCssValueResult
+} from './values.ts'
+export type {
+ CssxCache,
+ CssxDimensions,
+ CssxLayerInput,
+ CssxMediaQueryEvaluator,
+ InlineStyleInput,
+ ResolveCssxDependencies,
+ ResolveCssxLayer,
+ ResolveCssxOptions,
+ ResolveCssxResult,
+ ResolvedStyleProps,
+ StyleNameValue
+} from './resolve.ts'
diff --git a/packages/css-to-rn/src/react-native.ts b/packages/css-to-rn/src/react-native.ts
new file mode 100644
index 0000000..cfe7d9b
--- /dev/null
+++ b/packages/css-to-rn/src/react-native.ts
@@ -0,0 +1,148 @@
+export {
+ compileCss,
+ compileCssTemplate
+} from './compiler.ts'
+export {
+ resolveCssValue
+} from './values.ts'
+import {
+ cssx as baseCssx,
+ clearRawCssCacheForTests
+} from './react/cssx.ts'
+import {
+ useCssxLayer as baseUseCssxLayer,
+ useRuntimeCss as baseUseRuntimeCss,
+ useCssxSheet as baseUseCssxSheet,
+ useCssxTemplate as baseUseCssxTemplate
+} from './react/hooks.ts'
+import {
+ createTrackedCssxSheet
+} from './react/tracker.ts'
+import {
+ configureDimensionsAdapter,
+ configureMediaQueryAdapter,
+ defaultVariables,
+ flushMicrotasksForTests,
+ getRuntimeSubscriberCountForTests,
+ resetStoreForTests,
+ setDefaultVariables,
+ setDimensionsForTests,
+ subscribeVariablesForTests,
+ variables
+} from './react/store.ts'
+import { Dimensions } from 'react-native'
+
+export type {
+ CompileCssOptions,
+ CompileCssTemplateOptions,
+ CompiledCssSheet
+} from './types.ts'
+export type {
+ CssxResolvedProps,
+ CssxRuntimeOptions,
+ CssxStyleName
+} from './react/cssx.ts'
+export type {
+ CssxProviderProps,
+ CssxReactConfig
+} from './react/config.ts'
+export type {
+ TrackedCssxSheetOptions
+} from './react/tracker.ts'
+
+export {
+ CssxProvider,
+ configureCssx,
+ useCssxConfig
+} from './react/config.ts'
+export {
+ TrackedCssxSheet,
+ isTrackedCssxSheet
+} from './react/tracker.ts'
+export {
+ defaultVariables,
+ setDefaultVariables,
+ variables
+}
+
+installReactNativeDimensionsAdapter()
+
+export function cssx (
+ ...args: Parameters
+): ReturnType {
+ const [styleName, sheet, inlineStyleProps, options] = args
+ return baseCssx(styleName, sheet, inlineStyleProps, {
+ target: 'react-native',
+ ...(options ?? {})
+ })
+}
+
+export function useRuntimeCss (
+ ...args: Parameters
+): ReturnType {
+ const [input, options] = args
+ return baseUseRuntimeCss(input, {
+ target: 'react-native',
+ ...(options ?? {})
+ })
+}
+
+export function useCssxLayer (
+ ...args: Parameters
+): ReturnType {
+ const [input, options] = args
+ return baseUseCssxLayer(input, {
+ target: 'react-native',
+ ...(options ?? {})
+ })
+}
+
+export function useCssxSheet (
+ ...args: Parameters
+): ReturnType {
+ const [sheet, options] = args
+ return baseUseCssxSheet(sheet, {
+ target: 'react-native',
+ ...(options ?? {})
+ })
+}
+
+export function useCssxTemplate (
+ ...args: Parameters
+): ReturnType {
+ const [sheet, values, options] = args
+ return baseUseCssxTemplate(sheet, values, {
+ target: 'react-native',
+ ...(options ?? {})
+ })
+}
+
+export const __cssxInternals = {
+ clearRawCssCacheForTests,
+ configureDimensionsAdapterForTests: configureDimensionsAdapter,
+ configureMediaQueryAdapterForTests: configureMediaQueryAdapter,
+ createTrackedCssxSheet,
+ flushMicrotasksForTests,
+ getRuntimeSubscriberCountForTests,
+ resetStoreForTests,
+ setDimensionsForTests,
+ subscribeVariablesForTests
+}
+
+function installReactNativeDimensionsAdapter (): void {
+ configureDimensionsAdapter({
+ get: () => {
+ const next = Dimensions.get('window')
+ return {
+ width: next.width,
+ height: next.height
+ }
+ },
+ subscribe: listener => {
+ const subscription = Dimensions.addEventListener('change', listener)
+ return () => {
+ subscription.remove()
+ }
+ }
+ })
+}
diff --git a/packages/css-to-rn/src/react/config.ts b/packages/css-to-rn/src/react/config.ts
new file mode 100644
index 0000000..9b7c04d
--- /dev/null
+++ b/packages/css-to-rn/src/react/config.ts
@@ -0,0 +1,45 @@
+import {
+ createContext,
+ createElement,
+ useContext,
+ useMemo,
+ type ReactNode
+} from 'react'
+import {
+ getRuntimeConfig,
+ setRuntimeConfig,
+ type CssxRuntimeConfig
+} from './store.ts'
+import type { TrackedCssxSheetOptions } from './tracker.ts'
+
+export interface CssxReactConfig extends CssxRuntimeConfig, TrackedCssxSheetOptions {}
+
+export interface CssxProviderProps {
+ value?: CssxReactConfig
+ children?: ReactNode
+}
+
+const CssxConfigContext = createContext(null)
+
+export function configureCssx (config: CssxReactConfig): void {
+ setRuntimeConfig(config)
+}
+
+export function CssxProvider (props: CssxProviderProps): ReactNode {
+ const parent = useContext(CssxConfigContext)
+ const value = useMemo(
+ () => ({
+ ...(parent ?? getRuntimeConfig()),
+ ...(props.value ?? {})
+ }),
+ [parent, props.value]
+ )
+
+ return createElement(CssxConfigContext.Provider, {
+ value
+ }, props.children)
+}
+
+export function useCssxConfig (): CssxReactConfig {
+ return useContext(CssxConfigContext) ?? getRuntimeConfig()
+}
diff --git a/packages/css-to-rn/src/react/cssx.ts b/packages/css-to-rn/src/react/cssx.ts
new file mode 100644
index 0000000..6614bd6
--- /dev/null
+++ b/packages/css-to-rn/src/react/cssx.ts
@@ -0,0 +1,228 @@
+import type { CompiledCssSheet, CssxTarget } from '../types.ts'
+import {
+ clearCssxRuntimeCachesForTests,
+ resolveCssx,
+ type CssxCache,
+ type CssxLayerInput,
+ type InlineStyleInput,
+ type ResolvedStyleProps,
+ type ResolveCssxLayer,
+ type StyleNameValue
+} from '../resolve.ts'
+import {
+ evaluateMediaQuery,
+ getMediaQueryEvaluator,
+ getDefaultVariableValues,
+ getDimensions,
+ getDimensionsVersion,
+ getVariableValues,
+ getVariableVersion,
+ type CssxDependencyCollector
+} from './store.ts'
+import {
+ isTrackedCssxSheet,
+ type TrackedCssxSheet
+} from './tracker.ts'
+
+export type CssxStyleName = StyleNameValue
+export type CssxResolvedProps = ResolvedStyleProps
+
+export interface CssxRuntimeOptions {
+ target?: CssxTarget
+ values?: readonly unknown[]
+ cache?: boolean | CssxCache
+}
+
+export type CssxSheetInput =
+ | string
+ | CompiledCssSheet
+ | TrackedCssxSheet
+ | CssxReactLayer
+ | readonly CssxSheetInput[]
+
+export interface CssxReactLayer {
+ sheet: string | CompiledCssSheet | TrackedCssxSheet
+ values?: readonly unknown[]
+ cacheKey?: unknown
+}
+
+interface NormalizedReactLayers {
+ layers: CssxLayerInput | CssxLayerInput[]
+ collectors: CssxDependencyCollector[]
+ cache?: boolean | CssxCache
+ target?: CssxTarget
+}
+
+export function cssx (
+ styleName: CssxStyleName,
+ sheetInput: CssxSheetInput,
+ inlineStyleProps?: InlineStyleInput,
+ options: CssxRuntimeOptions = {}
+): CssxResolvedProps {
+ const normalized = normalizeSheetInput(sheetInput, options)
+ const result = resolveCssx({
+ styleName,
+ layers: normalized.layers,
+ inlineStyleProps,
+ target: options.target ?? normalized.target ?? 'react-native',
+ variables: getVariableValues(),
+ defaultVariables: getDefaultVariableValues(),
+ dimensions: getDimensions(),
+ mediaQueryEvaluator: getMediaQueryEvaluator(),
+ cache: options.cache ?? normalized.cache
+ })
+
+ for (const collector of normalized.collectors) {
+ recordDependencies(collector, result)
+ }
+
+ return result.props
+}
+
+export function clearRawCssCacheForTests (): void {
+ clearCssxRuntimeCachesForTests()
+}
+
+function normalizeSheetInput (
+ input: CssxSheetInput,
+ options: CssxRuntimeOptions
+): NormalizedReactLayers {
+ const rawLayers = Array.isArray(input) ? input : [input]
+ const layers: CssxLayerInput[] = []
+ const collectors: CssxDependencyCollector[] = []
+ let cache: boolean | CssxCache | undefined
+ let target: CssxTarget | undefined
+
+ for (const rawLayer of rawLayers) {
+ const normalized = normalizeLayer(rawLayer, options)
+ if (Array.isArray(normalized.layers)) layers.push(...normalized.layers)
+ else layers.push(normalized.layers)
+ collectors.push(...normalized.collectors)
+ cache ??= normalized.cache
+ target ??= normalized.target
+ }
+
+ return {
+ layers,
+ collectors,
+ cache,
+ target
+ }
+}
+
+function normalizeLayer (
+ input: CssxSheetInput,
+ options: CssxRuntimeOptions
+): NormalizedReactLayers {
+ if (Array.isArray(input)) return normalizeSheetInput(input, options)
+
+ if (isTrackedCssxSheet(input)) {
+ const trackerOptions = input.getOptions()
+ const layer: ResolveCssxLayer = {
+ sheet: input.getSheet(),
+ values: options.values ?? trackerOptions.values ?? [],
+ cacheKey: input
+ }
+
+ return {
+ layers: layer,
+ collectors: [input],
+ cache: options.cache ?? input.getCache(),
+ target: options.target ?? trackerOptions.target
+ }
+ }
+
+ if (isReactLayer(input)) {
+ const nested = normalizeLayer(input.sheet, options)
+ const baseLayers = Array.isArray(nested.layers)
+ ? nested.layers
+ : [nested.layers]
+ const layers = baseLayers.map(layer => {
+ if (typeof layer === 'string') {
+ return {
+ sheet: layer,
+ values: input.values ?? options.values ?? [],
+ cacheKey: input.cacheKey
+ }
+ }
+ if ('sheet' in layer) {
+ return {
+ ...layer,
+ values: input.values ?? layer.values ?? options.values ?? [],
+ cacheKey: input.cacheKey ?? layer.cacheKey
+ }
+ }
+ return {
+ sheet: layer,
+ values: input.values ?? options.values ?? [],
+ cacheKey: input.cacheKey
+ }
+ })
+
+ return {
+ ...nested,
+ layers
+ }
+ }
+
+ if (typeof input === 'string') {
+ return {
+ layers: input,
+ collectors: [],
+ cache: options.cache
+ }
+ }
+
+ if (isCompiledSheet(input)) {
+ return {
+ layers: {
+ sheet: input,
+ values: options.values ?? []
+ },
+ collectors: [],
+ cache: options.cache
+ }
+ }
+
+ return {
+ layers: [],
+ collectors: [],
+ cache: options.cache
+ }
+}
+
+function isReactLayer (value: unknown): value is CssxReactLayer {
+ return Boolean(
+ value &&
+ typeof value === 'object' &&
+ 'sheet' in value &&
+ !isTrackedCssxSheet(value) &&
+ !isCompiledSheet(value)
+ )
+}
+
+function isCompiledSheet (value: unknown): value is CompiledCssSheet {
+ return Boolean(
+ value &&
+ typeof value === 'object' &&
+ (value as { version?: unknown }).version === 1 &&
+ Array.isArray((value as { rules?: unknown }).rules)
+ )
+}
+
+function recordDependencies (
+ collector: CssxDependencyCollector,
+ result: { dependencies: { vars: string[], dimensions: boolean, media: string[] } }
+): void {
+ for (const name of result.dependencies.vars) {
+ collector.recordVariable(name, getVariableVersion(name))
+ }
+
+ if (result.dependencies.dimensions) {
+ collector.recordDimensions(getDimensionsVersion())
+ }
+
+ for (const query of result.dependencies.media) {
+ collector.recordMedia(query, evaluateMediaQuery(query))
+ }
+}
diff --git a/packages/css-to-rn/src/react/hooks.ts b/packages/css-to-rn/src/react/hooks.ts
new file mode 100644
index 0000000..2de423f
--- /dev/null
+++ b/packages/css-to-rn/src/react/hooks.ts
@@ -0,0 +1,146 @@
+import {
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useSyncExternalStore
+} from 'react'
+import { compileCss } from '../compiler.ts'
+import type { CompiledCssSheet } from '../types.ts'
+import { useCssxConfig, type CssxReactConfig } from './config.ts'
+import { TrackedCssxSheet } from './tracker.ts'
+
+const useCommitEffect = typeof window === 'undefined'
+ ? useEffect
+ : useLayoutEffect
+
+export type CssxLayerHookInput =
+ | string
+ | CompiledCssSheet
+ | TrackedCssxSheet
+ | {
+ sheet: string | CompiledCssSheet | TrackedCssxSheet
+ values?: readonly unknown[]
+ }
+ | null
+ | undefined
+ | false
+
+export type CssxLayerHookOutput =
+ | string
+ | TrackedCssxSheet
+ | {
+ sheet: string | TrackedCssxSheet
+ values?: readonly unknown[]
+ }
+ | null
+ | undefined
+ | false
+
+export function useCssxSheet (
+ sheet: CompiledCssSheet,
+ options: CssxReactConfig = {}
+): TrackedCssxSheet {
+ const context = useCssxConfig()
+ const trackerRef = useRef(null)
+ const mergedOptions = {
+ ...context,
+ ...options
+ }
+
+ if (trackerRef.current == null) {
+ trackerRef.current = new TrackedCssxSheet(sheet, mergedOptions)
+ } else {
+ trackerRef.current.update(sheet, mergedOptions)
+ }
+
+ const tracker = trackerRef.current
+ const renderDependencies = tracker.startRender()
+
+ useSyncExternalStore(
+ tracker.subscribe,
+ tracker.getSnapshot,
+ tracker.getServerSnapshot
+ )
+
+ useCommitEffect(() => {
+ tracker.commitRender(renderDependencies)
+ })
+
+ return tracker
+}
+
+export function useRuntimeCss (
+ input: string | CompiledCssSheet,
+ options: CssxReactConfig = {}
+): TrackedCssxSheet {
+ const context = useCssxConfig()
+ const target = options.target ?? context.target
+ const sheet = useMemo(() => {
+ if (typeof input !== 'string') return input
+ return compileCss(input, { target })
+ }, [input, target])
+
+ return useCssxSheet(sheet, options)
+}
+
+export function useCssxTemplate (
+ sheet: CompiledCssSheet,
+ values: readonly unknown[],
+ options: CssxReactConfig = {}
+): TrackedCssxSheet {
+ return useCssxSheet(sheet, {
+ ...options,
+ values
+ })
+}
+
+export function useCssxLayer (
+ input: CssxLayerHookInput,
+ options: CssxReactConfig = {}
+): CssxLayerHookOutput {
+ if (!input) return input
+
+ if (typeof input === 'string') return useRuntimeCss(input, options)
+ if (input instanceof TrackedCssxSheet) return input
+ if (isCompiledSheet(input)) return useCssxSheet(input, options)
+
+ if (isLayerObject(input)) {
+ const sheet = input.sheet
+ if (typeof sheet === 'string') {
+ return {
+ ...input,
+ sheet: useRuntimeCss(sheet, options)
+ }
+ }
+ if (sheet instanceof TrackedCssxSheet) return input as CssxLayerHookOutput
+ if (isCompiledSheet(sheet)) {
+ return useCssxSheet(sheet, {
+ ...options,
+ values: input.values
+ })
+ }
+ }
+
+ return input as CssxLayerHookOutput
+}
+
+function isCompiledSheet (value: unknown): value is CompiledCssSheet {
+ return Boolean(
+ value &&
+ typeof value === 'object' &&
+ (value as { version?: unknown }).version === 1 &&
+ Array.isArray((value as { rules?: unknown }).rules)
+ )
+}
+
+function isLayerObject (value: unknown): value is {
+ sheet: string | CompiledCssSheet | TrackedCssxSheet
+ values?: readonly unknown[]
+} {
+ return Boolean(
+ value &&
+ typeof value === 'object' &&
+ 'sheet' in value
+ )
+}
diff --git a/packages/css-to-rn/src/react/index.ts b/packages/css-to-rn/src/react/index.ts
new file mode 100644
index 0000000..a4cfa38
--- /dev/null
+++ b/packages/css-to-rn/src/react/index.ts
@@ -0,0 +1,51 @@
+export {
+ cssx,
+ clearRawCssCacheForTests
+} from './cssx.ts'
+export {
+ CssxProvider,
+ configureCssx,
+ useCssxConfig
+} from './config.ts'
+export {
+ useCssxLayer,
+ useRuntimeCss,
+ useCssxSheet,
+ useCssxTemplate
+} from './hooks.ts'
+export {
+ TrackedCssxSheet,
+ createTrackedCssxSheet,
+ isTrackedCssxSheet
+} from './tracker.ts'
+export {
+ defaultVariables,
+ flushMicrotasksForTests,
+ getRuntimeSubscriberCountForTests,
+ resetStoreForTests,
+ setDefaultVariables,
+ setDimensionsForTests,
+ subscribeVariablesForTests,
+ variables
+} from './store.ts'
+
+export type {
+ CssxResolvedProps,
+ CssxRuntimeOptions,
+ CssxStyleName
+} from './cssx.ts'
+export type {
+ CssxProviderProps,
+ CssxReactConfig
+} from './config.ts'
+export type {
+ CssxLayerHookInput,
+ CssxLayerHookOutput
+} from './hooks.ts'
+export type {
+ CssxDependencySnapshot,
+ CssxRuntimeConfig
+} from './store.ts'
+export type {
+ TrackedCssxSheetOptions
+} from './tracker.ts'
diff --git a/packages/css-to-rn/src/react/store.ts b/packages/css-to-rn/src/react/store.ts
new file mode 100644
index 0000000..c692083
--- /dev/null
+++ b/packages/css-to-rn/src/react/store.ts
@@ -0,0 +1,526 @@
+import mediaQuery from 'css-mediaquery'
+
+export interface CssxRuntimeConfig {
+ dimensionsDebounceMs?: number
+}
+
+export interface CssxDimensionsSnapshot {
+ width: number
+ height: number
+}
+
+export interface CssxDimensionsAdapter {
+ get: () => CssxDimensionsSnapshot
+ subscribe: (listener: () => void) => () => void
+}
+
+export interface CssxMediaQueryAdapter {
+ evaluate: (query: string) => boolean
+ subscribe?: (query: string, listener: () => void) => () => void
+}
+
+export interface CssxDependencySnapshot {
+ vars: Map
+ media: Map
+ dimensionsVersion: number | null
+}
+
+export interface CssxDependencyCollector {
+ recordVariable: (name: string, version: number) => void
+ recordMedia: (query: string, matches: boolean) => void
+ recordDimensions: (version: number) => void
+}
+
+export interface RuntimeChangeSnapshot {
+ vars: readonly string[]
+ dimensions: boolean
+ media: boolean
+}
+
+type RuntimeSubscriber = {
+ listener: (change: RuntimeChangeSnapshot) => void
+ getDependencies: () => CssxDependencySnapshot
+}
+
+const FALLBACK_DIMENSIONS = { width: 1024, height: 768 }
+
+const variableValues: Record = Object.create(null)
+const defaultVariableValues: Record = Object.create(null)
+const variableVersions = new Map()
+const runtimeSubscribers = new Set()
+const pendingVariableNames = new Set()
+const retainedMediaQueries = new Map void) | null
+}>()
+
+let runtimeConfig: Required = {
+ dimensionsDebounceMs: 0
+}
+let variableVersion = 0
+let dimensionsAdapter: CssxDimensionsAdapter | null = null
+let dimensionsAdapterUnsubscribe: (() => void) | null = null
+let mediaQueryAdapter: CssxMediaQueryAdapter | null = null
+let dimensions = readWindowDimensions()
+let dimensionsVersion = 0
+let pendingDimensionsChanged = false
+let pendingMediaChanged = false
+let notifyScheduled = false
+let resizeListener: (() => void) | null = null
+let resizeTimer: ReturnType | null = null
+
+export const variables = createVariableProxy(variableValues)
+export const defaultVariables = createVariableProxy(defaultVariableValues)
+
+export function setDefaultVariables (next: Record): void {
+ const changed = new Set()
+ for (const name of Object.keys(defaultVariableValues)) {
+ if (!Object.prototype.hasOwnProperty.call(next, name)) {
+ delete defaultVariableValues[name]
+ changed.add(name)
+ }
+ }
+
+ for (const [name, value] of Object.entries(next)) {
+ if (Object.is(defaultVariableValues[name], value)) continue
+ defaultVariableValues[name] = value
+ changed.add(name)
+ }
+
+ markVariablesChanged(Array.from(changed))
+}
+
+export function getVariableValues (): Record {
+ return variableValues
+}
+
+export function getDefaultVariableValues (): Record {
+ return defaultVariableValues
+}
+
+export function getVariableVersion (name: string): number {
+ return variableVersions.get(name) ?? 0
+}
+
+export function getRuntimeVersion (): number {
+ return variableVersion + dimensionsVersion
+}
+
+export function createDependencySnapshot (): CssxDependencySnapshot {
+ return {
+ vars: new Map(),
+ media: new Map(),
+ dimensionsVersion: null
+ }
+}
+
+export function getDimensions (): { width: number, height: number } {
+ return dimensions
+}
+
+export function getDimensionsVersion (): number {
+ return dimensionsVersion
+}
+
+export function setDimensionsForTests (next: { width: number, height: number }): void {
+ applyDimensions(next)
+}
+
+export function configureDimensionsAdapter (
+ adapter: CssxDimensionsAdapter | null
+): void {
+ if (dimensionsAdapter === adapter) return
+ removeWindowResizeListener()
+ dimensionsAdapter = adapter
+ refreshRetainedMediaQueryListeners()
+ applyDimensions(readWindowDimensions())
+ if (runtimeSubscribers.size > 0) ensureWindowResizeListener()
+}
+
+export function configureMediaQueryAdapter (
+ adapter: CssxMediaQueryAdapter | null
+): void {
+ if (mediaQueryAdapter === adapter) return
+ mediaQueryAdapter = adapter
+ refreshRetainedMediaQueryListeners()
+ markMediaChanged()
+}
+
+export function getMediaQueryEvaluator (): (query: string) => boolean {
+ return query => evaluateMediaQuery(query)
+}
+
+export function evaluateMediaQuery (query: string): boolean {
+ const normalized = stripMediaPrefix(query)
+
+ if (mediaQueryAdapter != null) {
+ return mediaQueryAdapter.evaluate(normalized)
+ }
+
+ if (canUseBrowserMatchMedia()) {
+ return window.matchMedia(normalized).matches
+ }
+
+ try {
+ return mediaQuery.match(normalized, mediaValues(dimensions))
+ } catch {
+ return false
+ }
+}
+
+export function setRuntimeConfig (next: CssxRuntimeConfig): void {
+ runtimeConfig = {
+ ...runtimeConfig,
+ ...next
+ }
+}
+
+export function getRuntimeConfig (): Required {
+ return runtimeConfig
+}
+
+export function subscribeRuntimeStore (
+ listener: (change: RuntimeChangeSnapshot) => void,
+ getDependencies: () => CssxDependencySnapshot
+): () => void {
+ const subscriber = { listener, getDependencies }
+ runtimeSubscribers.add(subscriber)
+ ensureWindowResizeListener()
+
+ return () => {
+ runtimeSubscribers.delete(subscriber)
+ if (runtimeSubscribers.size === 0) removeWindowResizeListener()
+ }
+}
+
+export function retainMediaQuery (query: string): () => void {
+ const normalized = stripMediaPrefix(query)
+ let entry = retainedMediaQueries.get(normalized)
+
+ if (entry == null) {
+ entry = {
+ count: 0,
+ unsubscribe: subscribeToMediaQuery(normalized)
+ }
+ retainedMediaQueries.set(normalized, entry)
+ }
+
+ entry.count += 1
+
+ return () => {
+ const current = retainedMediaQueries.get(normalized)
+ if (current == null) return
+
+ current.count -= 1
+ if (current.count > 0) return
+
+ current.unsubscribe?.()
+ retainedMediaQueries.delete(normalized)
+ }
+}
+
+export function hasStaleDependencies (dependencies: CssxDependencySnapshot): boolean {
+ for (const [name, version] of dependencies.vars) {
+ if (getVariableVersion(name) !== version) return true
+ }
+
+ if (
+ dependencies.dimensionsVersion != null &&
+ dependencies.dimensionsVersion !== dimensionsVersion
+ ) {
+ return true
+ }
+
+ for (const [query, matches] of dependencies.media) {
+ if (evaluateMediaQuery(query) !== matches) return true
+ }
+
+ return false
+}
+
+export function subscribeVariablesForTests (
+ names: readonly string[],
+ listener: (changedNames: readonly string[]) => void
+): () => void {
+ const dependencies = createDependencySnapshot()
+ for (const name of names) {
+ dependencies.vars.set(name, getVariableVersion(name))
+ }
+ return subscribeRuntimeStore(
+ change => listener(change.vars),
+ () => dependencies
+ )
+}
+
+export function getRuntimeSubscriberCountForTests (): number {
+ return runtimeSubscribers.size
+}
+
+export async function flushMicrotasksForTests (): Promise {
+ await Promise.resolve()
+ await Promise.resolve()
+}
+
+export function resetStoreForTests (): void {
+ clearRecord(variableValues)
+ clearRecord(defaultVariableValues)
+ variableVersions.clear()
+ pendingVariableNames.clear()
+ variableVersion = 0
+ removeWindowResizeListener()
+ releaseAllRetainedMediaQueries()
+ dimensionsAdapter = null
+ mediaQueryAdapter = null
+ dimensions = FALLBACK_DIMENSIONS
+ dimensionsVersion = 0
+ pendingDimensionsChanged = false
+ pendingMediaChanged = false
+ notifyScheduled = false
+ runtimeSubscribers.clear()
+}
+
+function createVariableProxy (target: Record): Record {
+ return new Proxy(target, {
+ set (record, property, value) {
+ if (typeof property !== 'string') {
+ return Reflect.set(record, property, value)
+ }
+ if (Object.is(record[property], value)) return true
+ record[property] = value
+ markVariablesChanged([property])
+ return true
+ },
+ deleteProperty (record, property) {
+ if (typeof property !== 'string') {
+ return Reflect.deleteProperty(record, property)
+ }
+ if (!Object.prototype.hasOwnProperty.call(record, property)) return true
+ delete record[property]
+ markVariablesChanged([property])
+ return true
+ }
+ })
+}
+
+function markVariablesChanged (names: readonly string[]): void {
+ if (names.length === 0) return
+
+ for (const name of names) {
+ variableVersion += 1
+ variableVersions.set(name, variableVersion)
+ pendingVariableNames.add(name)
+ }
+
+ scheduleNotification()
+}
+
+function applyDimensions (next: { width: number, height: number }): void {
+ if (
+ Object.is(dimensions.width, next.width) &&
+ Object.is(dimensions.height, next.height)
+ ) {
+ return
+ }
+
+ dimensions = next
+ dimensionsVersion += 1
+ pendingDimensionsChanged = true
+ scheduleNotification()
+}
+
+function markMediaChanged (): void {
+ pendingMediaChanged = true
+ scheduleNotification()
+}
+
+function scheduleNotification (): void {
+ if (notifyScheduled) return
+ notifyScheduled = true
+
+ queueMicrotask(() => {
+ notifyScheduled = false
+ flushNotifications()
+ })
+}
+
+function flushNotifications (): void {
+ const vars = Array.from(pendingVariableNames)
+ const dimensionsChanged = pendingDimensionsChanged
+ const mediaChanged = pendingMediaChanged
+
+ pendingVariableNames.clear()
+ pendingDimensionsChanged = false
+ pendingMediaChanged = false
+
+ if (vars.length === 0 && !dimensionsChanged && !mediaChanged) return
+
+ const change = {
+ vars,
+ dimensions: dimensionsChanged,
+ media: mediaChanged
+ }
+
+ for (const subscriber of Array.from(runtimeSubscribers)) {
+ if (shouldNotifySubscriber(subscriber.getDependencies(), change)) {
+ subscriber.listener(change)
+ }
+ }
+}
+
+function shouldNotifySubscriber (
+ dependencies: CssxDependencySnapshot,
+ change: RuntimeChangeSnapshot
+): boolean {
+ for (const name of change.vars) {
+ if (dependencies.vars.has(name)) return true
+ }
+
+ if (change.dimensions && dependencies.dimensionsVersion != null) return true
+
+ if (change.dimensions || change.media) {
+ for (const [query, matches] of dependencies.media) {
+ if (evaluateMediaQuery(query) !== matches) return true
+ }
+ }
+
+ return false
+}
+
+function refreshRetainedMediaQueryListeners (): void {
+ for (const entry of retainedMediaQueries.values()) {
+ entry.unsubscribe?.()
+ entry.unsubscribe = null
+ }
+
+ for (const [query, entry] of retainedMediaQueries) {
+ if (entry.count > 0) entry.unsubscribe = subscribeToMediaQuery(query)
+ }
+}
+
+function releaseAllRetainedMediaQueries (): void {
+ for (const entry of retainedMediaQueries.values()) {
+ entry.unsubscribe?.()
+ }
+ retainedMediaQueries.clear()
+}
+
+function subscribeToMediaQuery (query: string): (() => void) | null {
+ if (mediaQueryAdapter?.subscribe != null) {
+ return mediaQueryAdapter.subscribe(query, markMediaChanged)
+ }
+
+ if (!canUseBrowserMatchMedia()) return null
+
+ const media = window.matchMedia(query)
+ const listener = () => {
+ markMediaChanged()
+ }
+
+ if (typeof media.addEventListener === 'function') {
+ media.addEventListener('change', listener)
+ return () => {
+ media.removeEventListener('change', listener)
+ }
+ }
+
+ media.addListener(listener)
+ return () => {
+ media.removeListener(listener)
+ }
+}
+
+function ensureWindowResizeListener (): void {
+ if (dimensionsAdapter != null) {
+ if (dimensionsAdapterUnsubscribe != null) return
+ dimensionsAdapterUnsubscribe = dimensionsAdapter.subscribe(() => {
+ applyDimensions(readWindowDimensions())
+ })
+ applyDimensions(readWindowDimensions())
+ return
+ }
+
+ if (resizeListener != null || typeof window === 'undefined') return
+
+ resizeListener = () => {
+ const hasPendingTrailingUpdate = resizeTimer != null
+ if (resizeTimer != null) clearTimeout(resizeTimer)
+
+ const delay = runtimeConfig.dimensionsDebounceMs
+ if (delay <= 0) {
+ applyDimensions(readWindowDimensions())
+ return
+ }
+
+ if (!hasPendingTrailingUpdate) {
+ applyDimensions(readWindowDimensions())
+ }
+
+ resizeTimer = setTimeout(() => {
+ resizeTimer = null
+ applyDimensions(readWindowDimensions())
+ }, delay)
+ }
+
+ window.addEventListener('resize', resizeListener)
+ applyDimensions(readWindowDimensions())
+}
+
+function removeWindowResizeListener (): void {
+ if (resizeTimer != null) {
+ clearTimeout(resizeTimer)
+ resizeTimer = null
+ }
+
+ if (dimensionsAdapterUnsubscribe != null) {
+ dimensionsAdapterUnsubscribe()
+ dimensionsAdapterUnsubscribe = null
+ }
+
+ if (resizeListener == null || typeof window === 'undefined') {
+ resizeListener = null
+ return
+ }
+
+ window.removeEventListener('resize', resizeListener)
+ resizeListener = null
+}
+
+function readWindowDimensions (): { width: number, height: number } {
+ if (dimensionsAdapter != null) return dimensionsAdapter.get()
+
+ if (typeof window === 'undefined') return FALLBACK_DIMENSIONS
+
+ return {
+ width: window.innerWidth || FALLBACK_DIMENSIONS.width,
+ height: window.innerHeight || FALLBACK_DIMENSIONS.height
+ }
+}
+
+function canUseBrowserMatchMedia (): boolean {
+ return (
+ dimensionsAdapter == null &&
+ typeof window !== 'undefined' &&
+ typeof window.matchMedia === 'function'
+ )
+}
+
+function stripMediaPrefix (query: string): string {
+ return query.trim().replace(/^@media\s+/i, '').trim()
+}
+
+function mediaValues (next: { width: number, height: number }): Record {
+ return {
+ type: 'screen',
+ width: `${next.width}px`,
+ height: `${next.height}px`,
+ 'device-width': `${next.width}px`,
+ 'device-height': `${next.height}px`,
+ orientation: next.width >= next.height ? 'landscape' : 'portrait'
+ }
+}
+
+function clearRecord (record: Record): void {
+ for (const key of Object.keys(record)) {
+ delete record[key]
+ }
+}
diff --git a/packages/css-to-rn/src/react/tracker.ts b/packages/css-to-rn/src/react/tracker.ts
new file mode 100644
index 0000000..3d26619
--- /dev/null
+++ b/packages/css-to-rn/src/react/tracker.ts
@@ -0,0 +1,193 @@
+import type { CompiledCssSheet } from '../types.ts'
+import {
+ createCssxCache,
+ type CssxCache
+} from '../resolve.ts'
+import {
+ createDependencySnapshot,
+ hasStaleDependencies,
+ retainMediaQuery,
+ subscribeRuntimeStore,
+ type CssxDependencyCollector,
+ type CssxDependencySnapshot,
+ type RuntimeChangeSnapshot
+} from './store.ts'
+
+const TRACKED_SHEET = Symbol.for('cssx.trackedSheet')
+
+export interface TrackedCssxSheetOptions {
+ target?: 'react-native' | 'web'
+ values?: readonly unknown[]
+ cacheMaxEntries?: number
+}
+
+export class TrackedCssxSheet implements CssxDependencyCollector {
+ readonly [TRACKED_SHEET] = true
+
+ private sheet: CompiledCssSheet
+ private options: TrackedCssxSheetOptions
+ private pendingDependencies: CssxDependencySnapshot | null = null
+ private committedDependencies = createDependencySnapshot()
+ private listeners = new Set<() => void>()
+ private unsubscribeRuntimeStore: (() => void) | null = null
+ private mediaQueryReleases = new Map void>()
+ private snapshotVersion = 0
+ private cache: CssxCache
+
+ constructor (sheet: CompiledCssSheet, options: TrackedCssxSheetOptions = {}) {
+ this.sheet = sheet
+ this.options = options
+ this.cache = createCssxCache({ maxEntries: options.cacheMaxEntries })
+ }
+
+ getSheet (): CompiledCssSheet {
+ return this.sheet
+ }
+
+ getOptions (): TrackedCssxSheetOptions {
+ return this.options
+ }
+
+ getCache (): CssxCache {
+ return this.cache
+ }
+
+ update (sheet: CompiledCssSheet, options: TrackedCssxSheetOptions = {}): void {
+ this.sheet = sheet
+ this.options = options
+ if (options.cacheMaxEntries !== this.cache.maxEntries) {
+ this.cache.maxEntries = options.cacheMaxEntries ?? this.cache.maxEntries
+ }
+ }
+
+ startRender (): CssxDependencySnapshot {
+ this.pendingDependencies = createDependencySnapshot()
+ return this.pendingDependencies
+ }
+
+ commitRender (dependencies: CssxDependencySnapshot | null = this.pendingDependencies): void {
+ if (dependencies == null) return
+
+ if (this.pendingDependencies === dependencies) {
+ this.pendingDependencies = null
+ }
+ this.committedDependencies = dependencies
+ this.syncMediaQuerySubscriptions()
+
+ if (hasStaleDependencies(dependencies)) {
+ this.emitChange()
+ }
+ }
+
+ recordVariable (name: string, version: number): void {
+ this.pendingDependencies?.vars.set(name, version)
+ }
+
+ recordMedia (query: string, matches: boolean): void {
+ this.pendingDependencies?.media.set(query, matches)
+ }
+
+ recordDimensions (version: number): void {
+ if (this.pendingDependencies == null) return
+ this.pendingDependencies.dimensionsVersion = version
+ }
+
+ subscribe = (listener: () => void): (() => void) => {
+ this.listeners.add(listener)
+
+ if (this.unsubscribeRuntimeStore == null) {
+ this.unsubscribeRuntimeStore = subscribeRuntimeStore(
+ this.handleRuntimeChange,
+ () => this.committedDependencies
+ )
+ this.syncMediaQuerySubscriptions()
+ }
+
+ return () => {
+ this.listeners.delete(listener)
+
+ if (this.listeners.size === 0 && this.unsubscribeRuntimeStore != null) {
+ this.unsubscribeRuntimeStore()
+ this.unsubscribeRuntimeStore = null
+ this.releaseMediaQuerySubscriptions()
+ }
+ }
+ }
+
+ getSnapshot = (): number => {
+ return this.snapshotVersion
+ }
+
+ getServerSnapshot = (): number => {
+ return this.snapshotVersion
+ }
+
+ getCommittedDependenciesForTests (): CssxDependencySnapshot {
+ return cloneDependencySnapshot(this.committedDependencies)
+ }
+
+ getPendingDependenciesForTests (): CssxDependencySnapshot | null {
+ return this.pendingDependencies == null
+ ? null
+ : cloneDependencySnapshot(this.pendingDependencies)
+ }
+
+ private handleRuntimeChange = (_change: RuntimeChangeSnapshot): void => {
+ this.emitChange()
+ }
+
+ private emitChange (): void {
+ this.snapshotVersion += 1
+ for (const listener of Array.from(this.listeners)) {
+ listener()
+ }
+ }
+
+ private syncMediaQuerySubscriptions (): void {
+ if (this.unsubscribeRuntimeStore == null) return
+
+ const nextQueries = new Set(this.committedDependencies.media.keys())
+ for (const [query, release] of Array.from(this.mediaQueryReleases)) {
+ if (nextQueries.has(query)) continue
+ release()
+ this.mediaQueryReleases.delete(query)
+ }
+
+ for (const query of nextQueries) {
+ if (this.mediaQueryReleases.has(query)) continue
+ this.mediaQueryReleases.set(query, retainMediaQuery(query))
+ }
+ }
+
+ private releaseMediaQuerySubscriptions (): void {
+ for (const release of this.mediaQueryReleases.values()) {
+ release()
+ }
+ this.mediaQueryReleases.clear()
+ }
+}
+
+export function isTrackedCssxSheet (value: unknown): value is TrackedCssxSheet {
+ return Boolean(
+ value != null &&
+ typeof value === 'object' &&
+ (value as { [TRACKED_SHEET]?: true })[TRACKED_SHEET] === true
+ )
+}
+
+export function createTrackedCssxSheet (
+ sheet: CompiledCssSheet,
+ options: TrackedCssxSheetOptions = {}
+): TrackedCssxSheet {
+ return new TrackedCssxSheet(sheet, options)
+}
+
+function cloneDependencySnapshot (
+ input: CssxDependencySnapshot
+): CssxDependencySnapshot {
+ return {
+ vars: new Map(input.vars),
+ media: new Map(input.media),
+ dimensionsVersion: input.dimensionsVersion
+ }
+}
diff --git a/packages/css-to-rn/src/resolve.ts b/packages/css-to-rn/src/resolve.ts
new file mode 100644
index 0000000..9a54aa8
--- /dev/null
+++ b/packages/css-to-rn/src/resolve.ts
@@ -0,0 +1,723 @@
+import mediaQuery from 'css-mediaquery'
+import { compileCss } from './compiler.ts'
+import { diagnostic } from './diagnostics.ts'
+import { simpleNumericHash } from './hash.ts'
+import { transformDeclarations } from './transform/index.ts'
+import type {
+ CssDeclaration,
+ TransformStyle,
+ TransformStyleValue
+} from './transform/index.ts'
+import { resolveCssValue } from './values.ts'
+import type {
+ CompiledCssSheet,
+ CssxDeclaration,
+ CssxDiagnostic,
+ CssxKeyframe,
+ CssxRule,
+ CssxTarget
+} from './types.ts'
+
+export type StyleNameValue =
+ | string
+ | number
+ | null
+ | undefined
+ | false
+ | Record
+ | readonly StyleNameValue[]
+
+export type CssxLayerInput =
+ | string
+ | CompiledCssSheet
+ | ResolveCssxLayer
+
+export interface ResolveCssxLayer {
+ sheet: CompiledCssSheet | string
+ values?: readonly unknown[]
+ cacheKey?: unknown
+}
+
+export interface ResolveCssxOptions {
+ styleName: StyleNameValue
+ layers?: CssxLayerInput | readonly CssxLayerInput[]
+ inlineStyleProps?: InlineStyleInput
+ variables?: Record
+ defaultVariables?: Record
+ dimensions?: CssxDimensions
+ mediaQueryEvaluator?: CssxMediaQueryEvaluator
+ target?: CssxTarget
+ cache?: boolean | CssxCache
+ cacheMaxEntries?: number
+}
+
+export interface CssxDimensions {
+ width?: number
+ height?: number
+ type?: string
+}
+
+export type CssxMediaQueryEvaluator = (
+ query: string,
+ dimensions: CssxDimensions | undefined
+) => boolean
+
+export type InlineStyleInput =
+ | TransformStyle
+ | ResolvedStyleProps
+ | null
+ | undefined
+ | false
+
+export interface ResolvedStyleProps {
+ [propName: string]: TransformStyleValue
+}
+
+export interface ResolveCssxResult {
+ props: ResolvedStyleProps
+ diagnostics: CssxDiagnostic[]
+ dependencies: ResolveCssxDependencies
+ cacheHit: boolean
+}
+
+export interface ResolveCssxDependencies {
+ vars: string[]
+ dimensions: boolean
+ media: string[]
+ sheets: string[]
+}
+
+export interface CssxCache {
+ maxEntries: number
+ entries: Map
+}
+
+interface ResolveCacheEntry {
+ dynamicSignature: string
+ values: readonly unknown[]
+ result: ResolveCssxResult
+}
+
+interface NormalizedLayer {
+ sheet: CompiledCssSheet
+ values: readonly unknown[]
+ cacheKey?: unknown
+}
+
+interface MutableDependencies {
+ vars: Set
+ dimensions: boolean
+ media: Set
+ sheets: Set
+}
+
+interface ResolutionContext {
+ target: CssxTarget
+ variables?: Record
+ defaultVariables?: Record
+ dimensions?: CssxDimensions
+ mediaQueryEvaluator?: CssxMediaQueryEvaluator
+ dependencies: MutableDependencies
+ diagnostics: CssxDiagnostic[]
+}
+
+interface MatchedRule {
+ rule: CssxRule
+ layer: NormalizedLayer
+ layerIndex: number
+}
+
+let lastRawCss: string | undefined
+let lastRawSheet: CompiledCssSheet | undefined
+let unknownIdentityCounter = 0
+const unknownObjectIds = new WeakMap()
+const unknownPrimitiveIds = new Map()
+const defaultCache = createCssxCache()
+
+export function createCssxCache (options: { maxEntries?: number } = {}): CssxCache {
+ return {
+ maxEntries: options.maxEntries ?? 100,
+ entries: new Map()
+ }
+}
+
+export function clearCssxRuntimeCachesForTests (): void {
+ lastRawCss = undefined
+ lastRawSheet = undefined
+ defaultCache.entries.clear()
+ unknownPrimitiveIds.clear()
+}
+
+export function cssx (
+ styleName: StyleNameValue,
+ layers?: CssxLayerInput | readonly CssxLayerInput[],
+ inlineStyleProps?: InlineStyleInput,
+ options: Omit = {}
+): ResolvedStyleProps {
+ return resolveCssx({
+ ...options,
+ styleName,
+ layers,
+ inlineStyleProps
+ }).props
+}
+
+export function resolveCssx (options: ResolveCssxOptions): ResolveCssxResult {
+ const layers = normalizeLayers(options.layers)
+ const classNames = normalizeStyleName(options.styleName)
+ const inlineHash = hashInlineStyleProps(options.inlineStyleProps)
+ const values = flattenLayerValues(layers)
+ const cache = options.cache === false
+ ? undefined
+ : options.cache === true || options.cache == null
+ ? defaultCache
+ : options.cache
+ const stableKey = inlineHash == null
+ ? undefined
+ : createStableKey(options, classNames, layers, inlineHash)
+ const cached = cache && stableKey
+ ? cache.entries.get(stableKey)
+ : undefined
+
+ if (cached && sameValues(cached.values, values)) {
+ const currentSignature = createDynamicSignature(
+ cached.result.dependencies,
+ options
+ )
+ if (currentSignature === cached.dynamicSignature) {
+ return {
+ ...cached.result,
+ cacheHit: true
+ }
+ }
+ }
+
+ const result = resolveCssxUncached(options, layers, classNames)
+ const dynamicSignature = createDynamicSignature(result.dependencies, options)
+
+ if (cache && stableKey) {
+ remember(cache, stableKey, {
+ dynamicSignature,
+ values,
+ result
+ })
+ }
+
+ return result
+}
+
+function resolveCssxUncached (
+ options: ResolveCssxOptions,
+ layers: readonly NormalizedLayer[],
+ classNames: readonly string[]
+): ResolveCssxResult {
+ const context: ResolutionContext = {
+ target: options.target ?? 'react-native',
+ variables: options.variables,
+ defaultVariables: options.defaultVariables,
+ dimensions: options.dimensions,
+ mediaQueryEvaluator: options.mediaQueryEvaluator,
+ dependencies: createDependencies(),
+ diagnostics: [],
+ }
+ const classSet = new Set(classNames)
+ const props: ResolvedStyleProps = {}
+
+ for (const layer of layers) context.dependencies.sheets.add(layer.sheet.id)
+
+ const matchedRules = getMatchedRules(layers, classSet, context)
+ const byProp = new Map()
+ for (const matched of matchedRules) {
+ const propName = getPartPropName(matched.rule.part)
+ const rules = byProp.get(propName)
+ if (rules) rules.push(matched)
+ else byProp.set(propName, [matched])
+ }
+
+ for (const [propName, rules] of byProp) {
+ const style = resolvePropStyle(rules, context)
+ if (Object.keys(style).length > 0) mergeStyleProp(props, propName, style)
+ }
+
+ mergeInlineStyleProps(props, options.inlineStyleProps)
+
+ return {
+ props,
+ diagnostics: context.diagnostics,
+ dependencies: serializeDependencies(context.dependencies),
+ cacheHit: false
+ }
+}
+
+function getMatchedRules (
+ layers: readonly NormalizedLayer[],
+ classSet: ReadonlySet,
+ context: ResolutionContext
+): MatchedRule[] {
+ const matched: MatchedRule[] = []
+
+ layers.forEach((layer, layerIndex) => {
+ for (const rule of layer.sheet.rules) {
+ if (!ruleMatchesClasses(rule, classSet)) continue
+ if (!ruleMatchesMedia(rule, context)) continue
+ matched.push({ rule, layer, layerIndex })
+ }
+ })
+
+ return matched.sort((left, right) =>
+ left.layerIndex - right.layerIndex ||
+ left.rule.specificity - right.rule.specificity ||
+ left.rule.order - right.rule.order
+ )
+}
+
+function resolvePropStyle (
+ rules: readonly MatchedRule[],
+ context: ResolutionContext
+): TransformStyle {
+ const declarations: CssDeclaration[] = []
+ const keyframeNames = new Set()
+ let order = 0
+
+ for (const matched of rules) {
+ for (const declaration of matched.rule.declarations) {
+ const resolved = resolveDeclarationValue(declaration, matched.layer, context)
+ if (!resolved) continue
+ declarations.push({
+ property: declaration.property,
+ value: resolved,
+ raw: `${declaration.property}: ${resolved}`,
+ order: order++
+ })
+ }
+ }
+
+ const transformed = transformDeclarations(declarations, {
+ platform: context.target,
+ keyframes: {},
+ })
+ context.diagnostics.push(...transformed.diagnostics.map(toCssxDiagnostic))
+
+ collectAnimationNames(transformed.style.animationName, keyframeNames)
+ if (keyframeNames.size > 0) {
+ const keyframes = resolveKeyframes(rules, keyframeNames, context)
+ inlineAnimationKeyframes(transformed.style, keyframes)
+ }
+
+ return transformed.style
+}
+
+function resolveDeclarationValue (
+ declaration: CssxDeclaration,
+ layer: NormalizedLayer,
+ context: ResolutionContext
+): string | undefined {
+ const result = resolveCssValue(declaration.value, {
+ values: layer.values,
+ variables: context.variables,
+ defaultVariables: context.defaultVariables,
+ dimensions: context.dimensions
+ })
+
+ for (const varName of result.dependencies.vars) context.dependencies.vars.add(varName)
+ if (result.dependencies.dimensions) context.dependencies.dimensions = true
+ context.diagnostics.push(...result.diagnostics)
+
+ return result.valid ? result.value : undefined
+}
+
+function resolveKeyframes (
+ rules: readonly MatchedRule[],
+ keyframeNames: ReadonlySet,
+ context: ResolutionContext
+): Record {
+ const resolved: Record = {}
+ const seen = new Set()
+
+ for (let index = rules.length - 1; index >= 0; index--) {
+ const layer = rules[index].layer
+
+ for (const keyframeName of keyframeNames) {
+ if (seen.has(keyframeName)) continue
+ const keyframes = layer.sheet.keyframes[keyframeName]
+ if (!keyframes) continue
+ resolved[keyframeName] = resolveSingleKeyframes(keyframes, layer, context)
+ seen.add(keyframeName)
+ }
+ }
+
+ return resolved
+}
+
+function resolveSingleKeyframes (
+ keyframes: readonly CssxKeyframe[],
+ layer: NormalizedLayer,
+ context: ResolutionContext
+): TransformStyle {
+ const style: TransformStyle = {}
+
+ for (const frame of keyframes) {
+ const declarations: CssDeclaration[] = []
+ for (const declaration of frame.declarations) {
+ const resolved = resolveDeclarationValue(declaration, layer, context)
+ if (!resolved) continue
+ declarations.push({
+ property: declaration.property,
+ value: resolved,
+ raw: `${declaration.property}: ${resolved}`,
+ order: declaration.order
+ })
+ }
+
+ const transformed = transformDeclarations(declarations, {
+ platform: context.target,
+ keyframes: {},
+ })
+ context.diagnostics.push(...transformed.diagnostics.map(toCssxDiagnostic))
+ style[frame.selector] = transformed.style
+ }
+
+ return style
+}
+
+function inlineAnimationKeyframes (
+ style: TransformStyle,
+ keyframes: Record
+): void {
+ if (style.animationName == null) return
+
+ if (Array.isArray(style.animationName)) {
+ style.animationName = style.animationName.map(value =>
+ typeof value === 'string' && value !== 'none' && keyframes[value] != null
+ ? keyframes[value]
+ : value
+ )
+ return
+ }
+
+ if (
+ typeof style.animationName === 'string' &&
+ style.animationName !== 'none' &&
+ keyframes[style.animationName] != null
+ ) {
+ style.animationName = keyframes[style.animationName]
+ }
+}
+
+function collectAnimationNames (
+ value: TransformStyleValue,
+ output: Set
+): void {
+ if (typeof value === 'string') {
+ if (value !== 'none') output.add(value)
+ return
+ }
+
+ if (!Array.isArray(value)) return
+ for (const item of value) collectAnimationNames(item, output)
+}
+
+function ruleMatchesClasses (
+ rule: CssxRule,
+ classSet: ReadonlySet
+): boolean {
+ return rule.classes.every(className => classSet.has(className))
+}
+
+function ruleMatchesMedia (
+ rule: CssxRule,
+ context: ResolutionContext
+): boolean {
+ if (!rule.media) return true
+
+ const query = stripMediaPrefix(rule.media)
+ context.dependencies.media.add(query)
+ return matchesMediaQuery(query, context.dimensions, context.mediaQueryEvaluator)
+}
+
+function matchesMediaQuery (
+ query: string,
+ dimensions: CssxDimensions | undefined,
+ evaluator?: CssxMediaQueryEvaluator
+): boolean {
+ if (evaluator) return evaluator(query, dimensions)
+
+ try {
+ return mediaQuery.match(query, mediaValues(dimensions))
+ } catch {
+ return false
+ }
+}
+
+function mediaValues (dimensions: CssxDimensions | undefined): Record {
+ const width = dimensions?.width ?? 0
+ const height = dimensions?.height ?? 0
+
+ return {
+ type: dimensions?.type ?? 'screen',
+ width: `${width}px`,
+ height: `${height}px`,
+ 'device-width': `${width}px`,
+ 'device-height': `${height}px`,
+ orientation: width >= height ? 'landscape' : 'portrait'
+ }
+}
+
+function stripMediaPrefix (media: string): string {
+ return media.replace(/^@media\s*/i, '').trim()
+}
+
+function getPartPropName (part: string | null): string {
+ return part ? `${part}Style` : 'style'
+}
+
+function normalizeLayers (
+ layers: CssxLayerInput | readonly CssxLayerInput[] | undefined
+): NormalizedLayer[] {
+ const input = layers == null
+ ? []
+ : Array.isArray(layers)
+ ? layers
+ : [layers]
+
+ return input.map(layer => {
+ if (typeof layer === 'string') {
+ return { sheet: compileRawCss(layer), values: [] }
+ }
+
+ if (isCompiledSheet(layer)) {
+ return { sheet: layer, values: [] }
+ }
+
+ const sheet = typeof layer.sheet === 'string'
+ ? compileRawCss(layer.sheet)
+ : layer.sheet
+
+ return {
+ sheet,
+ values: layer.values ?? [],
+ cacheKey: layer.cacheKey
+ }
+ })
+}
+
+function compileRawCss (css: string): CompiledCssSheet {
+ if (css === lastRawCss && lastRawSheet) return lastRawSheet
+ lastRawCss = css
+ lastRawSheet = compileCss(css, { mode: 'runtime' })
+ return lastRawSheet
+}
+
+function isCompiledSheet (value: unknown): value is CompiledCssSheet {
+ return Boolean(
+ value &&
+ typeof value === 'object' &&
+ (value as { version?: unknown }).version === 1 &&
+ Array.isArray((value as { rules?: unknown }).rules)
+ )
+}
+
+function normalizeStyleName (value: StyleNameValue): string[] {
+ const className = classcat(value)
+ return className.split(/\s+/).filter(Boolean).sort()
+}
+
+function classcat (value: StyleNameValue): string {
+ if (value == null || value === false) return ''
+ if (typeof value === 'string' || typeof value === 'number') return value ? String(value) : ''
+
+ if (Array.isArray(value)) {
+ let output = ''
+ for (const item of value) {
+ const nested = classcat(item)
+ if (nested) output += (output ? ' ' : '') + nested
+ }
+ return output
+ }
+
+ let output = ''
+ const record = value as Record
+ for (const key of Object.keys(record)) {
+ if (record[key]) output += (output ? ' ' : '') + key
+ }
+ return output
+}
+
+function mergeInlineStyleProps (
+ props: ResolvedStyleProps,
+ inlineStyleProps: InlineStyleInput
+): void {
+ if (!inlineStyleProps) return
+
+ if (isStylePropsInput(inlineStyleProps)) {
+ for (const propName of Object.keys(inlineStyleProps)) {
+ mergeStyleProp(props, propName, inlineStyleProps[propName])
+ }
+ return
+ }
+
+ mergeStyleProp(props, 'style', inlineStyleProps)
+}
+
+function isStylePropsInput (value: TransformStyle | ResolvedStyleProps): value is ResolvedStyleProps {
+ return Object.keys(value).some(key => key === 'style' || key.endsWith('Style'))
+}
+
+function mergeStyleProp (
+ props: ResolvedStyleProps,
+ propName: string,
+ style: TransformStyleValue
+): void {
+ if (style == null || style === false) return
+
+ const current = props[propName]
+ const flattened: TransformStyle = {}
+ flattenStyleInto(current, flattened)
+ flattenStyleInto(style, flattened)
+ props[propName] = flattened
+}
+
+function flattenStyleInto (
+ value: TransformStyleValue,
+ output: TransformStyle
+): void {
+ if (value == null || value === false) return
+ if (Array.isArray(value)) {
+ for (const item of value) flattenStyleInto(item, output)
+ return
+ }
+ if (typeof value === 'object') Object.assign(output, value)
+}
+
+function createStableKey (
+ options: ResolveCssxOptions,
+ classNames: readonly string[],
+ layers: readonly NormalizedLayer[],
+ inlineHash: string
+): string {
+ return JSON.stringify({
+ target: options.target ?? 'react-native',
+ styleName: classNames,
+ inline: inlineHash,
+ layers: layers.map(layer => ({
+ id: layer.sheet.id,
+ contentHash: layer.sheet.contentHash,
+ cacheKey: layer.cacheKey == null ? undefined : identityFor(layer.cacheKey)
+ }))
+ })
+}
+
+function createDynamicSignature (
+ dependencies: ResolveCssxDependencies,
+ options: ResolveCssxOptions
+): string {
+ return JSON.stringify({
+ vars: dependencies.vars.map(name => [
+ name,
+ valueFromRecord(options.variables, name) ??
+ valueFromRecord(options.defaultVariables, name)
+ ]),
+ dimensions: dependencies.dimensions
+ ? {
+ width: options.dimensions?.width ?? 0,
+ height: options.dimensions?.height ?? 0,
+ type: options.dimensions?.type ?? 'screen'
+ }
+ : undefined,
+ media: dependencies.media.map(query => [
+ query,
+ matchesMediaQuery(query, options.dimensions, options.mediaQueryEvaluator)
+ ])
+ })
+}
+
+function hashInlineStyleProps (inlineStyleProps: InlineStyleInput): string | undefined {
+ if (!inlineStyleProps) return '0'
+
+ try {
+ return String(simpleNumericHash(JSON.stringify(inlineStyleProps)))
+ } catch {
+ return undefined
+ }
+}
+
+function flattenLayerValues (layers: readonly NormalizedLayer[]): readonly unknown[] {
+ const values: unknown[] = []
+ for (const layer of layers) values.push(...layer.values)
+ return values
+}
+
+function sameValues (
+ left: readonly unknown[],
+ right: readonly unknown[]
+): boolean {
+ if (left.length !== right.length) return false
+ for (let index = 0; index < left.length; index++) {
+ if (!Object.is(left[index], right[index])) return false
+ }
+ return true
+}
+
+function remember (
+ cache: CssxCache,
+ key: string,
+ entry: ResolveCacheEntry
+): void {
+ cache.entries.delete(key)
+ cache.entries.set(key, entry)
+
+ while (cache.entries.size > cache.maxEntries) {
+ const oldestKey = cache.entries.keys().next().value
+ if (oldestKey == null) break
+ cache.entries.delete(oldestKey)
+ }
+}
+
+function identityFor (value: unknown): string {
+ if (value && (typeof value === 'object' || typeof value === 'function')) {
+ const object = value as object
+ const existing = unknownObjectIds.get(object)
+ if (existing != null) return `o:${existing}`
+ const id = ++unknownIdentityCounter
+ unknownObjectIds.set(object, id)
+ return `o:${id}`
+ }
+
+ const existing = unknownPrimitiveIds.get(value)
+ if (existing != null) return `p:${existing}`
+ const id = ++unknownIdentityCounter
+ unknownPrimitiveIds.set(value, id)
+ return `p:${id}`
+}
+
+function createDependencies (): MutableDependencies {
+ return {
+ vars: new Set(),
+ dimensions: false,
+ media: new Set(),
+ sheets: new Set()
+ }
+}
+
+function serializeDependencies (
+ dependencies: MutableDependencies
+): ResolveCssxDependencies {
+ return {
+ vars: Array.from(dependencies.vars).sort(),
+ dimensions: dependencies.dimensions,
+ media: Array.from(dependencies.media).sort(),
+ sheets: Array.from(dependencies.sheets).sort()
+ }
+}
+
+function toCssxDiagnostic (item: {
+ code: CssxDiagnostic['code']
+ message: string
+}): CssxDiagnostic {
+ return diagnostic(item.code, item.message, 'warning')
+}
+
+function valueFromRecord (record: Record | undefined, key: string): unknown {
+ if (!record || !Object.prototype.hasOwnProperty.call(record, key)) return undefined
+ return record[key]
+}
diff --git a/packages/css-to-rn/src/selectors.ts b/packages/css-to-rn/src/selectors.ts
new file mode 100644
index 0000000..29b6b12
--- /dev/null
+++ b/packages/css-to-rn/src/selectors.ts
@@ -0,0 +1,72 @@
+import { diagnostic } from './diagnostics.ts'
+import type { CssxDiagnostic, SelectorParseResult } from './types.ts'
+
+const PART_RE = /::?part\(([^)]+)\)$/
+const PSEUDO_PARTS: Record = {
+ ':hover': 'hover',
+ ':active': 'active'
+}
+
+export function parseSelector (selector: string, position?: { line?: number, column?: number }): {
+ result?: SelectorParseResult
+ diagnostic?: CssxDiagnostic
+} {
+ const original = selector.trim()
+ let current = original
+ let part: string | null = null
+
+ const partMatch = current.match(PART_RE)
+ if (partMatch) {
+ part = partMatch[1].trim()
+ current = current.slice(0, partMatch.index).trim()
+ } else {
+ for (const pseudo of Object.keys(PSEUDO_PARTS)) {
+ if (current.endsWith(pseudo)) {
+ part = PSEUDO_PARTS[pseudo]
+ current = current.slice(0, -pseudo.length).trim()
+ break
+ }
+ }
+ }
+
+ if (!current.startsWith('.')) {
+ return unsupported(original, position)
+ }
+
+ if (
+ current.includes(' ') ||
+ current.includes('>') ||
+ current.includes('+') ||
+ current.includes('~') ||
+ current.includes('[') ||
+ current.includes('#') ||
+ current.includes(':')
+ ) {
+ return unsupported(original, position)
+ }
+
+ const classes = current.split('.').filter(Boolean)
+ if (classes.length === 0 || classes.some(name => !/^[_a-zA-Z][-_a-zA-Z0-9]*$/.test(name))) {
+ return unsupported(original, position)
+ }
+
+ return {
+ result: {
+ selector: original,
+ classes,
+ part,
+ specificity: classes.length
+ }
+ }
+}
+
+function unsupported (selector: string, position?: { line?: number, column?: number }) {
+ return {
+ diagnostic: diagnostic(
+ 'UNSUPPORTED_SELECTOR',
+ `Unsupported selector "${selector}" ignored. CSSX supports class combinations and :part()/:hover/:active only.`,
+ 'warning',
+ position
+ )
+ }
+}
diff --git a/packages/css-to-rn/src/transform/index.ts b/packages/css-to-rn/src/transform/index.ts
new file mode 100644
index 0000000..500bf33
--- /dev/null
+++ b/packages/css-to-rn/src/transform/index.ts
@@ -0,0 +1,1563 @@
+export type CssPlatform = 'react-native' | 'web'
+
+export type TransformStyleValue =
+ | string
+ | number
+ | boolean
+ | null
+ | undefined
+ | TransformStyle
+ | TransformStyleValue[]
+
+export interface TransformStyle {
+ [property: string]: TransformStyleValue
+}
+
+export interface CssDeclaration {
+ property: string
+ raw?: string
+ value?: string
+ order?: number
+}
+
+export interface TransformDeclarationOptions {
+ platform?: CssPlatform
+ keyframes?: Record
+ onInvalid?: 'diagnose' | 'throw'
+ shorthandBlacklist?: readonly string[]
+}
+
+export type TransformDiagnosticCode =
+ | 'INVALID_DECLARATION'
+ | 'UNSUPPORTED_BACKGROUND_IMAGE'
+ | 'UNSUPPORTED_BACKGROUND_SHORTHAND'
+
+export interface TransformDiagnostic {
+ code: TransformDiagnosticCode
+ property: string
+ value: string
+ message: string
+ order?: number
+}
+
+export interface TransformDeclarationResult {
+ style: TransformStyle
+ diagnostics: TransformDiagnostic[]
+}
+
+interface PropertyTransformContext {
+ platform: CssPlatform
+ keyframes: Record
+}
+
+interface PropertyTransformResult {
+ style: TransformStyle
+ diagnostics?: TransformDiagnostic[]
+}
+
+type PropertyTransform = (
+ property: string,
+ value: string,
+ declaration: CssDeclaration,
+ context: PropertyTransformContext
+) => PropertyTransformResult
+
+const numberPattern =
+ '[+-]?(?:(?:\\d+\\.\\d+)|(?:\\d+\\.)|(?:\\.\\d+)|(?:\\d+))(?:e[+-]?\\d+)?'
+const numberRe = new RegExp(`^${numberPattern}$`, 'i')
+const numberOrLengthRe = new RegExp(`^(${numberPattern})([a-z%]*)$`, 'i')
+const timeRe = new RegExp(`^${numberPattern}(?:ms|s)$`, 'i')
+const angleRe = new RegExp(`^${numberPattern}(?:deg|rad|grad|turn)$`, 'i')
+const hexColorRe = /^(?:#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8}))$/i
+const colorFunctionRe =
+ /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|gray|color)\(/i
+const supportedLengthUnits = new Set([
+ 'ch',
+ 'cm',
+ 'em',
+ 'ex',
+ 'in',
+ 'mm',
+ 'pc',
+ 'pt',
+ 'rem',
+ 'vh',
+ 'vmax',
+ 'vmin',
+ 'vw',
+])
+const borderStyles = new Set([
+ 'solid',
+ 'dashed',
+ 'dotted',
+ 'double',
+ 'groove',
+ 'ridge',
+ 'inset',
+ 'outset',
+])
+const timingFunctionKeywords = new Set([
+ 'ease',
+ 'linear',
+ 'ease-in',
+ 'ease-out',
+ 'ease-in-out',
+ 'step-start',
+ 'step-end',
+])
+const animationDirectionKeywords = new Set([
+ 'normal',
+ 'reverse',
+ 'alternate',
+ 'alternate-reverse',
+])
+const animationFillModeKeywords = new Set([
+ 'none',
+ 'forwards',
+ 'backwards',
+ 'both',
+])
+const animationPlayStateKeywords = new Set(['running', 'paused'])
+const cssColorKeywords = new Set([
+ 'aliceblue',
+ 'antiquewhite',
+ 'aqua',
+ 'aquamarine',
+ 'azure',
+ 'beige',
+ 'bisque',
+ 'black',
+ 'blanchedalmond',
+ 'blue',
+ 'blueviolet',
+ 'brown',
+ 'burlywood',
+ 'cadetblue',
+ 'chartreuse',
+ 'chocolate',
+ 'coral',
+ 'cornflowerblue',
+ 'cornsilk',
+ 'crimson',
+ 'cyan',
+ 'darkblue',
+ 'darkcyan',
+ 'darkgoldenrod',
+ 'darkgray',
+ 'darkgreen',
+ 'darkgrey',
+ 'darkkhaki',
+ 'darkmagenta',
+ 'darkolivegreen',
+ 'darkorange',
+ 'darkorchid',
+ 'darkred',
+ 'darksalmon',
+ 'darkseagreen',
+ 'darkslateblue',
+ 'darkslategray',
+ 'darkslategrey',
+ 'darkturquoise',
+ 'darkviolet',
+ 'deeppink',
+ 'deepskyblue',
+ 'dimgray',
+ 'dimgrey',
+ 'dodgerblue',
+ 'firebrick',
+ 'floralwhite',
+ 'forestgreen',
+ 'fuchsia',
+ 'gainsboro',
+ 'ghostwhite',
+ 'gold',
+ 'goldenrod',
+ 'gray',
+ 'green',
+ 'greenyellow',
+ 'grey',
+ 'honeydew',
+ 'hotpink',
+ 'indianred',
+ 'indigo',
+ 'ivory',
+ 'khaki',
+ 'lavender',
+ 'lavenderblush',
+ 'lawngreen',
+ 'lemonchiffon',
+ 'lightblue',
+ 'lightcoral',
+ 'lightcyan',
+ 'lightgoldenrodyellow',
+ 'lightgray',
+ 'lightgreen',
+ 'lightgrey',
+ 'lightpink',
+ 'lightsalmon',
+ 'lightseagreen',
+ 'lightskyblue',
+ 'lightslategray',
+ 'lightslategrey',
+ 'lightsteelblue',
+ 'lightyellow',
+ 'lime',
+ 'limegreen',
+ 'linen',
+ 'magenta',
+ 'maroon',
+ 'mediumaquamarine',
+ 'mediumblue',
+ 'mediumorchid',
+ 'mediumpurple',
+ 'mediumseagreen',
+ 'mediumslateblue',
+ 'mediumspringgreen',
+ 'mediumturquoise',
+ 'mediumvioletred',
+ 'midnightblue',
+ 'mintcream',
+ 'mistyrose',
+ 'moccasin',
+ 'navajowhite',
+ 'navy',
+ 'oldlace',
+ 'olive',
+ 'olivedrab',
+ 'orange',
+ 'orangered',
+ 'orchid',
+ 'palegoldenrod',
+ 'palegreen',
+ 'paleturquoise',
+ 'palevioletred',
+ 'papayawhip',
+ 'peachpuff',
+ 'peru',
+ 'pink',
+ 'plum',
+ 'powderblue',
+ 'purple',
+ 'rebeccapurple',
+ 'red',
+ 'rosybrown',
+ 'royalblue',
+ 'saddlebrown',
+ 'salmon',
+ 'sandybrown',
+ 'seagreen',
+ 'seashell',
+ 'sienna',
+ 'silver',
+ 'skyblue',
+ 'slateblue',
+ 'slategray',
+ 'slategrey',
+ 'snow',
+ 'springgreen',
+ 'steelblue',
+ 'tan',
+ 'teal',
+ 'thistle',
+ 'tomato',
+ 'transparent',
+ 'turquoise',
+ 'violet',
+ 'wheat',
+ 'white',
+ 'whitesmoke',
+ 'yellow',
+ 'yellowgreen',
+])
+
+const shorthandTransforms: Record = {
+ animation: transformAnimation,
+ animationDelay: transformAnimationLonghand,
+ animationDirection: transformAnimationLonghand,
+ animationDuration: transformAnimationLonghand,
+ animationFillMode: transformAnimationLonghand,
+ animationIterationCount: transformAnimationLonghand,
+ animationName: transformAnimationLonghand,
+ animationPlayState: transformAnimationLonghand,
+ animationTimingFunction: transformAnimationLonghand,
+ background: transformBackground,
+ backgroundImage: transformBackgroundImage,
+ border: transformBorder,
+ borderColor: transformDirectionalColor,
+ borderRadius: transformBorderRadius,
+ borderStyle: transformDirectionalBorderStyle,
+ borderWidth: transformDirectionalWidth,
+ boxShadow: passthroughString,
+ filter: passthroughString,
+ margin: transformMargin,
+ padding: transformPadding,
+ textShadow: transformTextShadow,
+ transform: transformTransform,
+ transition: transformTransition,
+ transitionDelay: transformTransitionLonghand,
+ transitionDuration: transformTransitionLonghand,
+ transitionProperty: transformTransitionLonghand,
+ transitionTimingFunction: transformTransitionLonghand,
+}
+
+export function transformDeclarations (
+ declarations: readonly CssDeclaration[],
+ options: TransformDeclarationOptions = {}
+): TransformDeclarationResult {
+ const style: TransformStyle = {}
+ const diagnostics: TransformDiagnostic[] = []
+ const shorthandBlacklist = new Set(options.shorthandBlacklist ?? [])
+ const context: PropertyTransformContext = {
+ platform: options.platform ?? 'react-native',
+ keyframes: options.keyframes ?? {},
+ }
+
+ const orderedDeclarations = declarations
+ .map((declaration, index) => ({ declaration, index }))
+ .sort((left, right) => {
+ const leftOrder = left.declaration.order ?? left.index
+ const rightOrder = right.declaration.order ?? right.index
+ return leftOrder - rightOrder || left.index - right.index
+ })
+
+ for (const { declaration } of orderedDeclarations) {
+ const property = getPropertyName(declaration.property)
+ const value = getDeclarationValue(declaration)
+
+ if (property.startsWith('--')) continue
+ if (value.length === 0) continue
+
+ try {
+ const transformer = shorthandBlacklist.has(property)
+ ? undefined
+ : shorthandTransforms[property]
+ const result =
+ transformer == null
+ ? transformRawProperty(property, value)
+ : transformer(property, value, declaration, context)
+
+ Object.assign(style, result.style)
+ if (result.diagnostics != null) diagnostics.push(...result.diagnostics)
+ } catch (error) {
+ if (options.onInvalid === 'throw') throw error
+ diagnostics.push({
+ code: 'INVALID_DECLARATION',
+ property: declaration.property,
+ value,
+ message:
+ error instanceof Error
+ ? error.message
+ : `Failed to parse declaration "${declaration.property}: ${value}"`,
+ order: declaration.order,
+ })
+ }
+ }
+
+ inlineAnimationKeyframes(style, context.keyframes)
+
+ return { style, diagnostics }
+}
+
+export function getPropertyName (property: string): string {
+ const trimmed = property.trim()
+ if (trimmed.startsWith('--')) return trimmed
+
+ return trimmed.replace(/-([a-z])/g, (_, character: string) =>
+ character.toUpperCase()
+ )
+}
+
+export function transformRawValue (value: string): TransformStyleValue {
+ const trimmed = value.trim()
+ const numberMatch = trimmed.match(numberOrLengthRe)
+
+ if (numberMatch != null) {
+ const number = Number(numberMatch[1])
+ const unit = numberMatch[2].toLowerCase()
+
+ if (unit === '' || unit === 'px') return number
+ if (unit === 'u') return number * 8
+ }
+
+ if (/^(?:true|false)$/i.test(trimmed)) {
+ return trimmed.toLowerCase() === 'true'
+ }
+ if (/^null$/i.test(trimmed)) return null
+ if (/^undefined$/i.test(trimmed)) return undefined
+
+ return trimmed
+}
+
+function getDeclarationValue (declaration: CssDeclaration): string {
+ if (typeof declaration.value === 'string') return declaration.value.trim()
+ if (typeof declaration.raw === 'string') {
+ const raw = declaration.raw.trim()
+ const colonIndex = raw.indexOf(':')
+ if (colonIndex === -1) return raw
+ return raw.slice(colonIndex + 1).replace(/;$/, '').trim()
+ }
+ return ''
+}
+
+function transformRawProperty (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ return { style: { [property]: transformRawValue(value) } }
+}
+
+function passthroughString (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ return { style: { [property]: value.trim() } }
+}
+
+function transformMargin (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ return {
+ style: expandDirectionalValues({
+ directions: ['Top', 'Right', 'Bottom', 'Left'],
+ prefix: property,
+ values: parseDirectionalValues(value, valueToken =>
+ parseLength(valueToken, { allowAuto: true, allowPercent: true })
+ ),
+ }),
+ }
+}
+
+function transformPadding (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ return {
+ style: expandDirectionalValues({
+ directions: ['Top', 'Right', 'Bottom', 'Left'],
+ prefix: property,
+ values: parseDirectionalValues(value, valueToken =>
+ parseLength(valueToken, { allowPercent: true })
+ ),
+ }),
+ }
+}
+
+function transformDirectionalWidth (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ return {
+ style: expandDirectionalValues({
+ directions: ['Top', 'Right', 'Bottom', 'Left'],
+ prefix: 'border',
+ suffix: 'Width',
+ values: parseDirectionalValues(value, valueToken =>
+ parseLength(valueToken, { allowPercent: false })
+ ),
+ }),
+ }
+}
+
+function transformDirectionalColor (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ return {
+ style: expandDirectionalValues({
+ directions: ['Top', 'Right', 'Bottom', 'Left'],
+ prefix: 'border',
+ suffix: 'Color',
+ values: parseDirectionalValues(value, parseColor),
+ }),
+ }
+}
+
+function transformDirectionalBorderStyle (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ return {
+ style: expandDirectionalValues({
+ directions: ['Top', 'Right', 'Bottom', 'Left'],
+ prefix: 'border',
+ suffix: 'Style',
+ values: parseDirectionalValues(value, parseBorderStyle),
+ }),
+ }
+}
+
+function transformBorderRadius (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ if (value.includes('/')) {
+ throw new Error(`Unsupported elliptical border-radius "${value}"`)
+ }
+
+ return {
+ style: expandDirectionalValues({
+ directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
+ prefix: 'border',
+ suffix: 'Radius',
+ values: parseDirectionalValues(value, valueToken =>
+ parseLength(valueToken, { allowPercent: false })
+ ),
+ }),
+ }
+}
+
+function transformBorder (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ const trimmed = value.trim()
+ if (trimmed.toLowerCase() === 'none') {
+ return {
+ style: {
+ borderWidth: 0,
+ borderColor: 'black',
+ borderStyle: 'solid',
+ },
+ }
+ }
+
+ const tokens = splitByWhitespace(trimmed)
+ if (tokens.length === 0 || tokens.length > 3) {
+ throw new Error(`Unsupported border shorthand "${value}"`)
+ }
+
+ let borderWidth: TransformStyleValue | undefined
+ let borderColor: string | undefined
+ let borderStyle: string | undefined
+
+ for (const token of tokens) {
+ if (borderWidth === undefined && isLength(token, false)) {
+ borderWidth = parseLength(token, { allowPercent: false })
+ } else if (borderColor === undefined && isColor(token)) {
+ borderColor = token
+ } else if (
+ borderStyle === undefined &&
+ borderStyles.has(token.toLowerCase())
+ ) {
+ borderStyle = token.toLowerCase()
+ } else {
+ throw new Error(`Unsupported border shorthand "${value}"`)
+ }
+ }
+
+ return {
+ style: {
+ borderWidth: borderWidth ?? 1,
+ borderColor: borderColor ?? 'black',
+ borderStyle: borderStyle ?? 'solid',
+ },
+ }
+}
+
+function transformTransform (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ const parts = parseFunctionSequence(value)
+ const transforms: TransformStyleValue[] = []
+
+ for (const part of parts) {
+ const args = parseFunctionArguments(part.arguments)
+ const transformed = transformTransformFunction(part.name, args)
+ transforms.unshift(...transformed)
+ }
+
+ return { style: { transform: transforms } }
+}
+
+function transformTransformFunction (
+ name: string,
+ args: readonly string[]
+): TransformStyle[] {
+ if (name === 'perspective') {
+ expectArgumentCount(name, args, 1, 1)
+ return [{ perspective: parseNumber(args[0]) }]
+ }
+
+ if (name === 'scale') {
+ expectArgumentCount(name, args, 1, 2)
+ const x = parseNumber(args[0])
+ if (args.length === 1) return [{ scale: x }]
+ return [{ scaleY: parseNumber(args[1]) }, { scaleX: x }]
+ }
+
+ if (name === 'scaleX' || name === 'scaleY') {
+ expectArgumentCount(name, args, 1, 1)
+ return [{ [name]: parseNumber(args[0]) }]
+ }
+
+ if (name === 'translate') {
+ expectArgumentCount(name, args, 1, 2)
+ const x = parseLength(args[0], { allowPercent: true })
+ const y =
+ args.length === 2 ? parseLength(args[1], { allowPercent: true }) : 0
+ return [{ translateY: y }, { translateX: x }]
+ }
+
+ if (name === 'translateX' || name === 'translateY') {
+ expectArgumentCount(name, args, 1, 1)
+ return [{ [name]: parseLength(args[0], { allowPercent: true }) }]
+ }
+
+ if (
+ name === 'rotate' ||
+ name === 'rotateX' ||
+ name === 'rotateY' ||
+ name === 'rotateZ' ||
+ name === 'skewX' ||
+ name === 'skewY'
+ ) {
+ expectArgumentCount(name, args, 1, 1)
+ return [{ [name]: parseAngle(args[0]) }]
+ }
+
+ if (name === 'skew') {
+ expectArgumentCount(name, args, 1, 2)
+ return [
+ { skewY: args.length === 2 ? parseAngle(args[1]) : '0deg' },
+ { skewX: parseAngle(args[0]) },
+ ]
+ }
+
+ throw new Error(`Unsupported transform function "${name}"`)
+}
+
+function transformTextShadow (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ const trimmed = value.trim()
+ if (trimmed.toLowerCase() === 'none') {
+ return {
+ style: {
+ textShadowOffset: { width: 0, height: 0 },
+ textShadowRadius: 0,
+ textShadowColor: 'black',
+ },
+ }
+ }
+
+ const tokens = splitByWhitespace(trimmed)
+ let color: string | undefined
+ const lengths: TransformStyleValue[] = []
+
+ for (const token of tokens) {
+ if (color === undefined && isColor(token)) {
+ color = token
+ } else if (isLength(token, false)) {
+ lengths.push(parseLength(token, { allowPercent: false }))
+ } else {
+ throw new Error(`Unsupported text-shadow "${value}"`)
+ }
+ }
+
+ if (lengths.length < 2 || lengths.length > 3) {
+ throw new Error(`Unsupported text-shadow "${value}"`)
+ }
+
+ return {
+ style: {
+ textShadowOffset: { width: lengths[0], height: lengths[1] },
+ textShadowRadius: lengths[2] ?? 0,
+ textShadowColor: color ?? 'black',
+ },
+ }
+}
+
+function transformAnimation (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ const trimmed = value.trim()
+ if (trimmed.toLowerCase() === 'none') {
+ return {
+ style: {
+ animationName: 'none',
+ animationDuration: '0s',
+ animationTimingFunction: 'ease',
+ animationDelay: '0s',
+ animationIterationCount: 1,
+ animationDirection: 'normal',
+ animationFillMode: 'none',
+ animationPlayState: 'running',
+ },
+ }
+ }
+
+ const animations = splitTopLevel(trimmed, ',').map(parseSingleAnimation)
+ const isSingle = animations.length === 1
+
+ return {
+ style: {
+ animationName: singleOrArray(
+ animations.map(animation => animation.name),
+ isSingle
+ ),
+ animationDuration: singleOrArray(
+ animations.map(animation => animation.duration),
+ isSingle
+ ),
+ animationTimingFunction: singleOrArray(
+ animations.map(animation => animation.timingFunction),
+ isSingle
+ ),
+ animationDelay: singleOrArray(
+ animations.map(animation => animation.delay),
+ isSingle
+ ),
+ animationIterationCount: singleOrArray(
+ animations.map(animation => animation.iterationCount),
+ isSingle
+ ),
+ animationDirection: singleOrArray(
+ animations.map(animation => animation.direction),
+ isSingle
+ ),
+ animationFillMode: singleOrArray(
+ animations.map(animation => animation.fillMode),
+ isSingle
+ ),
+ animationPlayState: singleOrArray(
+ animations.map(animation => animation.playState),
+ isSingle
+ ),
+ },
+ }
+}
+
+function transformAnimationLonghand (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ if (property === 'animationName') {
+ return {
+ style: { animationName: parseCommaSeparated(value, parseIdentifier) },
+ }
+ }
+ if (property === 'animationDuration') {
+ return {
+ style: { animationDuration: parseCommaSeparated(value, parseTime) },
+ }
+ }
+ if (property === 'animationTimingFunction') {
+ return {
+ style: {
+ animationTimingFunction: parseCommaSeparated(
+ value,
+ parseTimingFunction
+ ),
+ },
+ }
+ }
+ if (property === 'animationDelay') {
+ return { style: { animationDelay: parseCommaSeparated(value, parseTime) } }
+ }
+ if (property === 'animationIterationCount') {
+ return {
+ style: {
+ animationIterationCount: parseCommaSeparated(
+ value,
+ parseIterationCount
+ ),
+ },
+ }
+ }
+ if (property === 'animationDirection') {
+ return {
+ style: {
+ animationDirection: parseCommaSeparated(value, valueToken =>
+ parseKeyword(valueToken, animationDirectionKeywords)
+ ),
+ },
+ }
+ }
+ if (property === 'animationFillMode') {
+ return {
+ style: {
+ animationFillMode: parseCommaSeparated(value, valueToken =>
+ parseKeyword(valueToken, animationFillModeKeywords)
+ ),
+ },
+ }
+ }
+ if (property === 'animationPlayState') {
+ return {
+ style: {
+ animationPlayState: parseCommaSeparated(value, valueToken =>
+ parseKeyword(valueToken, animationPlayStateKeywords)
+ ),
+ },
+ }
+ }
+
+ throw new Error(`Unsupported animation property "${property}"`)
+}
+
+function transformTransition (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ const trimmed = value.trim()
+ if (trimmed.toLowerCase() === 'none') {
+ return {
+ style: {
+ transitionProperty: 'none',
+ transitionDuration: '0s',
+ transitionTimingFunction: 'ease',
+ transitionDelay: '0s',
+ },
+ }
+ }
+
+ const transitions = splitTopLevel(trimmed, ',').map(parseSingleTransition)
+ const isSingle = transitions.length === 1
+
+ return {
+ style: {
+ transitionProperty: singleOrArray(
+ transitions.map(transition => transition.property),
+ isSingle
+ ),
+ transitionDuration: singleOrArray(
+ transitions.map(transition => transition.duration),
+ isSingle
+ ),
+ transitionTimingFunction: singleOrArray(
+ transitions.map(transition => transition.timingFunction),
+ isSingle
+ ),
+ transitionDelay: singleOrArray(
+ transitions.map(transition => transition.delay),
+ isSingle
+ ),
+ },
+ }
+}
+
+function transformTransitionLonghand (
+ property: string,
+ value: string
+): PropertyTransformResult {
+ if (property === 'transitionProperty') {
+ return {
+ style: {
+ transitionProperty: parseCommaSeparated(
+ value,
+ parseTransitionProperty
+ ),
+ },
+ }
+ }
+ if (property === 'transitionDuration') {
+ return {
+ style: { transitionDuration: parseCommaSeparated(value, parseTime) },
+ }
+ }
+ if (property === 'transitionTimingFunction') {
+ return {
+ style: {
+ transitionTimingFunction: parseCommaSeparated(
+ value,
+ parseTimingFunction
+ ),
+ },
+ }
+ }
+ if (property === 'transitionDelay') {
+ return { style: { transitionDelay: parseCommaSeparated(value, parseTime) } }
+ }
+
+ throw new Error(`Unsupported transition property "${property}"`)
+}
+
+function transformBackgroundImage (
+ property: string,
+ value: string,
+ declaration: CssDeclaration,
+ context: PropertyTransformContext
+): PropertyTransformResult {
+ const trimmed = value.trim()
+ if (!isSupportedBackgroundImageValue(trimmed)) {
+ return {
+ style: {},
+ diagnostics: [
+ createDiagnostic(
+ 'UNSUPPORTED_BACKGROUND_IMAGE',
+ property,
+ value,
+ `Unsupported background image "${value}"`,
+ declaration
+ ),
+ ],
+ }
+ }
+
+ return {
+ style: {
+ [backgroundImageProperty(context.platform)]: trimmed,
+ },
+ }
+}
+
+function transformBackground (
+ property: string,
+ value: string,
+ declaration: CssDeclaration,
+ context: PropertyTransformContext
+): PropertyTransformResult {
+ const trimmed = value.trim()
+
+ if (isColor(trimmed)) {
+ return { style: { backgroundColor: trimmed } }
+ }
+
+ if (isSupportedBackgroundImageValue(trimmed)) {
+ return {
+ style: { [backgroundImageProperty(context.platform)]: trimmed },
+ }
+ }
+
+ if (containsUnsupportedBackgroundImage(trimmed)) {
+ return {
+ style: {},
+ diagnostics: [
+ createDiagnostic(
+ 'UNSUPPORTED_BACKGROUND_IMAGE',
+ property,
+ value,
+ `Unsupported background image "${value}"`,
+ declaration
+ ),
+ ],
+ }
+ }
+
+ const tokens = splitByWhitespace(trimmed)
+ if (tokens.length === 2) {
+ const firstIsColor = isColor(tokens[0])
+ const secondIsColor = isColor(tokens[1])
+ const firstIsImage = isSupportedBackgroundImageValue(tokens[0])
+ const secondIsImage = isSupportedBackgroundImageValue(tokens[1])
+
+ if (firstIsColor && secondIsImage) {
+ return {
+ style: {
+ backgroundColor: tokens[0],
+ [backgroundImageProperty(context.platform)]: tokens[1],
+ },
+ }
+ }
+
+ if (firstIsImage && secondIsColor) {
+ return {
+ style: {
+ backgroundColor: tokens[1],
+ [backgroundImageProperty(context.platform)]: tokens[0],
+ },
+ }
+ }
+ }
+
+ return {
+ style: {},
+ diagnostics: [
+ createDiagnostic(
+ 'UNSUPPORTED_BACKGROUND_SHORTHAND',
+ property,
+ value,
+ `Unsupported background shorthand "${value}"`,
+ declaration
+ ),
+ ],
+ }
+}
+
+function parseSingleAnimation (value: string): {
+ name: string
+ duration: string
+ timingFunction: string
+ delay: string
+ iterationCount: string | number
+ direction: string
+ fillMode: string
+ playState: string
+} {
+ const tokens = splitByWhitespace(value)
+ let name: string | undefined
+ let duration: string | undefined
+ let timingFunction: string | undefined
+ let delay: string | undefined
+ let iterationCount: string | number | undefined
+ let direction: string | undefined
+ let fillMode: string | undefined
+ let playState: string | undefined
+
+ for (const token of tokens) {
+ const lower = token.toLowerCase()
+
+ if (isTime(token)) {
+ if (duration == null) duration = token
+ else if (delay == null) delay = token
+ else throw new Error(`Unsupported animation "${value}"`)
+ } else if (isTimingFunction(token)) {
+ timingFunction = token
+ } else if (animationDirectionKeywords.has(lower)) {
+ direction = lower
+ } else if (animationFillModeKeywords.has(lower)) {
+ fillMode = lower
+ } else if (animationPlayStateKeywords.has(lower)) {
+ playState = lower
+ } else if (lower === 'infinite') {
+ iterationCount = 'infinite'
+ } else if (numberRe.test(token)) {
+ iterationCount = Number(token)
+ } else {
+ name = token
+ }
+ }
+
+ return {
+ name: name ?? 'none',
+ duration: duration ?? '0s',
+ timingFunction: timingFunction ?? 'ease',
+ delay: delay ?? '0s',
+ iterationCount: iterationCount ?? 1,
+ direction: direction ?? 'normal',
+ fillMode: fillMode ?? 'none',
+ playState: playState ?? 'running',
+ }
+}
+
+function parseSingleTransition (value: string): {
+ property: string
+ duration: string
+ timingFunction: string
+ delay: string
+} {
+ const tokens = splitByWhitespace(value)
+ let property: string | undefined
+ let duration: string | undefined
+ let timingFunction: string | undefined
+ let delay: string | undefined
+
+ for (const token of tokens) {
+ if (isTime(token)) {
+ if (duration == null) duration = token
+ else if (delay == null) delay = token
+ else throw new Error(`Unsupported transition "${value}"`)
+ } else if (isTimingFunction(token)) {
+ timingFunction = token
+ } else {
+ property = token
+ }
+ }
+
+ return {
+ property: parseTransitionProperty(property ?? 'all'),
+ duration: duration ?? '0s',
+ timingFunction: timingFunction ?? 'ease',
+ delay: delay ?? '0s',
+ }
+}
+
+function parseDirectionalValues (
+ value: string,
+ parseValue: (value: string) => TransformStyleValue
+): TransformStyleValue[] {
+ const tokens = splitByWhitespace(value)
+ if (tokens.length < 1 || tokens.length > 4) {
+ throw new Error(`Expected 1 to 4 values, got "${value}"`)
+ }
+ return tokens.map(parseValue)
+}
+
+function expandDirectionalValues (options: {
+ directions: readonly string[]
+ prefix: string
+ suffix?: string
+ values: readonly TransformStyleValue[]
+}): TransformStyle {
+ const [top, right = top, bottom = top, left = right] = options.values
+ const suffix = options.suffix ?? ''
+ const values = [top, right, bottom, left]
+ const style: TransformStyle = {}
+
+ for (let index = 0; index < options.directions.length; index += 1) {
+ style[`${options.prefix}${options.directions[index]}${suffix}`] =
+ values[index]
+ }
+
+ return style
+}
+
+function parseLength (
+ value: string,
+ options: { allowAuto?: boolean; allowPercent?: boolean } = {}
+): TransformStyleValue {
+ const trimmed = value.trim()
+ const lower = trimmed.toLowerCase()
+
+ if (options.allowAuto === true && lower === 'auto') return 'auto'
+ if (isCalc(trimmed)) return trimmed
+
+ const match = trimmed.match(numberOrLengthRe)
+ if (match == null) {
+ throw new Error(`Expected length value, got "${value}"`)
+ }
+
+ const number = Number(match[1])
+ const unit = match[2].toLowerCase()
+
+ if (unit === '') {
+ if (number === 0) return 0
+ throw new Error(`Expected length unit in "${value}"`)
+ }
+ if (unit === 'px') return number
+ if (unit === 'u') return number * 8
+ if (unit === '%') {
+ if (options.allowPercent === true) return `${match[1]}%`
+ throw new Error(`Percentage is not supported in "${value}"`)
+ }
+ if (supportedLengthUnits.has(unit)) return trimmed
+
+ throw new Error(`Unsupported length unit in "${value}"`)
+}
+
+function parseNumber (value: string): number {
+ const trimmed = value.trim()
+ if (!numberRe.test(trimmed)) {
+ throw new Error(`Expected number value, got "${value}"`)
+ }
+ return Number(trimmed)
+}
+
+function parseAngle (value: string): string {
+ const trimmed = value.trim()
+ if (!angleRe.test(trimmed)) {
+ throw new Error(`Expected angle value, got "${value}"`)
+ }
+ return trimmed.toLowerCase()
+}
+
+function parseColor (value: string): string {
+ const trimmed = value.trim()
+ if (!isColor(trimmed)) throw new Error(`Expected color value, got "${value}"`)
+ return trimmed
+}
+
+function parseBorderStyle (value: string): string {
+ const lower = value.trim().toLowerCase()
+ if (!borderStyles.has(lower)) {
+ throw new Error(`Expected border style value, got "${value}"`)
+ }
+ return lower
+}
+
+function parseTime (value: string): string {
+ const trimmed = value.trim()
+ if (!isTime(trimmed)) throw new Error(`Expected time value, got "${value}"`)
+ return trimmed
+}
+
+function parseTimingFunction (value: string): string {
+ const trimmed = value.trim()
+ if (!isTimingFunction(trimmed)) {
+ throw new Error(`Expected timing function value, got "${value}"`)
+ }
+ return trimmed
+}
+
+function parseIterationCount (value: string): string | number {
+ const trimmed = value.trim()
+ if (trimmed.toLowerCase() === 'infinite') return 'infinite'
+ if (numberRe.test(trimmed)) return Number(trimmed)
+ throw new Error(`Expected iteration count value, got "${value}"`)
+}
+
+function parseIdentifier (value: string): string {
+ const trimmed = value.trim()
+ if (!/^[-_a-z][-_a-z0-9]*$/i.test(trimmed) && trimmed !== 'none') {
+ throw new Error(`Expected identifier value, got "${value}"`)
+ }
+ return trimmed
+}
+
+function parseKeyword (value: string, keywords: ReadonlySet): string {
+ const lower = value.trim().toLowerCase()
+ if (!keywords.has(lower)) {
+ throw new Error(`Expected one of ${Array.from(keywords).join(', ')}`)
+ }
+ return lower
+}
+
+function parseTransitionProperty (value: string): string {
+ const trimmed = value.trim()
+ if (trimmed === 'all' || trimmed === 'none') return trimmed
+ return getPropertyName(trimmed)
+}
+
+function parseCommaSeparated (
+ value: string,
+ parseValue: (value: string) => T
+): T | T[] {
+ const values = splitTopLevel(value, ',').map(parseValue)
+ return values.length === 1 ? values[0] : values
+}
+
+function singleOrArray (values: T[], isSingle: boolean): T | T[] {
+ return isSingle ? values[0] : values
+}
+
+function inlineAnimationKeyframes (
+ style: TransformStyle,
+ keyframes: Record
+): void {
+ if (style.animationName == null) return
+
+ if (Array.isArray(style.animationName)) {
+ style.animationName = style.animationName.map(value =>
+ typeof value === 'string' && value !== 'none' && keyframes[value] != null
+ ? keyframes[value]
+ : value
+ )
+ return
+ }
+
+ if (
+ typeof style.animationName === 'string' &&
+ style.animationName !== 'none' &&
+ keyframes[style.animationName] != null
+ ) {
+ style.animationName = keyframes[style.animationName]
+ }
+}
+
+function isLength (value: string, allowPercent: boolean): boolean {
+ try {
+ parseLength(value, { allowPercent })
+ return true
+ } catch {
+ return false
+ }
+}
+
+function isColor (value: string): boolean {
+ const trimmed = value.trim()
+ const lower = trimmed.toLowerCase()
+ return (
+ hexColorRe.test(trimmed) ||
+ colorFunctionRe.test(trimmed) ||
+ cssColorKeywords.has(lower) ||
+ lower === 'currentcolor'
+ )
+}
+
+function isTime (value: string): boolean {
+ return timeRe.test(value.trim())
+}
+
+function isTimingFunction (value: string): boolean {
+ const trimmed = value.trim()
+ const lower = trimmed.toLowerCase()
+
+ return (
+ timingFunctionKeywords.has(lower) ||
+ isFunctionToken(trimmed, 'cubic-bezier') ||
+ isFunctionToken(trimmed, 'steps') ||
+ isFunctionToken(trimmed, 'linear')
+ )
+}
+
+function isCalc (value: string): boolean {
+ return isFunctionToken(value.trim(), 'calc')
+}
+
+function isSupportedBackgroundImageValue (value: string): boolean {
+ const trimmed = value.trim()
+ if (trimmed.toLowerCase() === 'none') return true
+
+ const layers = splitTopLevel(trimmed, ',')
+ return (
+ layers.length > 0 &&
+ layers.every(
+ layer =>
+ isFunctionToken(layer, 'linear-gradient') ||
+ isFunctionToken(layer, 'radial-gradient')
+ )
+ )
+}
+
+function containsUnsupportedBackgroundImage (value: string): boolean {
+ return /\b(?:url|image-set|cross-fade|element|paint)\s*\(/i.test(value)
+}
+
+function backgroundImageProperty (platform: CssPlatform): string {
+ return platform === 'web' ? 'backgroundImage' : 'experimental_backgroundImage'
+}
+
+function isFunctionToken (value: string, functionName: string): boolean {
+ const trimmed = value.trim()
+ if (!trimmed.toLowerCase().startsWith(`${functionName.toLowerCase()}(`)) {
+ return false
+ }
+ const openIndex = trimmed.indexOf('(')
+ return findMatchingParen(trimmed, openIndex) === trimmed.length - 1
+}
+
+function parseFunctionSequence (
+ value: string
+): Array<{ name: string; arguments: string }> {
+ const functions: Array<{ name: string; arguments: string }> = []
+ let index = 0
+ const source = value.trim()
+
+ while (index < source.length) {
+ while (/\s/.test(source[index] ?? '')) index += 1
+ if (index >= source.length) break
+
+ const nameMatch = source.slice(index).match(/^[-_a-z][-_a-z0-9]*/i)
+ if (nameMatch == null) {
+ throw new Error(`Expected transform function in "${value}"`)
+ }
+
+ const name = nameMatch[0]
+ index += name.length
+ if (source[index] !== '(') {
+ throw new Error(`Expected "(" after transform function "${name}"`)
+ }
+
+ const closeIndex = findMatchingParen(source, index)
+ if (closeIndex === -1) {
+ throw new Error(`Unclosed transform function "${name}"`)
+ }
+
+ functions.push({
+ name,
+ arguments: source.slice(index + 1, closeIndex),
+ })
+ index = closeIndex + 1
+ }
+
+ if (functions.length === 0) {
+ throw new Error(`Expected transform value, got "${value}"`)
+ }
+
+ return functions
+}
+
+function parseFunctionArguments (value: string): string[] {
+ const commaParts = splitTopLevel(value, ',')
+ if (commaParts.length > 1) return commaParts
+ return splitByWhitespace(value)
+}
+
+function expectArgumentCount (
+ functionName: string,
+ args: readonly string[],
+ min: number,
+ max: number
+): void {
+ if (args.length < min || args.length > max) {
+ throw new Error(
+ `Expected ${functionName}() to have ${min === max ? min : `${min}-${max}`} arguments`
+ )
+ }
+}
+
+function splitByWhitespace (value: string): string[] {
+ const parts: string[] = []
+ let current = ''
+ let depth = 0
+ let quote: string | null = null
+ let escaped = false
+
+ for (let index = 0; index < value.length; index += 1) {
+ const character = value[index]
+
+ if (escaped) {
+ current += character
+ escaped = false
+ continue
+ }
+
+ if (character === '\\') {
+ current += character
+ escaped = true
+ continue
+ }
+
+ if (quote != null) {
+ current += character
+ if (character === quote) quote = null
+ continue
+ }
+
+ if (character === '"' || character === "'") {
+ current += character
+ quote = character
+ continue
+ }
+
+ if (character === '(') {
+ depth += 1
+ current += character
+ continue
+ }
+
+ if (character === ')') {
+ depth -= 1
+ if (depth < 0) throw new Error(`Unexpected ")" in "${value}"`)
+ current += character
+ continue
+ }
+
+ if (depth === 0 && /\s/.test(character)) {
+ if (current.length > 0) {
+ parts.push(current)
+ current = ''
+ }
+ continue
+ }
+
+ current += character
+ }
+
+ if (quote != null) throw new Error(`Unclosed string in "${value}"`)
+ if (depth !== 0) throw new Error(`Unclosed function in "${value}"`)
+ if (current.length > 0) parts.push(current)
+
+ return parts
+}
+
+function splitTopLevel (value: string, separator: string): string[] {
+ const parts: string[] = []
+ let current = ''
+ let depth = 0
+ let quote: string | null = null
+ let escaped = false
+
+ for (let index = 0; index < value.length; index += 1) {
+ const character = value[index]
+
+ if (escaped) {
+ current += character
+ escaped = false
+ continue
+ }
+
+ if (character === '\\') {
+ current += character
+ escaped = true
+ continue
+ }
+
+ if (quote != null) {
+ current += character
+ if (character === quote) quote = null
+ continue
+ }
+
+ if (character === '"' || character === "'") {
+ current += character
+ quote = character
+ continue
+ }
+
+ if (character === '(') {
+ depth += 1
+ current += character
+ continue
+ }
+
+ if (character === ')') {
+ depth -= 1
+ if (depth < 0) throw new Error(`Unexpected ")" in "${value}"`)
+ current += character
+ continue
+ }
+
+ if (depth === 0 && character === separator) {
+ const part = current.trim()
+ if (part.length === 0) throw new Error(`Empty value in "${value}"`)
+ parts.push(part)
+ current = ''
+ continue
+ }
+
+ current += character
+ }
+
+ if (quote != null) throw new Error(`Unclosed string in "${value}"`)
+ if (depth !== 0) throw new Error(`Unclosed function in "${value}"`)
+
+ const part = current.trim()
+ if (part.length === 0) throw new Error(`Empty value in "${value}"`)
+ parts.push(part)
+
+ return parts
+}
+
+function findMatchingParen (value: string, openIndex: number): number {
+ let depth = 0
+ let quote: string | null = null
+ let escaped = false
+
+ for (let index = openIndex; index < value.length; index += 1) {
+ const character = value[index]
+
+ if (escaped) {
+ escaped = false
+ continue
+ }
+
+ if (character === '\\') {
+ escaped = true
+ continue
+ }
+
+ if (quote != null) {
+ if (character === quote) quote = null
+ continue
+ }
+
+ if (character === '"' || character === "'") {
+ quote = character
+ continue
+ }
+
+ if (character === '(') {
+ depth += 1
+ continue
+ }
+
+ if (character === ')') {
+ depth -= 1
+ if (depth === 0) return index
+ if (depth < 0) return -1
+ }
+ }
+
+ return -1
+}
+
+function createDiagnostic (
+ code: TransformDiagnosticCode,
+ property: string,
+ value: string,
+ message: string,
+ declaration: CssDeclaration
+): TransformDiagnostic {
+ return {
+ code,
+ property,
+ value,
+ message,
+ order: declaration.order,
+ }
+}
diff --git a/packages/css-to-rn/src/types.ts b/packages/css-to-rn/src/types.ts
new file mode 100644
index 0000000..af70d51
--- /dev/null
+++ b/packages/css-to-rn/src/types.ts
@@ -0,0 +1,102 @@
+export type CompileMode = 'runtime' | 'build'
+
+export type CssxDiagnosticLevel = 'warning' | 'error'
+
+export type CssxDiagnosticCode =
+ | 'CSS_SYNTAX_ERROR'
+ | 'UNSUPPORTED_SELECTOR'
+ | 'UNSUPPORTED_AT_RULE'
+ | 'INVALID_DECLARATION'
+ | 'UNRESOLVED_VARIABLE'
+ | 'VARIABLE_CYCLE'
+ | 'VARIABLE_DEPTH_LIMIT'
+ | 'UNSUPPORTED_INTERPOLATION_POSITION'
+ | 'INVALID_INTERPOLATION_VALUE'
+ | 'UNSUPPORTED_CALC'
+ | 'UNSUPPORTED_BACKGROUND_IMAGE'
+ | 'UNSUPPORTED_BACKGROUND_SHORTHAND'
+
+export interface CssxDiagnostic {
+ level: CssxDiagnosticLevel
+ code: CssxDiagnosticCode
+ message: string
+ line?: number
+ column?: number
+}
+
+export interface CompileCssOptions {
+ mode?: CompileMode
+ id?: string
+ sourceId?: string
+ contentHash?: string
+ sourceIdentity?: string
+ target?: CssxTarget
+}
+
+export interface CompileCssTemplateOptions extends CompileCssOptions {
+ dynamicSlotPrefix?: string
+}
+
+export type CssxTarget = 'react-native' | 'web'
+
+export interface CssxMetadata {
+ hasVars: boolean
+ vars: string[]
+ hasMedia: boolean
+ hasViewportUnits: boolean
+ hasInterpolations: boolean
+ hasDynamicRuntimeDependencies: boolean
+ hasAnimations: boolean
+ hasTransitions: boolean
+}
+
+export interface CompiledCssSheet {
+ version: 1
+ id: string
+ sourceId?: string
+ contentHash: string
+ rules: CssxRule[]
+ keyframes: Record
+ exports?: Record
+ metadata: CssxMetadata
+ diagnostics: CssxDiagnostic[]
+ error?: CssxDiagnostic
+}
+
+export interface CssxRule {
+ selector: string
+ classes: string[]
+ part: string | null
+ specificity: number
+ order: number
+ media: string | null
+ declarations: CssxDeclaration[]
+}
+
+export interface CssxDeclaration {
+ property: string
+ value: string
+ raw: string
+ order: number
+ dynamicSlots?: number[]
+ line?: number
+ column?: number
+}
+
+export interface CssxKeyframe {
+ selector: string
+ declarations: CssxDeclaration[]
+ order: number
+}
+
+export interface SelectorParseResult {
+ selector: string
+ classes: string[]
+ part: string | null
+ specificity: number
+}
+
+export interface CompileState {
+ diagnostics: CssxDiagnostic[]
+ mode: CompileMode
+}
diff --git a/packages/css-to-rn/src/values.ts b/packages/css-to-rn/src/values.ts
new file mode 100644
index 0000000..8e7aecd
--- /dev/null
+++ b/packages/css-to-rn/src/values.ts
@@ -0,0 +1,394 @@
+import { diagnostic } from './diagnostics.ts'
+import type { CssxDiagnostic } from './types.ts'
+
+export type InterpolationValue = string | number | null | undefined | false
+
+export interface ResolveCssValueOptions {
+ values?: readonly unknown[]
+ variables?: Record
+ defaultVariables?: Record
+ dimensions?: {
+ width?: number
+ height?: number
+ }
+ maxVarDepth?: number
+}
+
+export interface ResolveCssValueResult {
+ value?: string
+ valid: boolean
+ dependencies: {
+ vars: string[]
+ dimensions: boolean
+ }
+ diagnostics: CssxDiagnostic[]
+}
+
+const DYNAMIC_SLOT_RE = /var\(\s*--__cssx_dynamic_(\d+)\s*\)/g
+const VAR_NAME_RE = /^--[A-Za-z0-9_-]+$/
+const VIEWPORT_UNIT_RE = /(^|[^\w.-])([+-]?(?:\d*\.)?\d+)(vh|vw|vmin|vmax)\b/g
+const U_UNIT_RE = /(^|[^\w.-])([+-]?(?:\d*\.)?\d+)u\b/g
+const CALC_RE = /calc\(/g
+
+export function resolveCssValue (
+ input: string,
+ options: ResolveCssValueOptions = {}
+): ResolveCssValueResult {
+ const diagnostics: CssxDiagnostic[] = []
+ const dependencies = {
+ vars: new Set(),
+ dimensions: false
+ }
+ const maxVarDepth = options.maxVarDepth ?? 20
+
+ const interpolation = replaceDynamicSlots(input, options.values ?? [], diagnostics)
+ if (!interpolation.valid) {
+ return invalid(diagnostics, dependencies)
+ }
+
+ const variableResolution = resolveVars(
+ interpolation.value,
+ options,
+ dependencies.vars,
+ diagnostics,
+ [],
+ maxVarDepth
+ )
+ if (!variableResolution.valid) {
+ return invalid(diagnostics, dependencies)
+ }
+
+ const units = resolveUnits(variableResolution.value, options, dependencies)
+ const calc = resolveCalcs(units.value, diagnostics)
+ if (!calc.valid) {
+ return invalid(diagnostics, dependencies)
+ }
+
+ return {
+ value: calc.value.trim(),
+ valid: true,
+ dependencies: serializeDependencies(dependencies),
+ diagnostics
+ }
+}
+
+function replaceDynamicSlots (
+ input: string,
+ values: readonly unknown[],
+ diagnostics: CssxDiagnostic[]
+): { valid: true, value: string } | { valid: false } {
+ DYNAMIC_SLOT_RE.lastIndex = 0
+ let valid = true
+ const value = input.replace(DYNAMIC_SLOT_RE, (_match, rawIndex: string) => {
+ const index = Number(rawIndex)
+ const interpolation = values[index]
+ if (typeof interpolation === 'string') return interpolation
+ if (typeof interpolation === 'number') return String(interpolation)
+ if (interpolation === null || interpolation === undefined || interpolation === false) {
+ diagnostics.push(diagnostic(
+ 'INVALID_INTERPOLATION_VALUE',
+ `Interpolation slot ${index} resolved to an omitted value, so the declaration is invalid.`,
+ 'warning'
+ ))
+ valid = false
+ return ''
+ }
+
+ diagnostics.push(diagnostic(
+ 'INVALID_INTERPOLATION_VALUE',
+ `Interpolation slot ${index} resolved to unsupported value type "${typeof interpolation}".`,
+ 'warning'
+ ))
+ valid = false
+ return ''
+ })
+
+ return valid ? { valid: true, value } : { valid: false }
+}
+
+function resolveVars (
+ input: string,
+ options: ResolveCssValueOptions,
+ deps: Set,
+ diagnostics: CssxDiagnostic[],
+ stack: string[],
+ maxDepth: number
+): { valid: true, value: string } | { valid: false } {
+ if (stack.length > maxDepth) {
+ diagnostics.push(diagnostic(
+ 'VARIABLE_DEPTH_LIMIT',
+ `CSS variable resolution exceeded max depth ${maxDepth}.`,
+ 'warning'
+ ))
+ return { valid: false }
+ }
+
+ let output = input
+
+ while (true) {
+ const start = output.indexOf('var(')
+ if (start === -1) return { valid: true, value: output }
+
+ const open = start + 3
+ const close = findMatchingParen(output, open)
+ if (close === -1) {
+ diagnostics.push(diagnostic(
+ 'UNRESOLVED_VARIABLE',
+ 'Malformed var() expression.',
+ 'warning'
+ ))
+ return { valid: false }
+ }
+
+ const body = output.slice(open + 1, close)
+ const parts = splitTopLevelComma(body)
+ const name = parts[0]?.trim()
+ if (!name || !VAR_NAME_RE.test(name)) {
+ diagnostics.push(diagnostic(
+ 'UNRESOLVED_VARIABLE',
+ `Invalid CSS variable name "${name ?? ''}".`,
+ 'warning'
+ ))
+ return { valid: false }
+ }
+
+ deps.add(name)
+ if (stack.includes(name)) {
+ diagnostics.push(diagnostic(
+ 'VARIABLE_CYCLE',
+ `CSS variable cycle detected: ${stack.concat(name).join(' -> ')}.`,
+ 'warning'
+ ))
+ return { valid: false }
+ }
+
+ const fallback = parts.length > 1 ? parts.slice(1).join(',').trim() : undefined
+ const rawReplacement =
+ valueFromRecord(options.variables, name) ??
+ valueFromRecord(options.defaultVariables, name) ??
+ fallback
+
+ if (rawReplacement === undefined) {
+ diagnostics.push(diagnostic(
+ 'UNRESOLVED_VARIABLE',
+ `CSS variable "${name}" is not defined and has no fallback.`,
+ 'warning'
+ ))
+ return { valid: false }
+ }
+
+ const nested = resolveVars(
+ String(rawReplacement),
+ options,
+ deps,
+ diagnostics,
+ stack.concat(name),
+ maxDepth
+ )
+ if (!nested.valid) return { valid: false }
+
+ output = output.slice(0, start) + nested.value + output.slice(close + 1)
+ }
+}
+
+function resolveUnits (
+ input: string,
+ options: ResolveCssValueOptions,
+ dependencies: { vars: Set, dimensions: boolean }
+): { value: string } {
+ let value = input.replace(U_UNIT_RE, (_match, prefix: string, rawNumber: string) => {
+ return `${prefix}${Number(rawNumber) * 8}px`
+ })
+
+ const width = options.dimensions?.width ?? 0
+ const height = options.dimensions?.height ?? 0
+
+ value = value.replace(VIEWPORT_UNIT_RE, (_match, prefix: string, rawNumber: string, unit: string) => {
+ dependencies.dimensions = true
+ const number = Number(rawNumber)
+ const basis =
+ unit === 'vw'
+ ? width
+ : unit === 'vh'
+ ? height
+ : unit === 'vmin'
+ ? Math.min(width, height)
+ : Math.max(width, height)
+ return `${prefix}${number * basis / 100}px`
+ })
+
+ return { value }
+}
+
+function resolveCalcs (
+ input: string,
+ diagnostics: CssxDiagnostic[]
+): { valid: true, value: string } | { valid: false } {
+ let output = input
+ CALC_RE.lastIndex = 0
+
+ while (true) {
+ const start = output.indexOf('calc(')
+ if (start === -1) return { valid: true, value: output }
+ const open = start + 4
+ const close = findMatchingParen(output, open)
+ if (close === -1) {
+ diagnostics.push(diagnostic('UNSUPPORTED_CALC', 'Malformed calc() expression.', 'warning'))
+ return { valid: false }
+ }
+
+ const expression = output.slice(open + 1, close).trim()
+ const result = evaluateCalc(expression)
+ if (result == null) {
+ diagnostics.push(diagnostic(
+ 'UNSUPPORTED_CALC',
+ `Unsupported calc() expression "${expression}".`,
+ 'warning'
+ ))
+ return { valid: false }
+ }
+
+ output = output.slice(0, start) + String(result) + output.slice(close + 1)
+ }
+}
+
+function evaluateCalc (expression: string): string | null {
+ if (expression.includes('%')) return null
+ const hasPx = /(?:^|[^\w.-])[+-]?(?:\d*\.)?\d+px\b/.test(expression)
+ const normalized = expression.replace(/([+-]?(?:\d*\.)?\d+)px\b/g, '$1')
+ if (!/^[0-9+\-*/().\s]+$/.test(normalized)) return null
+
+ let index = 0
+
+ const skipWhitespace = () => {
+ while (/\s/.test(normalized[index] ?? '')) index++
+ }
+
+ const parseNumber = (): number | null => {
+ skipWhitespace()
+ const match = normalized.slice(index).match(/^(?:(?:\d+\.\d+)|(?:\d+\.)|(?:\.\d+)|(?:\d+))/)
+ if (match == null) return null
+ index += match[0].length
+ return Number(match[0])
+ }
+
+ const parseFactor = (): number | null => {
+ skipWhitespace()
+
+ if (normalized[index] === '+') {
+ index++
+ return parseFactor()
+ }
+
+ if (normalized[index] === '-') {
+ index++
+ const value = parseFactor()
+ return value == null ? null : -value
+ }
+
+ if (normalized[index] === '(') {
+ index++
+ const value = parseAdditive()
+ skipWhitespace()
+ if (normalized[index] !== ')') return null
+ index++
+ return value
+ }
+
+ return parseNumber()
+ }
+
+ const parseMultiplicative = (): number | null => {
+ let value = parseFactor()
+ if (value == null) return null
+
+ while (true) {
+ skipWhitespace()
+ const operator = normalized[index]
+ if (operator !== '*' && operator !== '/') return value
+ index++
+
+ const right = parseFactor()
+ if (right == null) return null
+ value = operator === '*' ? value * right : value / right
+ }
+ }
+
+ function parseAdditive (): number | null {
+ let value = parseMultiplicative()
+ if (value == null) return null
+
+ while (true) {
+ skipWhitespace()
+ const operator = normalized[index]
+ if (operator !== '+' && operator !== '-') return value
+ index++
+
+ const right = parseMultiplicative()
+ if (right == null) return null
+ value = operator === '+' ? value + right : value - right
+ }
+ }
+
+ const result = parseAdditive()
+ skipWhitespace()
+
+ return result != null && index === normalized.length && Number.isFinite(result)
+ ? hasPx ? `${result}px` : String(result)
+ : null
+}
+
+function findMatchingParen (input: string, openIndex: number): number {
+ let depth = 0
+ for (let index = openIndex; index < input.length; index++) {
+ const char = input[index]
+ if (char === '(') depth++
+ if (char === ')') {
+ depth--
+ if (depth === 0) return index
+ }
+ }
+ return -1
+}
+
+function splitTopLevelComma (input: string): string[] {
+ const parts: string[] = []
+ let depth = 0
+ let start = 0
+
+ for (let index = 0; index < input.length; index++) {
+ const char = input[index]
+ if (char === '(') depth++
+ if (char === ')') depth--
+ if (char === ',' && depth === 0) {
+ parts.push(input.slice(start, index))
+ start = index + 1
+ }
+ }
+
+ parts.push(input.slice(start))
+ return parts
+}
+
+function valueFromRecord (record: Record | undefined, key: string): unknown {
+ if (!record || !Object.prototype.hasOwnProperty.call(record, key)) return undefined
+ return record[key]
+}
+
+function serializeDependencies (dependencies: { vars: Set, dimensions: boolean }) {
+ return {
+ vars: Array.from(dependencies.vars).sort(),
+ dimensions: dependencies.dimensions
+ }
+}
+
+function invalid (
+ diagnostics: CssxDiagnostic[],
+ dependencies: { vars: Set, dimensions: boolean }
+): ResolveCssValueResult {
+ return {
+ valid: false,
+ dependencies: serializeDependencies(dependencies),
+ diagnostics
+ }
+}
diff --git a/packages/css-to-rn/src/vendor.d.ts b/packages/css-to-rn/src/vendor.d.ts
new file mode 100644
index 0000000..131ed07
--- /dev/null
+++ b/packages/css-to-rn/src/vendor.d.ts
@@ -0,0 +1,34 @@
+declare module 'css/lib/parse/index.js' {
+ export default function parseCss (css: string, options?: unknown): unknown
+}
+
+declare module 'css-mediaquery' {
+ interface MediaQueryExpression {
+ modifier?: string
+ feature: string
+ value?: string
+ }
+
+ interface MediaQuery {
+ inverse: boolean
+ type: string
+ expressions: MediaQueryExpression[]
+ }
+
+ const mediaQuery: {
+ parse(query: string): MediaQuery[]
+ match(query: string, values: Record): boolean
+ }
+
+ export default mediaQuery
+}
+
+declare module 'react-native' {
+ export const Dimensions: {
+ get: (dimension: 'window' | 'screen') => { width: number, height: number }
+ addEventListener: (
+ event: 'change',
+ listener: () => void
+ ) => { remove: () => void }
+ }
+}
diff --git a/packages/css-to-rn/src/web.ts b/packages/css-to-rn/src/web.ts
new file mode 100644
index 0000000..2f07f7f
--- /dev/null
+++ b/packages/css-to-rn/src/web.ts
@@ -0,0 +1,127 @@
+export {
+ compileCss,
+ compileCssTemplate
+} from './compiler.ts'
+export {
+ resolveCssValue
+} from './values.ts'
+import {
+ cssx as baseCssx,
+ clearRawCssCacheForTests
+} from './react/cssx.ts'
+import {
+ useCssxLayer as baseUseCssxLayer,
+ useRuntimeCss as baseUseRuntimeCss,
+ useCssxSheet as baseUseCssxSheet,
+ useCssxTemplate as baseUseCssxTemplate
+} from './react/hooks.ts'
+import {
+ createTrackedCssxSheet
+} from './react/tracker.ts'
+import {
+ configureDimensionsAdapter,
+ configureMediaQueryAdapter,
+ defaultVariables,
+ flushMicrotasksForTests,
+ getRuntimeSubscriberCountForTests,
+ resetStoreForTests,
+ setDefaultVariables,
+ setDimensionsForTests,
+ subscribeVariablesForTests,
+ variables
+} from './react/store.ts'
+
+export type {
+ CompileCssOptions,
+ CompileCssTemplateOptions,
+ CompiledCssSheet
+} from './types.ts'
+export type {
+ CssxResolvedProps,
+ CssxRuntimeOptions,
+ CssxStyleName
+} from './react/cssx.ts'
+export type {
+ CssxProviderProps,
+ CssxReactConfig
+} from './react/config.ts'
+export type {
+ TrackedCssxSheetOptions
+} from './react/tracker.ts'
+
+export {
+ CssxProvider,
+ configureCssx,
+ useCssxConfig
+} from './react/config.ts'
+export {
+ TrackedCssxSheet,
+ isTrackedCssxSheet
+} from './react/tracker.ts'
+export {
+ defaultVariables,
+ setDefaultVariables,
+ variables
+}
+
+export function cssx (
+ ...args: Parameters
+): ReturnType {
+ const [styleName, sheet, inlineStyleProps, options] = args
+ return baseCssx(styleName, sheet, inlineStyleProps, {
+ target: 'web',
+ ...(options ?? {})
+ })
+}
+
+export function useRuntimeCss (
+ ...args: Parameters
+): ReturnType {
+ const [input, options] = args
+ return baseUseRuntimeCss(input, {
+ target: 'web',
+ ...(options ?? {})
+ })
+}
+
+export function useCssxLayer (
+ ...args: Parameters
+): ReturnType {
+ const [input, options] = args
+ return baseUseCssxLayer(input, {
+ target: 'web',
+ ...(options ?? {})
+ })
+}
+
+export function useCssxSheet (
+ ...args: Parameters
+): ReturnType {
+ const [sheet, options] = args
+ return baseUseCssxSheet(sheet, {
+ target: 'web',
+ ...(options ?? {})
+ })
+}
+
+export function useCssxTemplate (
+ ...args: Parameters
+): ReturnType {
+ const [sheet, values, options] = args
+ return baseUseCssxTemplate(sheet, values, {
+ target: 'web',
+ ...(options ?? {})
+ })
+}
+
+export const __cssxInternals = {
+ clearRawCssCacheForTests,
+ configureDimensionsAdapterForTests: configureDimensionsAdapter,
+ configureMediaQueryAdapterForTests: configureMediaQueryAdapter,
+ createTrackedCssxSheet,
+ flushMicrotasksForTests,
+ getRuntimeSubscriberCountForTests,
+ resetStoreForTests,
+ setDimensionsForTests,
+ subscribeVariablesForTests
+}
diff --git a/packages/css-to-rn/test/engine/compiler.test.ts b/packages/css-to-rn/test/engine/compiler.test.ts
new file mode 100644
index 0000000..d3a1ee5
--- /dev/null
+++ b/packages/css-to-rn/test/engine/compiler.test.ts
@@ -0,0 +1,154 @@
+import assert from 'node:assert/strict'
+import { compileCss, compileCssTemplate } from '../../src/index.ts'
+
+describe('@cssxjs/css-to-rn compiler IR', () => {
+ it('compiles class selectors into canonical rules', () => {
+ const sheet = compileCss(`
+ .root {
+ color: red;
+ padding: 8px 16px;
+ }
+ .root.active:part(label) {
+ color: var(--label-color, blue);
+ }
+ `, { mode: 'build', sourceIdentity: 'Button.tsx:0' })
+
+ assert.equal(sheet.version, 1)
+ assert.equal(sheet.rules.length, 2)
+ assert.deepEqual(sheet.rules[0].classes, ['root'])
+ assert.equal(sheet.rules[0].part, null)
+ assert.equal(sheet.rules[0].specificity, 1)
+ assert.equal(sheet.rules[0].declarations[0].property, 'color')
+ assert.deepEqual(sheet.rules[1].classes, ['root', 'active'])
+ assert.equal(sheet.rules[1].part, 'label')
+ assert.deepEqual(sheet.metadata.vars, ['--label-color'])
+ assert.equal(sheet.metadata.hasDynamicRuntimeDependencies, true)
+ assert.match(sheet.id, /^cssx_/)
+ assert.match(sheet.sourceId ?? '', /^cssx_/)
+ })
+
+ it('maps hover and active pseudos to logical part aliases', () => {
+ const sheet = compileCss(`
+ .root:hover { color: red; }
+ .root.active:active { color: blue; }
+ `, { mode: 'build' })
+
+ assert.equal(sheet.rules[0].part, 'hover')
+ assert.equal(sheet.rules[1].part, 'active')
+ })
+
+ it('keeps media conditions on matching rules', () => {
+ const sheet = compileCss(`
+ @media (min-width: 600px) {
+ .root { width: 50vw; }
+ }
+ `, { mode: 'build' })
+
+ assert.equal(sheet.rules.length, 1)
+ assert.equal(sheet.rules[0].media, '@media (min-width: 600px)')
+ assert.equal(sheet.metadata.hasMedia, true)
+ assert.equal(sheet.metadata.hasViewportUnits, true)
+ })
+
+ it('stores keyframes as declaration IR and marks animation metadata', () => {
+ const sheet = compileCss(`
+ .root { animation: fade 200ms ease; }
+ @keyframes fade {
+ from { opacity: 0; }
+ to { opacity: var(--target-opacity, 1); }
+ }
+ `, { mode: 'build' })
+
+ assert.equal(sheet.metadata.hasAnimations, true)
+ assert.deepEqual(sheet.metadata.vars, ['--target-opacity'])
+ assert.equal(sheet.keyframes.fade.length, 2)
+ assert.equal(sheet.keyframes.fade[0].selector, 'from')
+ assert.equal(sheet.keyframes.fade[1].declarations[0].property, 'opacity')
+ })
+
+ it('returns structured diagnostics instead of throwing in runtime mode', () => {
+ const sheet = compileCss('.root { color red; }')
+
+ assert.equal(sheet.rules.length, 0)
+ assert.equal(sheet.error?.code, 'CSS_SYNTAX_ERROR')
+ assert.equal(sheet.diagnostics[0].level, 'error')
+ })
+
+ it('throws syntax diagnostics in build mode', () => {
+ assert.throws(
+ () => compileCss('.root { color red; }', { mode: 'build' }),
+ /CSS_SYNTAX_ERROR/
+ )
+ })
+
+ it('throws unsupported static declaration diagnostics in build mode', () => {
+ assert.throws(
+ () => compileCss('.root { width: calc(100% - 16px); }', { mode: 'build' }),
+ /UNSUPPORTED_CALC/
+ )
+ assert.throws(
+ () => compileCss('.root { transform: translate3d(1px, 2px, 3px); }', { mode: 'build' }),
+ /INVALID_DECLARATION/
+ )
+ assert.throws(
+ () => compileCss('.root { background-image: url(hero.png); }', { mode: 'build' }),
+ /UNSUPPORTED_BACKGROUND_IMAGE/
+ )
+ })
+
+ it('defers dynamic declarations to runtime validation in build mode', () => {
+ const sheet = compileCssTemplate(`
+ .root {
+ width: var(--width);
+ transform: var(--__cssx_dynamic_0);
+ }
+ `, { mode: 'build' })
+
+ assert.equal(sheet.rules.length, 1)
+ assert.equal(sheet.error, undefined)
+ })
+
+ it('warns and ignores unsupported selectors in runtime mode', () => {
+ const sheet = compileCss(`
+ .root .child { color: red; }
+ .root { color: blue; }
+ `)
+
+ assert.equal(sheet.rules.length, 1)
+ assert.equal(sheet.diagnostics[0].code, 'UNSUPPORTED_SELECTOR')
+ })
+
+ it('records interpolation slots in template mode', () => {
+ const sheet = compileCssTemplate(`
+ .root {
+ color: var(--__cssx_dynamic_0);
+ padding: var(--__cssx_dynamic_1) 2u;
+ }
+ `, { mode: 'build' })
+
+ assert.equal(sheet.metadata.hasInterpolations, true)
+ assert.deepEqual(sheet.rules[0].declarations[0].dynamicSlots, [0])
+ assert.deepEqual(sheet.rules[0].declarations[1].dynamicSlots, [1])
+ })
+
+ it('rejects interpolation inside media queries in build mode', () => {
+ assert.throws(
+ () => compileCssTemplate(`
+ @media (min-width: var(--__cssx_dynamic_0)) {
+ .root { color: red; }
+ }
+ `, { mode: 'build' }),
+ /UNSUPPORTED_INTERPOLATION_POSITION/
+ )
+ })
+
+ it('keeps :export static-only', () => {
+ const sheet = compileCss(`
+ :export {
+ color: red;
+ }
+ `, { mode: 'build' })
+
+ assert.deepEqual(sheet.exports, { color: 'red' })
+ })
+})
diff --git a/packages/css-to-rn/test/engine/resolve.test.ts b/packages/css-to-rn/test/engine/resolve.test.ts
new file mode 100644
index 0000000..d66f813
--- /dev/null
+++ b/packages/css-to-rn/test/engine/resolve.test.ts
@@ -0,0 +1,337 @@
+import assert from 'node:assert/strict'
+
+import {
+ compileCss,
+ compileCssTemplate,
+ createCssxCache,
+ resolveCssx
+} from '../../src/index.ts'
+
+describe('@cssxjs/css-to-rn resolver', () => {
+ it('resolves matched root and part styles with specificity and inline overrides', () => {
+ const sheet = compileCss(`
+ .button { color: red; padding: 1u; }
+ .button.primary { color: blue; }
+ .button:part(label) { color: white; }
+ .button:hover { opacity: 0.5; }
+ `)
+
+ const result = resolveCssx({
+ styleName: ['button', { primary: true }],
+ layers: sheet,
+ inlineStyleProps: { color: 'green' }
+ })
+
+ assert.deepEqual(result.props, {
+ style: {
+ color: 'green',
+ paddingTop: 8,
+ paddingRight: 8,
+ paddingBottom: 8,
+ paddingLeft: 8
+ },
+ labelStyle: { color: 'white' },
+ hoverStyle: { opacity: 0.5 }
+ })
+ })
+
+ it('applies later layers after earlier layers', () => {
+ const base = compileCss('.button { color: red; padding: 8px; }')
+ const local = compileCss('.button { color: blue; }')
+
+ const result = resolveCssx({
+ styleName: 'button',
+ layers: [base, local]
+ })
+
+ assert.deepEqual(result.props, {
+ style: {
+ color: 'blue',
+ paddingTop: 8,
+ paddingRight: 8,
+ paddingBottom: 8,
+ paddingLeft: 8
+ }
+ })
+ })
+
+ it('drops only invalid dynamic declarations and keeps fallback declarations', () => {
+ const sheet = compileCss(`
+ .button {
+ color: red;
+ color: var(--button-color);
+ border: var(--border-width, 2px) solid var(--border-color, blue);
+ }
+ `)
+
+ const result = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ variables: { '--border-color': 'green' }
+ })
+
+ assert.deepEqual(result.props, {
+ style: {
+ color: 'red',
+ borderWidth: 2,
+ borderColor: 'green',
+ borderStyle: 'solid'
+ }
+ })
+ assert.deepEqual(result.dependencies.vars, [
+ '--border-color',
+ '--border-width',
+ '--button-color'
+ ])
+ assert.equal(result.diagnostics[0].code, 'UNRESOLVED_VARIABLE')
+ })
+
+ it('does not subscribe to variables in inactive media rules', () => {
+ const sheet = compileCss(`
+ .button { color: red; }
+ @media (min-width: 600px) {
+ .button { color: var(--wide-color); }
+ }
+ `)
+
+ const result = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ variables: { '--wide-color': 'blue' },
+ dimensions: { width: 320, height: 640 }
+ })
+
+ assert.deepEqual(result.props, { style: { color: 'red' } })
+ assert.deepEqual(result.dependencies.vars, [])
+ assert.deepEqual(result.dependencies.media, ['(min-width: 600px)'])
+ })
+
+ it('activates media rules and resolves viewport units from dimensions', () => {
+ const sheet = compileCss(`
+ .button { width: 10vw; }
+ @media (min-width: 600px) {
+ .button { width: calc(20vw + 1u); }
+ }
+ `)
+
+ const result = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ dimensions: { width: 800, height: 600 }
+ })
+
+ assert.deepEqual(result.props, { style: { width: 168 } })
+ assert.equal(result.dependencies.dimensions, true)
+ assert.deepEqual(result.dependencies.media, ['(min-width: 600px)'])
+ })
+
+ it('resolves template interpolation values through one cache slot', () => {
+ const sheet = compileCssTemplate('.button { color: var(--__cssx_dynamic_0); }')
+ const cache = createCssxCache()
+
+ const red = resolveCssx({
+ styleName: 'button',
+ layers: { sheet, values: ['red'] },
+ cache
+ })
+ const redAgain = resolveCssx({
+ styleName: 'button',
+ layers: { sheet, values: ['red'] },
+ cache
+ })
+ const green = resolveCssx({
+ styleName: 'button',
+ layers: { sheet, values: ['green'] },
+ cache
+ })
+ const greenAgain = resolveCssx({
+ styleName: 'button',
+ layers: { sheet, values: ['green'] },
+ cache
+ })
+ const redAfterGreen = resolveCssx({
+ styleName: 'button',
+ layers: { sheet, values: ['red'] },
+ cache
+ })
+
+ assert.equal(redAgain.cacheHit, true)
+ assert.equal(redAgain.props, red.props)
+ assert.notEqual(green.props, red.props)
+ assert.equal(greenAgain.cacheHit, true)
+ assert.equal(greenAgain.props, green.props)
+ assert.notEqual(redAfterGreen.props, red.props)
+ assert.equal(cache.entries.size, 1)
+ })
+
+ it('reuses cached references for equal inline style values', () => {
+ const sheet = compileCss('.button { color: red; }')
+ const cache = createCssxCache()
+
+ const first = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ inlineStyleProps: { opacity: 0.5 },
+ cache
+ })
+ const second = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ inlineStyleProps: { opacity: 0.5 },
+ cache
+ })
+
+ assert.equal(second.cacheHit, true)
+ assert.equal(second.props, first.props)
+ assert.equal(second.props.style, first.props.style)
+ })
+
+ it('does not invalidate cache when unused variables change', () => {
+ const sheet = compileCss('.button { color: var(--text); }')
+ const cache = createCssxCache()
+
+ const first = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ variables: { '--text': 'red', '--unused': 1 },
+ cache
+ })
+ const second = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ variables: { '--text': 'red', '--unused': 2 },
+ cache
+ })
+ const changed = resolveCssx({
+ styleName: 'button',
+ layers: sheet,
+ variables: { '--text': 'green', '--unused': 2 },
+ cache
+ })
+
+ assert.equal(second.cacheHit, true)
+ assert.equal(second.props, first.props)
+ assert.notEqual(changed.props, first.props)
+ assert.deepEqual(changed.props, { style: { color: 'green' } })
+ })
+
+ it('keeps separate cache entries for different elements', () => {
+ const sheet = compileCss(`
+ .button { color: red; }
+ .label { color: blue; }
+ `)
+ const cache = createCssxCache()
+
+ const button = resolveCssx({ styleName: 'button', layers: sheet, cache })
+ const label = resolveCssx({ styleName: 'label', layers: sheet, cache })
+ const buttonAgain = resolveCssx({ styleName: 'button', layers: sheet, cache })
+ const labelAgain = resolveCssx({ styleName: 'label', layers: sheet, cache })
+
+ assert.equal(buttonAgain.props, button.props)
+ assert.equal(labelAgain.props, label.props)
+ assert.notEqual(button.props, label.props)
+ assert.equal(cache.entries.size, 2)
+ })
+
+ it('evicts raw CSS resolved cache entries when a caller requests a single cache slot', () => {
+ const cache = createCssxCache({ maxEntries: 1 })
+ const redCss = '.root { color: red; }'
+ const greenCss = '.root { color: green; }'
+
+ const red = resolveCssx({ styleName: 'root', layers: redCss, cache })
+ const redAgain = resolveCssx({ styleName: 'root', layers: redCss, cache })
+ const green = resolveCssx({ styleName: 'root', layers: greenCss, cache })
+ const redAfterGreen = resolveCssx({ styleName: 'root', layers: redCss, cache })
+
+ assert.equal(redAgain.cacheHit, true)
+ assert.equal(redAgain.props, red.props)
+ assert.equal(green.cacheHit, false)
+ assert.equal(redAfterGreen.cacheHit, false)
+ assert.notEqual(redAfterGreen.props, red.props)
+ assert.equal(cache.entries.size, 1)
+ })
+
+ it('inlines only keyframes used by matched animation styles', () => {
+ const sheet = compileCss(`
+ @keyframes fade {
+ from { opacity: var(--from-opacity, 0); }
+ to { opacity: 1; }
+ }
+ @keyframes unused {
+ from { color: var(--unused-color); }
+ to { color: black; }
+ }
+ .button { animation: fade 200ms ease; }
+ `)
+
+ const result = resolveCssx({
+ styleName: 'button',
+ layers: sheet
+ })
+
+ assert.deepEqual(result.dependencies.vars, ['--from-opacity'])
+ assert.deepEqual(result.props.style, {
+ animationName: {
+ from: { opacity: 0 },
+ to: { opacity: 1 }
+ },
+ animationDuration: '200ms',
+ animationTimingFunction: 'ease',
+ animationDelay: '0s',
+ animationIterationCount: 1,
+ animationDirection: 'normal',
+ animationFillMode: 'none',
+ animationPlayState: 'running'
+ })
+ })
+
+ it('resolves variables and interpolation inside animation and transition values', () => {
+ const sheet = compileCssTemplate(`
+ @keyframes fade {
+ from { opacity: var(--from-opacity, 0); }
+ to { opacity: var(--target-opacity, 1); }
+ }
+ .button {
+ animation: var(--animation-name, fade) var(--__cssx_dynamic_0) ease;
+ transition: opacity var(--transition-duration, 150ms);
+ }
+ `)
+
+ const result = resolveCssx({
+ styleName: 'button',
+ layers: {
+ sheet,
+ values: ['300ms']
+ },
+ variables: {
+ '--from-opacity': 0.25,
+ '--target-opacity': 0.75,
+ '--transition-duration': '250ms'
+ }
+ })
+
+ assert.deepEqual(result.dependencies.vars, [
+ '--animation-name',
+ '--from-opacity',
+ '--target-opacity',
+ '--transition-duration'
+ ])
+ assert.deepEqual(result.props.style, {
+ animationName: {
+ from: { opacity: 0.25 },
+ to: { opacity: 0.75 }
+ },
+ animationDuration: '300ms',
+ animationTimingFunction: 'ease',
+ animationDelay: '0s',
+ animationIterationCount: 1,
+ animationDirection: 'normal',
+ animationFillMode: 'none',
+ animationPlayState: 'running',
+ transitionProperty: 'opacity',
+ transitionDuration: '250ms',
+ transitionTimingFunction: 'ease',
+ transitionDelay: '0s'
+ })
+ })
+})
diff --git a/packages/css-to-rn/test/engine/transform.test.ts b/packages/css-to-rn/test/engine/transform.test.ts
new file mode 100644
index 0000000..e8db675
--- /dev/null
+++ b/packages/css-to-rn/test/engine/transform.test.ts
@@ -0,0 +1,172 @@
+import assert from 'node:assert/strict'
+
+import { transformDeclarations } from '../../src/transform/index.ts'
+import type {
+ CssDeclaration,
+ TransformDeclarationOptions,
+} from '../../src/transform/index.ts'
+
+function declarations (
+ input: ReadonlyArray
+): CssDeclaration[] {
+ return input.map(([property, value], order) => ({
+ property,
+ value,
+ raw: `${property}: ${value}`,
+ order,
+ }))
+}
+
+function transform (
+ input: ReadonlyArray,
+ options?: TransformDeclarationOptions
+) {
+ return transformDeclarations(declarations(input), options)
+}
+
+describe('@cssxjs/css-to-rn declaration transformer', () => {
+ it('normalizes raw declarations and expands margin, padding, and border shorthands', () => {
+ const result = transform([
+ ['opacity', '0.5'],
+ ['display', 'flex'],
+ ['margin', '1px 2px auto 4px'],
+ ['padding', '2u 8px'],
+ ['border', '2px dashed #f00'],
+ ['border-radius', '4px 8px 12px 16px'],
+ ['border-width', '1px 2px 3px 4px'],
+ ['border-color', 'red green blue black'],
+ ])
+
+ assert.deepEqual(result.diagnostics, [])
+ assert.deepEqual(result.style, {
+ opacity: 0.5,
+ display: 'flex',
+ marginTop: 1,
+ marginRight: 2,
+ marginBottom: 'auto',
+ marginLeft: 4,
+ paddingTop: 16,
+ paddingRight: 8,
+ paddingBottom: 16,
+ paddingLeft: 8,
+ borderWidth: 2,
+ borderColor: '#f00',
+ borderStyle: 'dashed',
+ borderTopLeftRadius: 4,
+ borderTopRightRadius: 8,
+ borderBottomRightRadius: 12,
+ borderBottomLeftRadius: 16,
+ borderTopWidth: 1,
+ borderRightWidth: 2,
+ borderBottomWidth: 3,
+ borderLeftWidth: 4,
+ borderTopColor: 'red',
+ borderRightColor: 'green',
+ borderBottomColor: 'blue',
+ borderLeftColor: 'black',
+ })
+ })
+
+ it('transforms transform and text-shadow values', () => {
+ const result = transform([
+ ['transform', 'scale(2, 3) translate(4px, 50%) rotate(5deg)'],
+ ['text-shadow', '10px 20px 30px rgba(0, 0, 0, 0.4)'],
+ ])
+
+ assert.deepEqual(result.diagnostics, [])
+ assert.deepEqual(result.style, {
+ transform: [
+ { rotate: '5deg' },
+ { translateY: '50%' },
+ { translateX: 4 },
+ { scaleY: 3 },
+ { scaleX: 2 },
+ ],
+ textShadowOffset: { width: 10, height: 20 },
+ textShadowRadius: 30,
+ textShadowColor: 'rgba(0, 0, 0, 0.4)',
+ })
+ })
+
+ it('passes through box-shadow and filter strings', () => {
+ const result = transform([
+ ['box-shadow', '0 2px 8px rgba(0,0,0,.2), 0 1px 2px #333'],
+ ['filter', 'blur(4px) brightness(0.8)'],
+ ])
+
+ assert.deepEqual(result.diagnostics, [])
+ assert.deepEqual(result.style, {
+ boxShadow: '0 2px 8px rgba(0,0,0,.2), 0 1px 2px #333',
+ filter: 'blur(4px) brightness(0.8)',
+ })
+ })
+
+ it('maps background-image by platform and supports limited background shorthand', () => {
+ const nativeResult = transform([
+ ['background-image', 'linear-gradient(90deg, red, blue)'],
+ ['background', 'red radial-gradient(circle, white, black)'],
+ ])
+ const webResult = transform(
+ [['background-image', 'linear-gradient(90deg, red, blue)']],
+ { platform: 'web' }
+ )
+
+ assert.deepEqual(nativeResult.diagnostics, [])
+ assert.deepEqual(nativeResult.style, {
+ experimental_backgroundImage: 'radial-gradient(circle, white, black)',
+ backgroundColor: 'red',
+ })
+ assert.deepEqual(webResult.style, {
+ backgroundImage: 'linear-gradient(90deg, red, blue)',
+ })
+ })
+
+ it('diagnoses unsupported background images without emitting style', () => {
+ const result = transform([
+ ['background-image', 'url(foo.png)'],
+ ['background', 'no-repeat center/cover red'],
+ ])
+
+ assert.deepEqual(result.style, {})
+ assert.deepEqual(
+ result.diagnostics.map(diagnostic => diagnostic.code),
+ ['UNSUPPORTED_BACKGROUND_IMAGE', 'UNSUPPORTED_BACKGROUND_SHORTHAND']
+ )
+ })
+
+ it('transforms animations, transitions, and animation keyframe names', () => {
+ const result = transform(
+ [
+ ['animation', 'fadeIn 300ms ease, slideIn 500ms ease-out 100ms'],
+ [
+ 'transition',
+ 'background-color 200ms linear, opacity 1s ease-in 50ms',
+ ],
+ ],
+ {
+ keyframes: {
+ fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },
+ },
+ }
+ )
+
+ assert.deepEqual(result.diagnostics, [])
+ assert.deepEqual(result.style, {
+ animationName: [
+ { from: { opacity: 0 }, to: { opacity: 1 } },
+ 'slideIn',
+ ],
+ animationDuration: ['300ms', '500ms'],
+ animationTimingFunction: ['ease', 'ease-out'],
+ animationDelay: ['0s', '100ms'],
+ animationIterationCount: [1, 1],
+ animationDirection: ['normal', 'normal'],
+ animationFillMode: ['none', 'none'],
+ animationPlayState: ['running', 'running'],
+ transitionProperty: ['backgroundColor', 'opacity'],
+ transitionDuration: ['200ms', '1s'],
+ transitionTimingFunction: ['linear', 'ease-in'],
+ transitionDelay: ['0s', '50ms'],
+ })
+ })
+})
diff --git a/packages/css-to-rn/test/engine/values.test.ts b/packages/css-to-rn/test/engine/values.test.ts
new file mode 100644
index 0000000..1dcab33
--- /dev/null
+++ b/packages/css-to-rn/test/engine/values.test.ts
@@ -0,0 +1,84 @@
+import assert from 'node:assert/strict'
+import { resolveCssValue } from '../../src/index.ts'
+
+describe('@cssxjs/css-to-rn value resolver', () => {
+ it('resolves runtime variables, defaults, and inline fallbacks by priority', () => {
+ assert.equal(resolveCssValue('var(--color, red)', {
+ defaultVariables: { '--color': 'blue' },
+ variables: { '--color': 'green' }
+ }).value, 'green')
+
+ assert.equal(resolveCssValue('var(--color, red)', {
+ defaultVariables: { '--color': 'blue' }
+ }).value, 'blue')
+
+ assert.equal(resolveCssValue('var(--color, red)').value, 'red')
+ })
+
+ it('resolves nested var fallbacks and records dependencies', () => {
+ const result = resolveCssValue('var(--a, var(--b, red))', {
+ defaultVariables: { '--b': 'blue' }
+ })
+
+ assert.equal(result.valid, true)
+ assert.equal(result.value, 'blue')
+ assert.deepEqual(result.dependencies.vars, ['--a', '--b'])
+ })
+
+ it('invalidates unresolved variables', () => {
+ const result = resolveCssValue('1px solid var(--missing)')
+
+ assert.equal(result.valid, false)
+ assert.equal(result.diagnostics[0].code, 'UNRESOLVED_VARIABLE')
+ assert.deepEqual(result.dependencies.vars, ['--missing'])
+ })
+
+ it('detects variable cycles', () => {
+ const result = resolveCssValue('var(--a)', {
+ defaultVariables: {
+ '--a': 'var(--b)',
+ '--b': 'var(--a)'
+ }
+ })
+
+ assert.equal(result.valid, false)
+ assert.equal(result.diagnostics[0].code, 'VARIABLE_CYCLE')
+ })
+
+ it('replaces interpolation slots before resolving variables', () => {
+ const result = resolveCssValue('color-mix(in srgb, var(--__cssx_dynamic_0), white)', {
+ values: ['var(--color, red)'],
+ variables: { '--color': 'green' }
+ })
+
+ assert.equal(result.valid, true)
+ assert.equal(result.value, 'color-mix(in srgb, green, white)')
+ assert.deepEqual(result.dependencies.vars, ['--color'])
+ })
+
+ it('invalidates omitted interpolation values', () => {
+ const result = resolveCssValue('var(--__cssx_dynamic_0)', {
+ values: [false]
+ })
+
+ assert.equal(result.valid, false)
+ assert.equal(result.diagnostics[0].code, 'INVALID_INTERPOLATION_VALUE')
+ })
+
+ it('resolves u and viewport units', () => {
+ const result = resolveCssValue('calc(10vw + 2u)', {
+ dimensions: { width: 200, height: 100 }
+ })
+
+ assert.equal(result.valid, true)
+ assert.equal(result.value, '36px')
+ assert.equal(result.dependencies.dimensions, true)
+ })
+
+ it('rejects unsupported calc expressions', () => {
+ const result = resolveCssValue('calc(100% - 16px)')
+
+ assert.equal(result.valid, false)
+ assert.equal(result.diagnostics[0].code, 'UNSUPPORTED_CALC')
+ })
+})
diff --git a/packages/css-to-rn/test/react/tracking.test.ts b/packages/css-to-rn/test/react/tracking.test.ts
new file mode 100644
index 0000000..d37e60e
--- /dev/null
+++ b/packages/css-to-rn/test/react/tracking.test.ts
@@ -0,0 +1,572 @@
+import assert from 'node:assert/strict'
+import { JSDOM } from 'jsdom'
+import React, { Suspense, act, createElement } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import {
+ __cssxInternals,
+ compileCss,
+ compileCssTemplate,
+ cssx,
+ setDefaultVariables,
+ useCssxLayer,
+ variables
+} from '../../src/web.ts'
+
+(globalThis as typeof globalThis & {
+ IS_REACT_ACT_ENVIRONMENT?: boolean
+}).IS_REACT_ACT_ENVIRONMENT = true
+
+const dom = new JSDOM('')
+Object.assign(globalThis, {
+ window: dom.window,
+ document: dom.window.document,
+ HTMLElement: dom.window.HTMLElement,
+ Node: dom.window.Node
+})
+
+describe('@cssxjs/css-to-rn React tracking prototype', () => {
+ function reset (): void {
+ __cssxInternals.resetStoreForTests()
+ __cssxInternals.clearRawCssCacheForTests()
+ }
+
+ it('batches variable notifications in one microtask', async () => {
+ reset()
+ const calls: string[][] = []
+ const unsubscribe = __cssxInternals.subscribeVariablesForTests(
+ ['--bg', '--text'],
+ names => calls.push([...names].sort())
+ )
+
+ variables['--bg'] = 'black'
+ Object.assign(variables, {
+ '--text': 'white'
+ })
+
+ assert.equal(calls.length, 0)
+ await __cssxInternals.flushMicrotasksForTests()
+
+ assert.deepEqual(calls, [['--bg', '--text']])
+ unsubscribe()
+ reset()
+ })
+
+ it('records dependencies only for matched active selectors', () => {
+ reset()
+ const sheet = compileCss(`
+ .root { color: var(--root-color, red); }
+ .label { color: var(--label-color, blue); }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+
+ tracked.startRender()
+ const props = cssx('root', tracked)
+ const dependencies = tracked.getPendingDependenciesForTests()
+
+ assert.deepEqual(props, {
+ style: {
+ color: 'red'
+ }
+ })
+ assert.deepEqual(
+ Array.from(dependencies?.vars.keys() ?? []),
+ ['--root-color']
+ )
+ reset()
+ })
+
+ it('notifies tracked wrappers only for committed variable dependencies', async () => {
+ reset()
+ const sheet = compileCss(`
+ .root { color: var(--root-color, red); }
+ .root.active { background-color: var(--active-bg, blue); }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ let calls = 0
+ const unsubscribe = tracked.subscribe(() => {
+ calls += 1
+ })
+
+ tracked.startRender()
+ cssx('root', tracked)
+ tracked.commitRender()
+
+ variables['--active-bg'] = 'green'
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 0)
+
+ variables['--root-color'] = 'black'
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 1)
+
+ unsubscribe()
+ assert.equal(__cssxInternals.getRuntimeSubscriberCountForTests(), 0)
+ reset()
+ })
+
+ it('unions dependencies from multiple cssx calls in one render', () => {
+ reset()
+ const sheet = compileCss(`
+ .root { color: var(--root-color, red); }
+ .label { color: var(--label-color, blue); }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+
+ tracked.startRender()
+ cssx('root', tracked)
+ cssx('label', tracked)
+
+ assert.deepEqual(
+ Array.from(tracked.getPendingDependenciesForTests()?.vars.keys() ?? []),
+ ['--root-color', '--label-color']
+ )
+ reset()
+ })
+
+ it('does not subscribe to dependencies collected by an aborted render', async () => {
+ reset()
+ const sheet = compileCss(`
+ .root { color: var(--root-color, red); }
+ .root.active { background-color: var(--active-bg, blue); }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ let calls = 0
+ const unsubscribe = tracked.subscribe(() => {
+ calls += 1
+ })
+
+ tracked.startRender()
+ cssx('root', tracked)
+ tracked.commitRender()
+
+ tracked.startRender()
+ cssx(['root', 'active'], tracked)
+
+ variables['--active-bg'] = 'green'
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 0)
+
+ variables['--root-color'] = 'black'
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 1)
+
+ unsubscribe()
+ reset()
+ })
+
+ it('commits the dependency snapshot captured for that render', async () => {
+ reset()
+ const sheet = compileCss(`
+ .root { color: var(--root-color, red); }
+ .root.active { background-color: var(--active-bg, blue); }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ let calls = 0
+ const unsubscribe = tracked.subscribe(() => {
+ calls += 1
+ })
+
+ const rootRender = tracked.startRender()
+ cssx('root', tracked)
+
+ tracked.startRender()
+ cssx(['root', 'active'], tracked)
+
+ tracked.commitRender(rootRender)
+
+ variables['--active-bg'] = 'green'
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 0)
+
+ variables['--root-color'] = 'black'
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 1)
+
+ unsubscribe()
+ reset()
+ })
+
+ it('reuses tracked cache references for identical render inputs', () => {
+ reset()
+ const sheet = compileCss('.root { color: var(--root-color, red); }')
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+
+ tracked.startRender()
+ const first = cssx('root', tracked, { style: { opacity: 0.5 } })
+ tracked.commitRender()
+
+ tracked.startRender()
+ const second = cssx('root', tracked, { style: { opacity: 0.5 } })
+ tracked.commitRender()
+
+ assert.equal(second, first)
+ assert.equal(second.style, first.style)
+ reset()
+ })
+
+ it('passes tracked template values into the shared resolver', () => {
+ reset()
+ const sheet = compileCssTemplate('.root { color: var(--__cssx_dynamic_0); }')
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, {
+ target: 'web',
+ values: ['red']
+ })
+
+ tracked.startRender()
+ const red = cssx('root', tracked)
+ tracked.commitRender()
+
+ tracked.update(sheet, {
+ target: 'web',
+ values: ['green']
+ })
+ tracked.startRender()
+ const green = cssx('root', tracked)
+ tracked.commitRender()
+
+ assert.deepEqual(red, { style: { color: 'red' } })
+ assert.deepEqual(green, { style: { color: 'green' } })
+ assert.notEqual(green, red)
+ reset()
+ })
+
+ it('notifies default variable replacements and removed defaults', async () => {
+ reset()
+ const sheet = compileCss('.root { color: var(--root-color, red); }')
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ let calls = 0
+ const unsubscribe = tracked.subscribe(() => {
+ calls += 1
+ })
+
+ setDefaultVariables({ '--root-color': 'blue' })
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), { style: { color: 'blue' } })
+ tracked.commitRender()
+
+ setDefaultVariables({ '--other': 'green' })
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 1)
+
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), { style: { color: 'red' } })
+ tracked.commitRender()
+
+ unsubscribe()
+ reset()
+ })
+
+ it('uses dimension adapter values for media queries and viewport units', async () => {
+ reset()
+ let dimensions = { width: 320, height: 640 }
+ const listeners = new Set<() => void>()
+
+ __cssxInternals.configureDimensionsAdapterForTests({
+ get: () => dimensions,
+ subscribe: listener => {
+ listeners.add(listener)
+ return () => {
+ listeners.delete(listener)
+ }
+ }
+ })
+
+ const sheet = compileCss(`
+ .root {
+ width: 100vw;
+ height: 50vh;
+ }
+ @media (max-width: 480px) {
+ .root { color: red; }
+ }
+ @media (orientation: portrait) {
+ .root { background-color: blue; }
+ }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ let calls = 0
+ const unsubscribe = tracked.subscribe(() => {
+ calls += 1
+ })
+
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), {
+ style: {
+ width: 320,
+ height: 320,
+ color: 'red',
+ backgroundColor: 'blue'
+ }
+ })
+ tracked.commitRender()
+
+ dimensions = { width: 800, height: 400 }
+ for (const listener of Array.from(listeners)) listener()
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 1)
+
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), {
+ style: {
+ width: 800,
+ height: 200
+ }
+ })
+ tracked.commitRender()
+
+ unsubscribe()
+ reset()
+ })
+
+ it('invalidates media dependencies using the same dimensions as resolution', async () => {
+ reset()
+ let dimensions = { width: 320, height: 640 }
+ const listeners = new Set<() => void>()
+
+ __cssxInternals.configureDimensionsAdapterForTests({
+ get: () => dimensions,
+ subscribe: listener => {
+ listeners.add(listener)
+ return () => {
+ listeners.delete(listener)
+ }
+ }
+ })
+
+ const sheet = compileCss(`
+ .root { color: black; }
+ @media (orientation: portrait) {
+ .root { color: red; }
+ }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ let calls = 0
+ const unsubscribe = tracked.subscribe(() => {
+ calls += 1
+ })
+
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), {
+ style: {
+ color: 'red'
+ }
+ })
+ tracked.commitRender()
+
+ dimensions = { width: 800, height: 400 }
+ for (const listener of Array.from(listeners)) listener()
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 1)
+
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), {
+ style: {
+ color: 'black'
+ }
+ })
+ tracked.commitRender()
+
+ unsubscribe()
+ reset()
+ })
+
+ it('invalidates matchMedia-only dependencies through the media adapter', async () => {
+ reset()
+ let scheme = 'light'
+ const listeners = new Map void>>()
+
+ __cssxInternals.configureMediaQueryAdapterForTests({
+ evaluate: query => query === '(prefers-color-scheme: dark)' && scheme === 'dark',
+ subscribe: (query, listener) => {
+ let queryListeners = listeners.get(query)
+ if (queryListeners == null) {
+ queryListeners = new Set()
+ listeners.set(query, queryListeners)
+ }
+ queryListeners.add(listener)
+ return () => {
+ queryListeners?.delete(listener)
+ if (queryListeners?.size === 0) listeners.delete(query)
+ }
+ }
+ })
+
+ const sheet = compileCss(`
+ .root { color: black; }
+ @media (prefers-color-scheme: dark) {
+ .root { color: white; }
+ }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ let calls = 0
+ const unsubscribe = tracked.subscribe(() => {
+ calls += 1
+ })
+
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), {
+ style: {
+ color: 'black'
+ }
+ })
+ tracked.commitRender()
+ assert.equal(listeners.get('(prefers-color-scheme: dark)')?.size, 1)
+
+ scheme = 'dark'
+ for (const listener of Array.from(listeners.get('(prefers-color-scheme: dark)') ?? [])) {
+ listener()
+ }
+ await __cssxInternals.flushMicrotasksForTests()
+ assert.equal(calls, 1)
+
+ tracked.startRender()
+ assert.deepEqual(cssx('root', tracked), {
+ style: {
+ color: 'white'
+ }
+ })
+ tracked.commitRender()
+
+ unsubscribe()
+ assert.equal(listeners.size, 0)
+ reset()
+ })
+
+ it('does not retain media query listeners from aborted renders', () => {
+ reset()
+ const listeners = new Map void>>()
+
+ __cssxInternals.configureMediaQueryAdapterForTests({
+ evaluate: () => true,
+ subscribe: (query, listener) => {
+ let queryListeners = listeners.get(query)
+ if (queryListeners == null) {
+ queryListeners = new Set()
+ listeners.set(query, queryListeners)
+ }
+ queryListeners.add(listener)
+ return () => {
+ queryListeners?.delete(listener)
+ if (queryListeners?.size === 0) listeners.delete(query)
+ }
+ }
+ })
+
+ const sheet = compileCss(`
+ @media (hover: hover) {
+ .root { color: red; }
+ }
+ `)
+ const tracked = __cssxInternals.createTrackedCssxSheet(sheet, { target: 'web' })
+ const unsubscribe = tracked.subscribe(() => {})
+
+ tracked.startRender()
+ cssx('root', tracked)
+
+ assert.equal(listeners.size, 0)
+
+ unsubscribe()
+ reset()
+ })
+
+ it('subscribes React hook users only to committed dependencies', async () => {
+ reset()
+ const sheet = compileCss(`
+ .root { color: var(--root-color, red); }
+ .root.active { background-color: var(--active-bg, blue); }
+ `)
+ let renders = 0
+ let latest: unknown
+ let root: Root | undefined
+ const container = document.createElement('div')
+ document.body.appendChild(container)
+
+ function Component (props: { active?: boolean }): React.ReactNode {
+ renders += 1
+ const layer = useCssxLayer(sheet, { target: 'web' })
+ latest = cssx(['root', { active: props.active }], layer as Parameters[1])
+ return createElement('div', latest as Record)
+ }
+
+ await act(async () => {
+ root = createRoot(container)
+ root.render(createElement(Component))
+ })
+
+ assert.deepEqual(latest, {
+ style: {
+ color: 'red'
+ }
+ })
+
+ variables['--active-bg'] = 'green'
+ await act(async () => {
+ await __cssxInternals.flushMicrotasksForTests()
+ })
+ assert.equal(renders, 1)
+
+ variables['--root-color'] = 'black'
+ await act(async () => {
+ await __cssxInternals.flushMicrotasksForTests()
+ })
+ assert.equal(renders, 2)
+ assert.deepEqual(latest, {
+ style: {
+ color: 'black'
+ }
+ })
+
+ await act(async () => {
+ root?.unmount()
+ })
+ container.remove()
+ assert.equal(__cssxInternals.getRuntimeSubscriberCountForTests(), 0)
+ reset()
+ })
+
+ it('does not subscribe React hook dependencies from a Suspense-aborted initial render', async () => {
+ reset()
+ const pending = new Promise(() => {})
+ const sheet = compileCss(`
+ .root { color: var(--root-color, red); }
+ .root.active { background-color: var(--active-bg, blue); }
+ `)
+ let renders = 0
+ let root: Root | undefined
+ const container = document.createElement('div')
+ document.body.appendChild(container)
+
+ function Suspender (): React.ReactNode {
+ renders += 1
+ const layer = useCssxLayer(sheet, { target: 'web' })
+ cssx(['root', 'active'], layer as Parameters[1])
+ throw pending
+ }
+
+ await act(async () => {
+ root = createRoot(container)
+ root.render(createElement(
+ Suspense,
+ { fallback: createElement('span', null, 'loading') },
+ createElement(Suspender)
+ ))
+ })
+
+ assert.equal(container.textContent, 'loading')
+ assert.equal(__cssxInternals.getRuntimeSubscriberCountForTests(), 0)
+ const rendersAfterFallback = renders
+
+ variables['--active-bg'] = 'green'
+ await act(async () => {
+ await __cssxInternals.flushMicrotasksForTests()
+ })
+ assert.equal(renders, rendersAfterFallback)
+ assert.equal(__cssxInternals.getRuntimeSubscriberCountForTests(), 0)
+
+ await act(async () => {
+ root?.unmount()
+ })
+ container.remove()
+ reset()
+ })
+})
diff --git a/packages/css-to-rn/test/types.d.ts b/packages/css-to-rn/test/types.d.ts
new file mode 100644
index 0000000..038853c
--- /dev/null
+++ b/packages/css-to-rn/test/types.d.ts
@@ -0,0 +1,2 @@
+declare function describe (name: string, fn: () => void): void
+declare function it (name: string, fn: () => void): void
diff --git a/packages/css-to-rn/tsconfig.build.json b/packages/css-to-rn/tsconfig.build.json
new file mode 100644
index 0000000..297b615
--- /dev/null
+++ b/packages/css-to-rn/tsconfig.build.json
@@ -0,0 +1,15 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "src",
+ "outDir": "dist",
+ "declaration": true,
+ "declarationMap": false,
+ "sourceMap": false,
+ "noEmit": false,
+ "allowImportingTsExtensions": false
+ },
+ "include": [
+ "src/**/*.ts"
+ ]
+}
diff --git a/packages/css-to-rn/tsconfig.json b/packages/css-to-rn/tsconfig.json
new file mode 100644
index 0000000..ad929e1
--- /dev/null
+++ b/packages/css-to-rn/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "nodenext",
+ "moduleResolution": "nodenext",
+ "rewriteRelativeImportExtensions": true,
+ "erasableSyntaxOnly": true,
+ "verbatimModuleSyntax": true,
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "customConditions": [
+ "cssx-ts"
+ ],
+ "types": [
+ "node"
+ ]
+ },
+ "include": [
+ "src/**/*.ts",
+ "test/**/*.ts"
+ ]
+}
diff --git a/packages/cssxjs/index.d.ts b/packages/cssxjs/index.d.ts
index 06b60fb..4771cb6 100644
--- a/packages/cssxjs/index.d.ts
+++ b/packages/cssxjs/index.d.ts
@@ -1,4 +1,27 @@
import type React from 'react'
+export {
+ CssxProvider,
+ TrackedCssxSheet,
+ configureCssx,
+ cssx,
+ defaultVariables,
+ isTrackedCssxSheet,
+ setDefaultVariables,
+ useCssxLayer,
+ useRuntimeCss,
+ useCssxConfig,
+ useCssxSheet,
+ useCssxTemplate,
+ variables
+} from '@cssxjs/css-to-rn/react'
+export type {
+ CssxProviderProps,
+ CssxReactConfig,
+ CssxResolvedProps,
+ CssxRuntimeOptions,
+ CssxStyleName,
+ TrackedCssxSheetOptions
+} from '@cssxjs/css-to-rn/react'
export type CssxjsSimpleValue =
| string
diff --git a/packages/cssxjs/index.js b/packages/cssxjs/index.js
index 38ae353..ca93285 100644
--- a/packages/cssxjs/index.js
+++ b/packages/cssxjs/index.js
@@ -1,7 +1,18 @@
-export { default as variables } from '@cssxjs/runtime/variables'
-export { defaultVariables, setDefaultVariables } from '@cssxjs/runtime/variables'
-export { default as dimensions } from '@cssxjs/runtime/dimensions'
-export { default as matcher } from '@cssxjs/runtime/matcher'
+export {
+ CssxProvider,
+ TrackedCssxSheet,
+ configureCssx,
+ cssx,
+ defaultVariables,
+ isTrackedCssxSheet,
+ setDefaultVariables,
+ useCssxLayer,
+ useRuntimeCss,
+ useCssxConfig,
+ useCssxSheet,
+ useCssxTemplate,
+ variables
+} from '@cssxjs/css-to-rn/react'
export function css (cssString) {
throw Error('[cssxjs] Unprocessed \'css\' template string. Bundler (Babel / Metro) did not process this file correctly.')
diff --git a/packages/cssxjs/package.json b/packages/cssxjs/package.json
index b72c121..5c0fd06 100644
--- a/packages/cssxjs/package.json
+++ b/packages/cssxjs/package.json
@@ -33,14 +33,14 @@
"access": "public"
},
"scripts": {
- "test": "echo 'No tests yet' && exit 0"
+ "test": "NODE_OPTIONS=\"${NODE_OPTIONS:-} -C cssx-ts\" node --input-type=module -e \"import { cssx, useCssxLayer, useRuntimeCss } from 'cssxjs'; if (typeof cssx !== 'function' || typeof useCssxLayer !== 'function' || typeof useRuntimeCss !== 'function') throw new Error('cssxjs source-condition import smoke failed')\""
},
"dependencies": {
"@cssxjs/babel-plugin-rn-stylename-inline": "^0.3.0",
"@cssxjs/babel-plugin-rn-stylename-to-style": "^0.3.0",
"@cssxjs/bundler": "^0.3.0",
+ "@cssxjs/css-to-rn": "^0.3.0",
"@cssxjs/loaders": "^0.3.0",
- "@cssxjs/runtime": "^0.3.0",
"@react-pug/babel-plugin-react-pug": "^0.1.18",
"@react-pug/check-types": "^0.1.18",
"babel-preset-cssxjs": "^0.3.0"
diff --git a/packages/cssxjs/runtime/react-native-teamplay.js b/packages/cssxjs/runtime/react-native-teamplay.js
index 61f15cc..7f689f8 100644
--- a/packages/cssxjs/runtime/react-native-teamplay.js
+++ b/packages/cssxjs/runtime/react-native-teamplay.js
@@ -1,2 +1,10 @@
-export { default } from '@cssxjs/runtime/entrypoints/react-native-teamplay'
-export { default as runtime } from '@cssxjs/runtime/entrypoints/react-native-teamplay'
+// Backward-compatibility entrypoint for older Babel configs that selected
+// `cache: 'teamplay'`. Runtime caching/subscriptions are now implemented by
+// @cssxjs/css-to-rn; this file intentionally just re-exports the normal React
+// Native runtime and does not import Teamplay.
+export {
+ default,
+ runtime
+} from './react-native.js'
+
+export * from './react-native.js'
diff --git a/packages/cssxjs/runtime/react-native.js b/packages/cssxjs/runtime/react-native.js
index d3fc080..0952e35 100644
--- a/packages/cssxjs/runtime/react-native.js
+++ b/packages/cssxjs/runtime/react-native.js
@@ -1,2 +1,52 @@
-export { default } from '@cssxjs/runtime/entrypoints/react-native'
-export { default as runtime } from '@cssxjs/runtime/entrypoints/react-native'
+import {
+ cssx
+} from '@cssxjs/css-to-rn/react-native'
+
+export {
+ CssxProvider,
+ TrackedCssxSheet,
+ configureCssx,
+ defaultVariables,
+ isTrackedCssxSheet,
+ setDefaultVariables,
+ useCssxLayer,
+ useRuntimeCss,
+ useCssxConfig,
+ useCssxSheet,
+ useCssxTemplate,
+ variables
+} from '@cssxjs/css-to-rn/react-native'
+
+export function runtime (
+ styleName,
+ fileStyles,
+ globalStyles,
+ localStyles,
+ inlineStyleProps
+) {
+ return cssx(
+ styleName,
+ collectLayers(fileStyles, globalStyles, localStyles),
+ inlineStyleProps
+ )
+}
+
+export default runtime
+
+function collectLayers (...layers) {
+ return layers.filter(isLayer)
+}
+
+function isLayer (layer) {
+ return Boolean(
+ typeof layer === 'string' ||
+ (
+ layer &&
+ typeof layer === 'object' &&
+ (
+ layer.version === 1 ||
+ Object.prototype.hasOwnProperty.call(layer, 'sheet')
+ )
+ )
+ )
+}
diff --git a/packages/cssxjs/runtime/web-teamplay.js b/packages/cssxjs/runtime/web-teamplay.js
index b1956ea..4911329 100644
--- a/packages/cssxjs/runtime/web-teamplay.js
+++ b/packages/cssxjs/runtime/web-teamplay.js
@@ -1,2 +1,10 @@
-export { default } from '@cssxjs/runtime/entrypoints/web-teamplay'
-export { default as runtime } from '@cssxjs/runtime/entrypoints/web-teamplay'
+// Backward-compatibility entrypoint for older Babel configs that selected
+// `cache: 'teamplay'`. Runtime caching/subscriptions are now implemented by
+// @cssxjs/css-to-rn; this file intentionally just re-exports the normal web
+// runtime and does not import Teamplay.
+export {
+ default,
+ runtime
+} from './web.js'
+
+export * from './web.js'
diff --git a/packages/cssxjs/runtime/web.js b/packages/cssxjs/runtime/web.js
index 081b11e..527b07d 100644
--- a/packages/cssxjs/runtime/web.js
+++ b/packages/cssxjs/runtime/web.js
@@ -1,2 +1,52 @@
-export { default } from '@cssxjs/runtime/entrypoints/web'
-export { default as runtime } from '@cssxjs/runtime/entrypoints/web'
+import {
+ cssx
+} from '@cssxjs/css-to-rn/web'
+
+export {
+ CssxProvider,
+ TrackedCssxSheet,
+ configureCssx,
+ defaultVariables,
+ isTrackedCssxSheet,
+ setDefaultVariables,
+ useCssxLayer,
+ useRuntimeCss,
+ useCssxConfig,
+ useCssxSheet,
+ useCssxTemplate,
+ variables
+} from '@cssxjs/css-to-rn/web'
+
+export function runtime (
+ styleName,
+ fileStyles,
+ globalStyles,
+ localStyles,
+ inlineStyleProps
+) {
+ return cssx(
+ styleName,
+ collectLayers(fileStyles, globalStyles, localStyles),
+ inlineStyleProps
+ )
+}
+
+export default runtime
+
+function collectLayers (...layers) {
+ return layers.filter(isLayer)
+}
+
+function isLayer (layer) {
+ return Boolean(
+ typeof layer === 'string' ||
+ (
+ layer &&
+ typeof layer === 'object' &&
+ (
+ layer.version === 1 ||
+ Object.prototype.hasOwnProperty.call(layer, 'sheet')
+ )
+ )
+ )
+}
diff --git a/packages/loaders/compilers/css.js b/packages/loaders/compilers/css.js
index e430135..78963e1 100644
--- a/packages/loaders/compilers/css.js
+++ b/packages/loaders/compilers/css.js
@@ -3,11 +3,13 @@ const cssLoader = require('../cssToReactNativeLoader.js')
const callLoader = require('../callLoader.js')
const { stripExport } = require('./helpers')
-module.exports = function compileCss (src) {
+module.exports = function compileCss (src, filename, options) {
return stripExport(
callLoader(
cssLoader,
- src
+ src,
+ filename,
+ options
)
)
}
diff --git a/packages/loaders/compilers/styl.js b/packages/loaders/compilers/styl.js
index a92dd13..fe4c1a5 100644
--- a/packages/loaders/compilers/styl.js
+++ b/packages/loaders/compilers/styl.js
@@ -10,5 +10,5 @@ module.exports = function compileStyl (src, filename, options) {
filename,
options
)
- return compileCss(src)
+ return compileCss(src, filename, options)
}
diff --git a/packages/loaders/cssToReactNativeLoader.js b/packages/loaders/cssToReactNativeLoader.js
index d2b0589..f942781 100644
--- a/packages/loaders/cssToReactNativeLoader.js
+++ b/packages/loaders/cssToReactNativeLoader.js
@@ -1,33 +1,95 @@
-// ref: https://github.com/kristerkari/react-native-css-transformer
-const css2rn = require('@startupjs/css-to-react-native-transform').default
+const { spawnSync } = require('child_process')
+const { existsSync } = require('fs')
+const { createRequire } = require('module')
+const { join } = require('path')
+const { pathToFileURL } = require('url')
+const cssToRn = requireCssToRn()
+const { compileCss, compileCssTemplate } = cssToRn
+const hashCssObject = cssToRn.simpleNumericHash ?? simpleNumericHash
const EXPORT_REGEX = /:export\s*\{/
-// Match var() anywhere in a string value (not just at the start)
-const VAR_NAMES_REGEX = /var\(\s*(--[A-Za-z0-9_-]+)/g
module.exports = function cssToReactNative (source) {
source = escapeExport(source)
- const cssObject = css2rn(source, {
- parseMediaQueries: true,
- parsePartSelectors: true,
- parseKeyframes: true
+ const compile = this.query?.template ? compileCssTemplate : compileCss
+ const cssObject = compile(source, {
+ mode: 'build',
+ target: this.query?.platform,
+ sourceIdentity: this.resourcePath
})
- for (const key in cssObject.__exportProps || {}) {
- cssObject[key] = parseStylValue(cssObject.__exportProps[key])
+ for (const key in cssObject.exports || {}) {
+ cssObject[key] = parseStylValue(cssObject.exports[key])
}
const stringifiedCss = JSON.stringify(cssObject)
- // save hash to use with the caching system of @startupjs/cache
- cssObject.__hash__ = simpleNumericHash(stringifiedCss)
- // OPTIMIZATION: save vars used in the styles for later replacement in runtime
- // and also to determine whether we need to listen for variable changes
- const vars = getVariableNames(stringifiedCss)
- if (vars) cssObject.__vars = vars
- // OPTIMIZATION: indicate whether @media queries are used.
- // This is later used in runtime to determine whether we need to listen for dimension changes
- if (hasMedia(cssObject)) cssObject.__hasMedia = true
+ // save hash to keep compatibility with existing generated code and tests
+ cssObject.__hash__ = hashCssObject(stringifiedCss)
return 'module.exports = ' + JSON.stringify(cssObject)
}
+function requireCssToRn () {
+ const nativeRequire = createRequire(__filename)
+ try {
+ return nativeRequire('@cssxjs/css-to-rn')
+ } catch (error) {
+ const sourceEntrypoint = join(__dirname, '../css-to-rn/src/index.ts')
+ if (
+ existsSync(sourceEntrypoint) &&
+ (
+ error.code === 'MODULE_NOT_FOUND' ||
+ error instanceof SyntaxError ||
+ /Must use import to load ES Module/.test(error.message)
+ )
+ ) {
+ return createChildCompiler(sourceEntrypoint)
+ }
+ throw error
+ }
+}
+
+function createChildCompiler (sourceEntrypoint) {
+ return {
+ compileCss: (source, options) =>
+ compileInChildProcess('compileCss', sourceEntrypoint, source, options),
+ compileCssTemplate: (source, options) =>
+ compileInChildProcess('compileCssTemplate', sourceEntrypoint, source, options),
+ simpleNumericHash
+ }
+}
+
+function compileInChildProcess (method, sourceEntrypoint, source, options) {
+ const script = `
+ import { ${method} } from ${JSON.stringify(pathToFileURL(sourceEntrypoint).href)}
+ let input = ''
+ process.stdin.setEncoding('utf8')
+ for await (const chunk of process.stdin) input += chunk
+ const payload = JSON.parse(input)
+ process.stdout.write(JSON.stringify(${method}(payload.source, payload.options)))
+ `
+ const result = spawnSync(process.execPath, [
+ '-C',
+ 'cssx-ts',
+ '--input-type=module',
+ '--eval',
+ script
+ ], {
+ input: JSON.stringify({ source, options }),
+ encoding: 'utf8'
+ })
+
+ if (result.status !== 0) {
+ throw new Error(result.stderr || result.stdout)
+ }
+
+ return JSON.parse(result.stdout)
+}
+
+// ref: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2694461#gistcomment-269461
+function simpleNumericHash (s) {
+ let i, h
+ for (i = 0, h = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
+ return h
+}
+
function parseStylValue (value) {
if (typeof value !== 'string') return value
// strip single quotes (stylus adds it for the topmost value)
@@ -92,25 +154,3 @@ function escapeExport (source) {
return source
}
-
-// ref: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2694461#gistcomment-2694461
-function simpleNumericHash (s) {
- let i, h
- for (i = 0, h = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
- return h
-}
-
-function getVariableNames (cssString) {
- const matches = [...cssString.matchAll(VAR_NAMES_REGEX)]
- if (!matches.length) return
- const res = matches.map(m => m[1]) // extract capture group (variable name)
- return [...new Set(res)].sort() // remove duplicates and sort
-}
-
-function hasMedia (styles = {}) {
- for (const selector in styles) {
- if (/^@media/.test(selector)) {
- return true
- }
- }
-}
diff --git a/packages/loaders/package.json b/packages/loaders/package.json
index 39cd918..1a3e33d 100644
--- a/packages/loaders/package.json
+++ b/packages/loaders/package.json
@@ -12,7 +12,7 @@
"access": "public"
},
"scripts": {
- "test": "echo 'No tests yet' && exit 0"
+ "test": "node -e \"const loader = require('./cssToReactNativeLoader.js'); const output = loader.call({ query: {}, resourcePath: 'smoke.css' }, '.root { color: red }'); if (!output.includes('module.exports')) throw new Error('cssToReactNativeLoader source fallback smoke failed')\""
},
"author": {
"name": "Pavel Zhukov",
@@ -20,7 +20,7 @@
},
"license": "MIT",
"dependencies": {
- "@startupjs/css-to-react-native-transform": "2.1.0-3",
+ "@cssxjs/css-to-rn": "^0.3.0",
"stylus": "0.64.0"
}
}
diff --git a/packages/runtime/.npmignore b/packages/runtime/.npmignore
deleted file mode 100644
index 0f8eb33..0000000
--- a/packages/runtime/.npmignore
+++ /dev/null
@@ -1,2 +0,0 @@
-__tests__/
-test/
diff --git a/packages/runtime/CHANGELOG.md b/packages/runtime/CHANGELOG.md
deleted file mode 100644
index 4f38e84..0000000
--- a/packages/runtime/CHANGELOG.md
+++ /dev/null
@@ -1,159 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [0.3.0](https://github.com/startupjs/startupjs/compare/v0.2.33...v0.3.0) (2026-05-03)
-
-
-### Features
-
-* [BREAKING] [v0.3] Allow writing styles inside pug's `style(lang='styl')` tag; move to new `react-pug` compilation pipeline and linting (fully TS-compatible) ([#4](https://github.com/startupjs/startupjs/issues/4)) ([fca2e90](https://github.com/startupjs/startupjs/commit/fca2e908f2d94ea966bb88f36308677f20709f58))
-
-
-
-
-
-# [0.3.0-alpha.0](https://github.com/startupjs/startupjs/compare/v0.2.33...v0.3.0-alpha.0) (2026-03-25)
-
-**Note:** Version bump only for package @cssxjs/runtime
-
-
-
-
-
-## [0.2.32](https://github.com/startupjs/startupjs/compare/v0.2.31...v0.2.32) (2026-01-25)
-
-
-### Bug Fixes
-
-* **runtime:** support var() in shorthand values and in various complex cases ([4483f54](https://github.com/startupjs/startupjs/commit/4483f54d9507ebb38eb5f056de3fcac39862cb30))
-
-
-
-
-
-## [0.2.31](https://github.com/startupjs/startupjs/compare/v0.2.30...v0.2.31) (2026-01-23)
-
-
-### Bug Fixes
-
-* **runtime:** improve performance of substituting var() in css ([282cb46](https://github.com/startupjs/startupjs/commit/282cb461369cdb951cc873973a2d0da97a682b9b))
-
-
-
-
-
-## [0.2.30](https://github.com/startupjs/startupjs/compare/v0.2.29...v0.2.30) (2026-01-18)
-
-
-### Features
-
-* support animation and transition (the way it's expected by Reanimated v4) ([44a1f77](https://github.com/startupjs/startupjs/commit/44a1f778074f1f65a8ccd76994a6bf1a3eb5e4a7))
-
-
-
-
-
-## [0.2.29](https://github.com/startupjs/startupjs/compare/v0.2.28...v0.2.29) (2025-12-26)
-
-
-### Bug Fixes
-
-* **runtime:** show warning about missing window just once ([b2f07d7](https://github.com/startupjs/startupjs/commit/b2f07d7a6b4f203477057db61c8a2456660d9e87))
-
-
-
-
-
-## [0.2.27](https://github.com/startupjs/startupjs/compare/v0.2.26...v0.2.27) (2025-12-16)
-
-**Note:** Version bump only for package @cssxjs/runtime
-
-
-
-
-
-# v0.2.11 (Fri Nov 07 2025)
-
-#### 🐛 Bug Fix
-
-- fix: make pug reconstruct bindings; add extra options to babel preset; implement reactive update of @media for web and RN ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
-
----
-
-# v0.2.10 (Wed Nov 05 2025)
-
-#### 🐛 Bug Fix
-
-- fix: export matcher, variables, dimensions from @cssxjs/runtime and from the main cssxjs ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
-
----
-
-# v0.2.9 (Wed Nov 05 2025)
-
-#### 🐛 Bug Fix
-
-- fix(runtime): don't process styles when undefined, fix mediaQuery call ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
-
----
-
-# v0.2.5 (Wed Nov 05 2025)
-
-#### 🐛 Bug Fix
-
-- fix: force 'px' unit for lineHegiht in pure React on web ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
-
----
-
-# v0.2.4 (Wed Nov 05 2025)
-
-#### 🚀 Enhancement
-
-- feat: add 'u' unit support to the 'style' prop: 1u = 8px ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
-
----
-
-# v0.2.2 (Tue Nov 04 2025)
-
-#### 🐛 Bug Fix
-
-- fix: support dynamic css var() for colors ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
-
----
-
-# v0.2.0 (Tue Nov 04 2025)
-
-#### 🚀 Enhancement
-
-- feat: add TypeScript support, write a more comprehensive example in TSX ([@cray0000](https://github.com/cray0000))
-- feat(runtime): implement support for both React Native and pure Web ([@cray0000](https://github.com/cray0000))
-- feat: make it work for pure web through a babel plugin [#2](https://github.com/startupjs/cssx/pull/2) ([@cray0000](https://github.com/cray0000))
-
-#### Authors: 1
-
-- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
diff --git a/packages/runtime/constants.cjs b/packages/runtime/constants.cjs
deleted file mode 100644
index de9f7dd..0000000
--- a/packages/runtime/constants.cjs
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
- GLOBAL_NAME: '__CSS_GLOBAL__',
- LOCAL_NAME: '__CSS_LOCAL__'
-}
diff --git a/packages/runtime/dimensions.js b/packages/runtime/dimensions.js
deleted file mode 100644
index c745153..0000000
--- a/packages/runtime/dimensions.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { observable } from '@nx-js/observer-util'
-
-let dimensionsInitialized = false
-
-export function setDimensionsInitialized (value) {
- dimensionsInitialized = value
-}
-
-export function getDimensionsInitialized () {
- return dimensionsInitialized
-}
-
-export default observable({
- width: 0
-})
diff --git a/packages/runtime/entrypoints/react-native-teamplay.js b/packages/runtime/entrypoints/react-native-teamplay.js
deleted file mode 100644
index 6fe4e75..0000000
--- a/packages/runtime/entrypoints/react-native-teamplay.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as platformHelpers from '../platformHelpers/react-native.js'
-import { setPlatformHelpers } from '../platformHelpers/index.js'
-import { process } from '../processCached.js'
-
-setPlatformHelpers(platformHelpers)
-platformHelpers.initDimensionsUpdater()
-
-export default process
diff --git a/packages/runtime/entrypoints/react-native.js b/packages/runtime/entrypoints/react-native.js
deleted file mode 100644
index b1c9bf7..0000000
--- a/packages/runtime/entrypoints/react-native.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as platformHelpers from '../platformHelpers/react-native.js'
-import { setPlatformHelpers } from '../platformHelpers/index.js'
-import { process } from '../process.js'
-
-setPlatformHelpers(platformHelpers)
-platformHelpers.initDimensionsUpdater()
-
-export default process
diff --git a/packages/runtime/entrypoints/web-teamplay.js b/packages/runtime/entrypoints/web-teamplay.js
deleted file mode 100644
index cae627d..0000000
--- a/packages/runtime/entrypoints/web-teamplay.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { setPlatformHelpers } from '../platformHelpers/index.js'
-import * as platformHelpers from '../platformHelpers/web.js'
-import { process } from '../processCached.js'
-
-setPlatformHelpers(platformHelpers)
-platformHelpers.initDimensionsUpdater()
-
-export default process
diff --git a/packages/runtime/entrypoints/web.js b/packages/runtime/entrypoints/web.js
deleted file mode 100644
index 3e721e6..0000000
--- a/packages/runtime/entrypoints/web.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { setPlatformHelpers } from '../platformHelpers/index.js'
-import * as platformHelpers from '../platformHelpers/web.js'
-import { process } from '../process.js'
-
-setPlatformHelpers(platformHelpers)
-platformHelpers.initDimensionsUpdater()
-
-export default process
diff --git a/packages/runtime/matcher.js b/packages/runtime/matcher.js
deleted file mode 100644
index e7c7aaf..0000000
--- a/packages/runtime/matcher.js
+++ /dev/null
@@ -1,127 +0,0 @@
-const ROOT_STYLE_PROP_NAME = 'style'
-const PART_REGEX = /::?part\(([^)]+)\)/
-
-const isArray = Array.isArray || function (arg) {
- return Object.prototype.toString.call(arg) === '[object Array]'
-}
-
-export default function matcher (
- styleName,
- fileStyles,
- globalStyles,
- localStyles,
- inlineStyleProps
-) {
- // inlineStyleProps is used as an implicit indication of:
- // w/ inlineStyleProps -- process all styles and return an object with style props
- // w/o inlineStyleProps -- default inline styles addition is done externally,
- // return styles object directly
- const legacy = !inlineStyleProps
-
- // Process styleName through the `classnames`-like function.
- // This allows to specify styleName as an array or an object,
- // not just the string.
- styleName = cc(styleName)
-
- const htmlClasses = (styleName || '').split(' ').filter(Boolean)
- const resProps = getStyleProps(htmlClasses, fileStyles, legacy)
-
- // In the legacy mode, return root styles right away
- if (legacy) return resProps[ROOT_STYLE_PROP_NAME]
-
- // 1. Add global styles
- appendStyleProps(resProps, getStyleProps(htmlClasses, globalStyles))
-
- // 2. Add local styles
- appendStyleProps(resProps, getStyleProps(htmlClasses, localStyles))
-
- // 3. Add inline styles
- appendStyleProps(resProps, inlineStyleProps)
- return resProps
-}
-
-function appendStyleProps (target, appendProps) {
- for (const propName in appendProps) {
- if (target[propName]) {
- if (isArray(appendProps[propName])) {
- target[propName] = target[propName].concat(appendProps[propName])
- } else {
- target[propName].push(appendProps[propName])
- }
- } else {
- target[propName] = appendProps[propName]
- }
- }
-}
-
-// Process all styles, including the ::part() ones.
-function getStyleProps (htmlClasses, styles, legacyRootOnly) {
- const res = {}
- for (const selector in styles) {
- // Find out which part (or root) this selector is targeting
- const match = selector.match(PART_REGEX)
- const attr = match ? getPropName(match[1]) : ROOT_STYLE_PROP_NAME
-
- // Don't process part if legacyRootOnly is specified
- if (legacyRootOnly && attr !== ROOT_STYLE_PROP_NAME) continue
-
- // Strip ::part() if it exists
- const pureSelector = selector.replace(PART_REGEX, '')
-
- // Check if the selector is matching our list of existing classes
- const cssClasses = pureSelector.split('.')
- if (!arrayContainedInArray(cssClasses, htmlClasses)) continue
-
- // Push selector's style to the according part's array of styles.
- // We have a nested array structure here to account for the selector specificity.
- // This way styles for selector with 3 classes take priority
- // over selectors with 2 classes, etc.
-
- // Note: Specificity here does not strictly equal the standard
- // since we only use classes to increase the specificity.
- // In future this might change when we add support for tags, but for now
- // it is a single digit increment starting from 0 and equalling the amount
- // of classes in the selector.
- const specificity = cssClasses.length - 1
- if (!res[attr]) res[attr] = []
- if (!res[attr][specificity]) res[attr][specificity] = []
- res[attr][specificity].push(styles[selector])
- }
- return res
-}
-
-function getPropName (name) {
- return name + 'Style'
-}
-
-function arrayContainedInArray (cssClasses, htmlClasses) {
- for (let i = 0; i < cssClasses.length; i++) {
- if (htmlClasses.indexOf(cssClasses[i]) === -1) return false
- }
- return true
-};
-
-// classcat 4.0.2
-// https://github.com/jorgebucaran/classcat
-
-function cc (names) {
- let i
- let len
- let tmp = typeof names
- let out = ''
-
- if (tmp === 'string' || tmp === 'number') return names || ''
-
- if (isArray(names) && names.length > 0) {
- for (i = 0, len = names.length; i < len; i++) {
- if ((tmp = cc(names[i])) !== '') out += (out && ' ') + tmp
- }
- } else {
- for (i in names) {
- // eslint-disable-next-line no-prototype-builtins
- if (names.hasOwnProperty(i) && names[i]) out += (out && ' ') + i
- }
- }
-
- return out
-}
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
deleted file mode 100644
index cfe9d31..0000000
--- a/packages/runtime/package.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
- "name": "@cssxjs/runtime",
- "version": "0.3.0",
- "publishConfig": {
- "access": "public"
- },
- "description": "Dynamically resolve styleName in RN with support for multi-class selectors (for easier modifiers)",
- "keywords": [
- "babel",
- "babel-plugin",
- "react-native",
- "stylename",
- "style"
- ],
- "exports": {
- "./entrypoints/web": "./entrypoints/web.js",
- "./entrypoints/react-native": "./entrypoints/react-native.js",
- "./entrypoints/web-teamplay": "./entrypoints/web-teamplay.js",
- "./entrypoints/react-native-teamplay": "./entrypoints/react-native-teamplay.js",
- "./constants": "./constants.cjs",
- "./dimensions": "./dimensions.js",
- "./variables": "./variables.js",
- "./matcher": "./matcher.js"
- },
- "type": "module",
- "scripts": {
- "test": "mocha"
- },
- "author": "Pavel Zhukov",
- "license": "MIT",
- "repository": {
- "type": "git",
- "url": "https://github.com/startupjs/startupjs"
- },
- "dependencies": {
- "@nx-js/observer-util": "^4.1.3",
- "css-viewport-units-transform": "^0.10.2",
- "deepmerge": "^3.2.0",
- "micro-memoize": "^3.0.1"
- },
- "devDependencies": {
- "@cssxjs/loaders": "^0.3.0",
- "@startupjs/css-to-react-native-transform": "2.1.0-3",
- "mocha": "^8.1.1"
- },
- "peerDependencies": {
- "react-native": "*",
- "teamplay": "*"
- },
- "peerDependenciesMeta": {
- "react-native": {
- "optional": true
- },
- "teamplay": {
- "optional": true
- }
- }
-}
diff --git a/packages/runtime/platformHelpers/index.js b/packages/runtime/platformHelpers/index.js
deleted file mode 100644
index 9f5f814..0000000
--- a/packages/runtime/platformHelpers/index.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// injection of platformHelpers
-
-let platformHelpers
-
-export function setPlatformHelpers (newPlatformHelpers) {
- if (platformHelpers === newPlatformHelpers) return
- platformHelpers = newPlatformHelpers
-}
-
-export function getPlatformHelpers () {
- return platformHelpers
-}
-
-// facades to call the currently injected platform helper functions
-
-export function getDimensions (...args) {
- try {
- return platformHelpers.getDimensions(...args)
- } catch (err) {
- console.error('[cssxjs] platform helpers \'getDimensions\' is not specified. Babel is probably misconfigured')
- throw err
- }
-}
-
-export function getPlatform (...args) {
- try {
- return platformHelpers.getPlatform(...args)
- } catch (err) {
- console.error('[cssxjs] platform helpers \'getPlatform\' is not specified. Babel is probably misconfigured')
- throw err
- }
-}
-
-export function isPureReact (...args) {
- try {
- return platformHelpers.isPureReact(...args)
- } catch (err) {
- console.error('[cssxjs] platform helpers \'isPureReact\' is not specified. Babel is probably misconfigured')
- throw err
- }
-}
-
-export function initDimensionsUpdater (...args) {
- try {
- return platformHelpers.initDimensionsUpdater(...args)
- } catch (err) {
- console.error('[cssxjs] platform helpers \'initDimensionsUpdater\' is not specified. Babel is probably misconfigured')
- throw err
- }
-}
diff --git a/packages/runtime/platformHelpers/react-native.js b/packages/runtime/platformHelpers/react-native.js
deleted file mode 100644
index 64d5e59..0000000
--- a/packages/runtime/platformHelpers/react-native.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Dimensions, Platform } from 'react-native'
-import dimensions, { getDimensionsInitialized, setDimensionsInitialized } from '../dimensions.js'
-
-export function getDimensions () {
- return Dimensions.get('window')
-}
-
-export function getPlatform () {
- return Platform.OS
-}
-
-export function isPureReact () {
- return false
-}
-
-// this is needed to trigger components rerendering to update @media queries
-export function initDimensionsUpdater () {
- if (getDimensionsInitialized()) return
- setDimensionsInitialized(true)
- dimensions.width = Dimensions.get('window').width
- console.log('> Init dimensions updater for React Native. Initial width:', dimensions.width)
-
- // debounce by 200ms to avoid too many updates in a short time
- let timeoutId
- Dimensions.addEventListener('change', ({ window }) => {
- if (timeoutId) clearTimeout(timeoutId)
- timeoutId = setTimeout(() => {
- if (dimensions.width !== window.width) {
- console.log('> update window width:', window.width)
- dimensions.width = window.width
- }
- timeoutId = undefined
- }, 200)
- })
-}
diff --git a/packages/runtime/platformHelpers/web.js b/packages/runtime/platformHelpers/web.js
deleted file mode 100644
index 3e6a282..0000000
--- a/packages/runtime/platformHelpers/web.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import dimensions, { getDimensionsInitialized, setDimensionsInitialized } from '../dimensions.js'
-
-let shownWarningGetDimensions = false
-let shownWarningInitDimensionsUpdater = false
-
-export function getDimensions () {
- if (typeof window === 'undefined' || !window.innerWidth || !window.innerHeight) {
- if (!shownWarningGetDimensions) {
- console.warn('[cssx] No "window" global variable. Falling back to constant window width and height of 1024x768')
- shownWarningGetDimensions = true
- }
- return { width: 1024, height: 768 }
- }
- return {
- width: window.innerWidth,
- height: window.innerHeight
- }
-}
-
-export function getPlatform () {
- return 'web'
-}
-
-export function isPureReact () {
- return true
-}
-
-// this is needed to trigger components rerendering to update @media queries
-export function initDimensionsUpdater () {
- if (getDimensionsInitialized()) return
- setDimensionsInitialized(true)
- if (typeof window === 'undefined' || !window.innerWidth || !window.addEventListener) {
- if (!shownWarningInitDimensionsUpdater) {
- console.warn('[cssx] No "window" global variable. Setting default window width to 1024 and skipping updater.')
- shownWarningInitDimensionsUpdater = true
- }
- dimensions.width = 1024
- return
- }
- dimensions.width = window.innerWidth
- console.log('> Init dimensions updater for Web. Initial width:', dimensions.width)
-
- // debounce by 200ms to avoid too many updates in a short time
- let timeoutId
- window.addEventListener('resize', () => {
- if (timeoutId) clearTimeout(timeoutId)
- timeoutId = setTimeout(() => {
- if (dimensions.width !== window.innerWidth) {
- console.log('> update window width:', window.innerWidth)
- dimensions.width = window.innerWidth
- }
- timeoutId = undefined
- }, 200)
- })
-}
diff --git a/packages/runtime/process.js b/packages/runtime/process.js
deleted file mode 100644
index 5ee689e..0000000
--- a/packages/runtime/process.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import { process as dynamicProcess } from './vendor/react-native-dynamic-style-processor/index.js'
-import dimensions from './dimensions.js'
-import singletonVariables, { defaultVariables } from './variables.js'
-import matcher from './matcher.js'
-import { isPureReact } from './platformHelpers/index.js'
-
-// Regex to match var() anywhere within a string value (handles both full and partial)
-const VARS_REGEX = /var\(\s*(--[A-Za-z0-9_-]+)\s*,?\s*([^)]*)\s*\)/g
-const SUPPORT_UNIT = true
-
-export function process (
- styleName,
- fileStyles,
- globalStyles,
- localStyles,
- inlineStyleProps
-) {
- fileStyles = transformStyles(fileStyles)
- globalStyles = transformStyles(globalStyles)
- localStyles = transformStyles(localStyles)
-
- const res = matcher(
- styleName, fileStyles, globalStyles, localStyles, inlineStyleProps
- )
- for (const propName in res) {
- // flatten styles into single objects
- if (Array.isArray(res[propName])) {
- res[propName] = res[propName].flat(10)
- res[propName] = Object.assign({}, ...res[propName])
- }
- if (typeof res[propName] !== 'object') continue
- // force transform to 'px' some units in pure React environment
- if (isPureReact()) {
- // atm it's only 'lineHeight' property
- if (typeof res[propName].lineHeight === 'number') {
- res[propName].lineHeight = `${res[propName].lineHeight}px`
- }
- }
- // add 'u' unit support (1u = 8px)
- // replace in string values `{NUMBER}u` with the `{NUMBER*8}`
- // (pure number without any units - which will be treated as 'px' by React Native and pure React)
- if (SUPPORT_UNIT) {
- for (const property in res[propName]) {
- if (typeof res[propName][property] !== 'string') continue
- if (!/\du/.test(res[propName][property])) continue // quick check for potential presence of 'u' unit
- while (true) {
- const match = res[propName][property].match(/(\(|,| |^)([+-]?(?:\d*\.)?\d+)u(\)|,| |$)/)
- if (!match) break
- const fullMatch = match[0]
- const number = parseFloat(match[2])
- const replacedValue = number * 8
- // if left and right don't exist (pure value), then assign the pure number
- if (!match[1] && !match[3]) {
- res[propName][property] = replacedValue
- break
- }
- res[propName][property] = res[propName][property].replace(fullMatch, `${match[1]}${replacedValue}${match[3]}`)
- }
- }
- }
- }
- return res
-}
-
-function replaceVariablesInObject (obj) {
- if (obj === null || obj === undefined) return obj
- if (Array.isArray(obj)) {
- return obj.map(item => replaceVariablesInObject(item))
- }
- if (typeof obj === 'object') {
- const result = {}
- for (const key of Object.keys(obj)) {
- result[key] = replaceVariablesInObject(obj[key])
- }
- return result
- }
- if (typeof obj === 'string' && obj.includes('var(')) {
- return replaceVariablesInString(obj)
- }
- return obj
-}
-
-function replaceVariablesInString (str) {
- // Replace all var() occurrences in the string
- const result = str.replace(VARS_REGEX, (match, varName, varDefault) => {
- let res = singletonVariables[varName] ?? defaultVariables[varName] ?? varDefault
- if (typeof res === 'string') {
- res = res.trim()
- // sometimes compiler returns wrapped brackets. Remove them
- const bracketsCount = res.match(/^\(+/)?.[0]?.length || 0
- res = res.substring(bracketsCount, res.length - bracketsCount)
- }
- return res
- })
-
- // After all replacements, check if the result is a pure numeric value
- // If so, convert it to a number (stripping 'px' suffix if present)
- const trimmed = result.trim()
- const withoutPx = trimmed.replace(/px$/, '')
- if (isNumeric(withoutPx)) {
- return parseFloat(withoutPx)
- }
-
- return result
-}
-
-function transformStyles (styles) {
- if (!styles) return {}
-
- // Dynamically process css variables.
- // This will also auto-trigger rerendering on variable change when cache is not used
- if (styles.__vars) {
- styles = replaceVariablesInObject(styles)
- }
-
- // trigger rerender when cache is NOT used
- if (styles.__hasMedia) listenForDimensionsChange()
-
- // dynamically process @media queries and vh/vw units
- styles = dynamicProcess(styles)
-
- return styles
-}
-
-// If @media is used, force trigger access to the observable value.
-// `dimensions` is an observed Proxy so
-// whenever its value changes the according components will
-// automatically rerender.
-// The change is triggered globally in startupjs/plugins/cssMediaUpdater.plugin.js
-export function listenForDimensionsChange () {
- // eslint-disable-next-line no-unused-expressions
- if (dimensions.width) true
-}
-
-function isNumeric (num) {
- return (typeof num === 'number' || (typeof num === 'string' && num.trim() !== '')) && !isNaN(num)
-}
diff --git a/packages/runtime/processCached.js b/packages/runtime/processCached.js
deleted file mode 100644
index 41cd573..0000000
--- a/packages/runtime/processCached.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { singletonMemoize } from 'teamplay/cache'
-import dimensions from './dimensions.js'
-import singletonVariables from './variables.js'
-import { process as _process, listenForDimensionsChange } from './process.js'
-
-export const process = singletonMemoize(_process, {
- cacheName: 'styles',
- // IMPORTANT: This should be the same as the ones which go into the singletonMemoize function
- normalizer: (styleName, fileStyles, globalStyles, localStyles, inlineStyleProps) => simpleNumericHash(JSON.stringify([
- styleName,
- fileStyles?.__hash__ || fileStyles,
- globalStyles?.__hash__ || globalStyles,
- localStyles?.__hash__ || localStyles,
- inlineStyleProps
- ])),
- // IMPORTANT: This should be the same as the ones which go into the singletonMemoize function
- forceUpdateWhenChanged: (styleName, fileStyles, globalStyles, localStyles, inlineStyleProps) => {
- const args = {}
- const watchWidthChange = fileStyles?.__hasMedia || globalStyles?.__hasMedia || localStyles?.__hasMedia
- if (watchWidthChange) {
- // trigger rerender when cache is used
- listenForDimensionsChange()
- // Return the dimensionsWidth value itself to force
- // the affected cache to recalculate
- args.dimensionsWidth = dimensions.width
- }
- if (fileStyles?.__vars || globalStyles?.__vars || localStyles?.__vars) {
- const variableNames = getVariableNames(fileStyles, globalStyles, localStyles)
- // trigger rerender when cache is used
- listenForVariablesChange(variableNames)
- // Return the variable values themselves to force
- // the affected cache to recalculate
- for (const variableName of variableNames) {
- args['VAR_' + variableName] = singletonVariables[variableName]
- }
- }
- return simpleNumericHash(JSON.stringify(args))
- }
-})
-
-function getVariableNames (...styleObjects) {
- const vars = []
- for (const styleObject of styleObjects) {
- if (!styleObject?.__vars) continue
- for (const varName of styleObject.__vars) {
- if (!vars.includes(varName)) vars.push(varName)
- }
- }
- return vars.sort()
-}
-
-// If var() is used, force trigger access to the observable value.
-// `singletonVariables` is an observed Proxy so
-// whenever its value changes the according components will
-// automatically rerender.
-function listenForVariablesChange (variables = []) {
- for (const variable of variables) {
- // eslint-disable-next-line no-unused-expressions
- if (singletonVariables[variable]) true
- }
-}
-
-// ref: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2694461#gistcomment-2694461
-function simpleNumericHash (s) {
- let i, h
- for (i = 0, h = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
- return h
-}
diff --git a/packages/runtime/test/matcher.mjs b/packages/runtime/test/matcher.mjs
deleted file mode 100644
index 57f24d2..0000000
--- a/packages/runtime/test/matcher.mjs
+++ /dev/null
@@ -1,485 +0,0 @@
-/* global describe, it */
-import css2rn from '@startupjs/css-to-react-native-transform'
-import assert from 'assert'
-import matcher from '../matcher.js'
-
-function p ({ styleName, fileStyles, globalStyles, localStyles, inlineStyleProps, legacy }) {
- if (!legacy) inlineStyleProps = inlineStyleProps || {}
- return matcher(
- styleName,
- fileStyles && css2rn.default(fileStyles, { parseMediaQueries: true, parsePartSelectors: true, parseKeyframes: true }),
- globalStyles && css2rn.default(globalStyles, { parseMediaQueries: true, parsePartSelectors: true, parseKeyframes: true }),
- localStyles && css2rn.default(localStyles, { parseMediaQueries: true, parsePartSelectors: true, parseKeyframes: true }),
- inlineStyleProps
- )
-}
-
-describe('Pure usage without attributes', () => {
- it('simple', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: /* css */`
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- }
- .dummy {
- color: green;
- }
- .root.dummy {
- color: red;
- }
- `,
- legacy: true
- }), [
- [{ // specificity 0 selectors (same as specificity 10 in CSS)
- color: 'red',
- fontWeight: 'bold',
- paddingLeft: 10
- }]
- ])
- })
-})
-
-describe('Root styles only', () => {
- it('simple', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: /* css */`
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- }
- .dummy {
- color: green;
- }
- .root.dummy {
- color: red;
- }
- `
- }), {
- style: [
- [{ // specificity 0 selectors (same as specificity 10 in CSS)
- color: 'red',
- fontWeight: 'bold',
- paddingLeft: 10
- }]
- ]
- })
- })
- it('with inline styles', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: /* css */`
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- }
- .dummy {
- color: green;
- }
- .root.dummy {
- color: red;
- }
- `,
- inlineStyleProps: {
- style: {
- marginLeft: 10
- }
- }
- }), {
- style: [
- [{ // specificity 0
- color: 'red',
- fontWeight: 'bold',
- paddingLeft: 10
- }],
- { // inline styles
- marginLeft: 10
- }
- ]
- })
- })
- it('empty root. Pipe inline styles only', () => {
- assert.deepStrictEqual(p({
- styleName: '',
- fileStyles: /* css */`
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- }
- .dummy {
- color: green;
- }
- .root.dummy {
- color: red;
- }
- `,
- inlineStyleProps: {
- style: [
- {
- marginLeft: 10
- }, {
- marginRight: 20
- }
- ],
- cardStyle: {
- marginRight: 10
- }
- }
- }), {
- style: [
- // inline styles
- {
- marginLeft: 10
- }, {
- marginRight: 20
- }
- ],
- cardStyle: {
- marginRight: 10
- }
- })
- })
- it('empty everything. Pipe inline styles only', () => {
- assert.deepStrictEqual(p({
- styleName: '',
- inlineStyleProps: {
- style: {
- marginLeft: 10
- }
- }
- }), {
- style: {
- marginLeft: 10
- }
- })
- })
- it('pass inline styles as is if it\'s a string', () => {
- assert.deepStrictEqual(p({
- styleName: '',
- inlineStyleProps: {
- style: 'my-magic-style',
- barStyle: 'magic-bar-style'
- }
- }), {
- style: 'my-magic-style',
- barStyle: 'magic-bar-style'
- })
- })
- it('multiple classes', () => {
- assert.deepStrictEqual(p({
- styleName: 'root active card',
- fileStyles: /* css */`
- .active {
- opacity: 0.8;
- }
- .card {
- border-radius: 8px;
- }
- .card.active {
- opacity: 0.9;
- }
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- }
- .root.active {
- opacity: 1;
- }
- .root.card.active {
- color: green;
- }
- .dummy {
- color: green;
- }
- .root.dummy {
- color: red;
- }
- .root.card.dummy {
- color: red;
- }
- `,
- inlineStyleProps: {
- style: {
- marginLeft: 10
- }
- }
- }), {
- style: [
- [{ // specificity 0 (1 class)
- opacity: 0.8
- }, {
- borderRadius: 8
- }, {
- color: 'red',
- fontWeight: 'bold',
- paddingLeft: 10
- }],
- [{ // specificity 1 (2 classes)
- opacity: 0.9
- }, {
- opacity: 1
- }],
- [{ // specificity 2 (3 classes)
- color: 'green'
- }],
- { // inline styles
- marginLeft: 10
- }
- ]
- })
- })
-})
-
-describe('Parts', () => {
- it('simple', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: /* css */`
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- }
- .root::part(input) {
- background-color: black;
- color: blue;
- }
- `
- }), {
- style: [
- [{
- color: 'red',
- fontWeight: 'bold',
- paddingLeft: 10
- }]
- ],
- inputStyle: [
- [{
- backgroundColor: 'black',
- color: 'blue'
- }]
- ]
- })
- })
- it('multiple classes', () => {
- assert.deepStrictEqual(p({
- styleName: 'root active card',
- fileStyles: /* css */`
- .active {
- opacity: 0.8;
- }
- .card {
- border-radius: 8px;
- }
- .card.active {
- opacity: 0.9;
- }
- .card::part(header) {
- background-color: green;
- }
- .card.active::part(header) {
- background-color: red;
- }
- .card.active::part(footer) {
- color: orange;
- }
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- }
- .root::part(header) {
- font-size: 20px;
- }
- .root::part(footer) {
- font-size: 22px;
- }
- .root.active {
- opacity: 1;
- }
- .root.active::part(footer) {
- background-color: pink;
- }
- .root.card.active {
- color: green;
- }
- .root.card.active::part(footer) {
- background-color: violet;
- }
- .dummy {
- color: green;
- }
- .dummy::part(header) {
- color: magenta;
- }
- .root.dummy {
- color: red;
- }
- .root.card.dummy {
- color: red;
- }
- `,
- inlineStyleProps: {
- style: {
- marginLeft: 10
- },
- headerStyle: {
- marginLeft: 12
- },
- footerStyle: {
- marginLeft: 14
- },
- dummyStyle: {
- marginLeft: 16
- }
- }
- }), {
- style: [
- [{ // specificity 0 (1 class)
- opacity: 0.8
- }, {
- borderRadius: 8
- }, {
- color: 'red',
- fontWeight: 'bold',
- paddingLeft: 10
- }],
- [{ // specificity 1 (2 classes)
- opacity: 0.9
- }, {
- opacity: 1
- }],
- [{ // specificity 2 (3 classes)
- color: 'green'
- }],
- { // inline styles
- marginLeft: 10
- }
- ],
- headerStyle: [
- [{ // specificity 0
- backgroundColor: 'green'
- }, {
- fontSize: 20
- }],
- [{ // specificity 1
- backgroundColor: 'red'
- }],
- { // inline styles
- marginLeft: 12
- }
- ],
- footerStyle: [
- [{ // specificity 0
- fontSize: 22
- }],
- [{ // specificity 1
- color: 'orange'
- }, {
- backgroundColor: 'pink'
- }],
- [{ // specificity 2
- backgroundColor: 'violet'
- }],
- { // inline styles
- marginLeft: 14
- }
- ],
- dummyStyle: {
- marginLeft: 16
- }
- })
- })
-})
-
-describe('External and global and local styles', () => {
- it('inline > local > global > external. No matter the specificity', () => {
- assert.deepStrictEqual(p({
- styleName: 'root active',
- fileStyles: /* css */`
- .root {
- color: red;
- font-weight: bold;
- padding-left: 10px;
- padding-right: 10px;
- }
- .root.active {
- color: yellow;
- padding-right: 20px;
- }
- .dummy {
- color: green;
- }
- .root.dummy {
- color: red;
- }
- `,
- globalStyles: /* css */`
- .root {
- color: blue;
- padding-left: 15px;
- padding-right: 15px;
- }
- .root.active {
- color: white;
- }
- .dummy {
- padding-left: 50px;
- }
- `,
- localStyles: /* css */`
- .root {
- color: violet;
- }
- .root.active {
- padding-right: 20px;
- }
- .dummy {
- padding-top: 10px;
- }
- `,
- inlineStyleProps: {
- style: {
- marginLeft: 10
- }
- }
- }), {
- style: [
- [{ // external specificity 0
- color: 'red',
- fontWeight: 'bold',
- paddingLeft: 10,
- paddingRight: 10
- }],
- [{ // external specificity 1
- color: 'yellow',
- paddingRight: 20
- }],
- [{ // global specificity 0
- color: 'blue',
- paddingLeft: 15,
- paddingRight: 15
- }],
- [{ // global specificity 1
- color: 'white'
- }],
- [{ // local specificity 0
- color: 'violet'
- }],
- [{ // local specificity 1
- paddingRight: 20
- }],
- { // inline styles
- marginLeft: 10
- }
- ]
- })
- })
-})
diff --git a/packages/runtime/test/process.mjs b/packages/runtime/test/process.mjs
deleted file mode 100644
index 20c686a..0000000
--- a/packages/runtime/test/process.mjs
+++ /dev/null
@@ -1,1180 +0,0 @@
-/* global describe, it, before, beforeEach */
-import assert from 'assert'
-import { createRequire } from 'module'
-import { process } from '../process.js'
-import { setPlatformHelpers } from '../platformHelpers/index.js'
-import singletonVariables, { setDefaultVariables } from '../variables.js'
-
-const require = createRequire(import.meta.url)
-const { styl } = require('@cssxjs/loaders/compilers')
-
-// Configure platform helpers for test environment
-before(() => {
- setPlatformHelpers({
- getDimensions: () => ({ width: 1024, height: 768 }),
- getPlatform: () => 'web',
- isPureReact: () => false,
- initDimensionsUpdater: () => {}
- })
-})
-
-// Helper function to compile stylus to a style object
-// The styl() compiler returns a JSON string, so we need to parse it
-function compileStyl (source) {
- if (!source) return undefined
- const jsonString = styl(source, 'test.styl')
- return JSON.parse(jsonString)
-}
-
-// Helper function to compile stylus and process it through the full pipeline
-function p ({ styleName, fileStyles, globalStyles, localStyles, inlineStyleProps }) {
- return process(
- styleName,
- compileStyl(fileStyles),
- compileStyl(globalStyles),
- compileStyl(localStyles),
- inlineStyleProps || {}
- )
-}
-
-// Reset variables before each test
-beforeEach(() => {
- // Clear singleton variables
- for (const key of Object.keys(singletonVariables)) {
- delete singletonVariables[key]
- }
- // Reset default variables
- setDefaultVariables({})
-})
-
-// ============================================================================
-// LEVEL 1: Simple tests - no var(), no @media, single selector
-// Note: Stylus converts color names to hex codes (red -> #f00, blue -> #00f)
-// ============================================================================
-describe('Level 1: Simple styles - single selector, no variables', () => {
- it('single class with one property', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- `
- }), {
- style: { color: '#f00' } // Stylus converts 'red' to '#f00'
- })
- })
-
- it('single class with multiple properties', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- font-size 16px
- padding 10px
- `
- }), {
- style: {
- color: '#f00',
- fontSize: 16,
- paddingTop: 10,
- paddingRight: 10,
- paddingBottom: 10,
- paddingLeft: 10
- }
- })
- })
-
- it('single class with camelCase CSS properties', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- background-color blue
- border-radius 8px
- font-weight bold
- `
- }), {
- style: {
- backgroundColor: '#00f', // Stylus converts 'blue' to '#00f'
- borderRadius: 8,
- fontWeight: 'bold'
- }
- })
- })
-
- it('non-matching selector is ignored', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- .other
- color blue
- `
- }), {
- style: { color: '#f00' }
- })
- })
-
- it('empty styleName returns only inline styles', () => {
- assert.deepStrictEqual(p({
- styleName: '',
- fileStyles: `
- .root
- color red
- `,
- inlineStyleProps: {
- style: { marginLeft: 10 }
- }
- }), {
- style: { marginLeft: 10 }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 2: Multiple classes without variables
-// ============================================================================
-describe('Level 2: Multiple classes - specificity handling', () => {
- it('two classes matching single-class selectors', () => {
- assert.deepStrictEqual(p({
- styleName: 'root active',
- fileStyles: `
- .root
- color red
- .active
- opacity 0.8
- `
- }), {
- style: {
- color: '#f00',
- opacity: 0.8
- }
- })
- })
-
- it('compound selector has higher specificity', () => {
- assert.deepStrictEqual(p({
- styleName: 'root active',
- fileStyles: `
- .root
- color red
- .active
- color blue
- .root.active
- color green
- `
- }), {
- style: { color: '#008000' } // Stylus converts 'green' to '#008000'
- })
- })
-
- it('three classes with varying specificity', () => {
- assert.deepStrictEqual(p({
- styleName: 'root active card',
- fileStyles: `
- .root
- color red
- .active
- opacity 0.5
- .card
- border-radius 8px
- .root.active
- opacity 0.8
- .root.card.active
- opacity 1
- `
- }), {
- style: {
- color: '#f00',
- borderRadius: 8,
- opacity: 1
- }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 3: Part selectors (::part)
-// ============================================================================
-describe('Level 3: Part selectors', () => {
- it('simple part selector', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- .root::part(input)
- background-color white
- `
- }), {
- style: { color: '#f00' },
- inputStyle: { backgroundColor: '#fff' }
- })
- })
-
- it('multiple part selectors', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- .root::part(header)
- font-size 20px
- .root::part(footer)
- font-size 14px
- `
- }), {
- style: { color: '#f00' },
- headerStyle: { fontSize: 20 },
- footerStyle: { fontSize: 14 }
- })
- })
-
- it('part selector with compound class', () => {
- assert.deepStrictEqual(p({
- styleName: 'root active',
- fileStyles: `
- .root::part(header)
- color red
- .root.active::part(header)
- color blue
- `
- }), {
- headerStyle: { color: '#00f' }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 4: Single var() usage
-// ============================================================================
-describe('Level 4: Single var() usage', () => {
- it('var() with default value for color', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--primary-color, #f00)
- `
- }), {
- style: { color: '#f00' }
- })
- })
-
- it('var() with default numeric value for font-size', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- font-size var(--font-size, 16px)
- `
- }), {
- style: { fontSize: 16 }
- })
- })
-
- it('var() overridden by default variables', () => {
- setDefaultVariables({ '--primary-color': '#00f' })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--primary-color, #f00)
- `
- }), {
- style: { color: '#00f' }
- })
- })
-
- it('var() overridden by singleton variables', () => {
- setDefaultVariables({ '--primary-color': '#00f' })
- singletonVariables['--primary-color'] = '#0f0'
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--primary-color, #f00)
- `
- }), {
- style: { color: '#0f0' }
- })
- })
-
- it('singleton takes precedence over default', () => {
- setDefaultVariables({ '--color': '#00f' })
- singletonVariables['--color'] = '#800080' // purple
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--color, #f00)
- `
- }), {
- style: { color: '#800080' }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 5: Multiple var() usages in same selector
-// ============================================================================
-describe('Level 5: Multiple var() in same selector', () => {
- it('two var() in different properties', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--text-color, #000)
- background-color var(--bg-color, #fff)
- `
- }), {
- style: {
- color: '#000',
- backgroundColor: '#fff'
- }
- })
- })
-
- it('multiple var() with mixed overrides', () => {
- setDefaultVariables({ '--text-color': '#00f' })
- singletonVariables['--bg-color'] = '#ff0'
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--text-color, #000)
- background-color var(--bg-color, #fff)
- border-color var(--border-color, #808080)
- `
- }), {
- style: {
- color: '#00f',
- backgroundColor: '#ff0',
- borderColor: '#808080'
- }
- })
- })
-
- it('three var() with numeric values', () => {
- setDefaultVariables({
- '--padding-top': '20px',
- '--margin-left': '10px'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- padding-top var(--padding-top, 8px)
- margin-left var(--margin-left, 4px)
- font-size var(--font-size, 4px)
- `
- }), {
- style: {
- paddingTop: 20,
- marginLeft: 10,
- fontSize: 4
- }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 6: var() in different selectors and parts
-// ============================================================================
-describe('Level 6: var() across selectors and parts', () => {
- it('var() in different class selectors', () => {
- setDefaultVariables({ '--active-opacity': '0.5' })
- assert.deepStrictEqual(p({
- styleName: 'root active',
- fileStyles: `
- .root
- color var(--color, #f00)
- .active
- opacity var(--active-opacity, 1)
- `
- }), {
- style: {
- color: '#f00',
- opacity: 0.5
- }
- })
- })
-
- it('var() in part selectors', () => {
- setDefaultVariables({ '--header-bg': '#00f' })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--text-color, #000)
- .root::part(header)
- background-color var(--header-bg, #808080)
- .root::part(footer)
- padding-left var(--footer-padding, 10px)
- `
- }), {
- style: { color: '#000' },
- headerStyle: { backgroundColor: '#00f' },
- footerStyle: { paddingLeft: 10 }
- })
- })
-
- it('var() in compound selectors with parts', () => {
- singletonVariables['--active-header-bg'] = '#0f0'
- assert.deepStrictEqual(p({
- styleName: 'root active',
- fileStyles: `
- .root::part(header)
- background-color var(--header-bg, #808080)
- .root.active::part(header)
- background-color var(--active-header-bg, #f00)
- `
- }), {
- headerStyle: { backgroundColor: '#0f0' }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 7: @media queries
-// ============================================================================
-describe('Level 7: @media queries', () => {
- it('simple @media query', () => {
- const result = p({
- styleName: 'root',
- fileStyles: `
- .root
- width 100px
- @media (min-width: 768px)
- .root
- width 200px
- `
- })
- // The style should be present (either 100px or 200px depending on current screen)
- // With our test dimensions of 1024x768, min-width: 768px should match
- assert.ok(result.style)
- assert.strictEqual(result.style.width, 200)
- })
-
- it('@media query not matching', () => {
- const result = p({
- styleName: 'root',
- fileStyles: `
- .root
- width 100px
- @media (min-width: 1200px)
- .root
- width 200px
- `
- })
- // With our test dimensions of 1024x768, min-width: 1200px should NOT match
- assert.strictEqual(result.style.width, 100)
- })
-
- it('@media with var()', () => {
- setDefaultVariables({ '--desktop-width': '500px' })
- const result = p({
- styleName: 'root',
- fileStyles: `
- .root
- width var(--mobile-width, 100px)
- @media (min-width: 768px)
- .root
- width var(--desktop-width, 200px)
- `
- })
- // With test dimensions 1024x768, the media query matches
- assert.strictEqual(result.style.width, 500)
- })
-})
-
-// ============================================================================
-// LEVEL 8: External, global, and local styles hierarchy
-// ============================================================================
-describe('Level 8: Style hierarchy (external > global > local)', () => {
- it('local overrides global overrides external', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- font-size 14px
- `,
- globalStyles: `
- .root
- color blue
- padding-left 10px
- `,
- localStyles: `
- .root
- color green
- `
- }), {
- style: {
- color: '#008000', // green
- fontSize: 14,
- paddingLeft: 10
- }
- })
- })
-
- it('var() in all style levels', () => {
- setDefaultVariables({
- '--file-color': '#f00',
- '--global-padding': '20px',
- '--local-margin': '15px'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--file-color, #000)
- `,
- globalStyles: `
- .root
- padding-left var(--global-padding, 10px)
- `,
- localStyles: `
- .root
- margin-left var(--local-margin, 5px)
- `
- }), {
- style: {
- color: '#f00',
- paddingLeft: 20,
- marginLeft: 15
- }
- })
- })
-
- it('inline styles override all', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- `,
- globalStyles: `
- .root
- color blue
- `,
- localStyles: `
- .root
- color green
- `,
- inlineStyleProps: {
- style: { color: 'purple' }
- }
- }), {
- style: { color: 'purple' }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 9: Complex combinations
-// ============================================================================
-describe('Level 9: Complex combinations', () => {
- it('multiple classes, parts, var(), and hierarchy', () => {
- setDefaultVariables({
- '--primary': '#00f',
- '--header-size': '24px'
- })
- singletonVariables['--active-opacity'] = '0.9'
-
- assert.deepStrictEqual(p({
- styleName: 'root active',
- fileStyles: `
- .root
- color var(--primary, #f00)
- .active
- opacity var(--base-opacity, 0.5)
- .root.active
- opacity var(--active-opacity, 0.8)
- .root::part(header)
- font-size var(--header-size, 16px)
- `,
- globalStyles: `
- .root
- padding-left var(--padding, 10px)
- `,
- localStyles: `
- .root
- margin-left var(--margin, 5px)
- `,
- inlineStyleProps: {
- headerStyle: { fontWeight: 'bold' }
- }
- }), {
- style: {
- color: '#00f',
- opacity: 0.9,
- paddingLeft: 10,
- marginLeft: 5
- },
- headerStyle: {
- fontSize: 24,
- fontWeight: 'bold'
- }
- })
- })
-
- it('var() with rgba color value', () => {
- setDefaultVariables({
- '--string-color': 'rgba(255, 0, 0, 0.5)',
- '--numeric-size': '32px'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--string-color, #000)
- font-size var(--numeric-size, 16px)
- `
- }), {
- style: {
- color: 'rgba(255, 0, 0, 0.5)',
- fontSize: 32
- }
- })
- })
-
- it('deeply nested specificity with vars', () => {
- setDefaultVariables({
- '--level1-color': '#f00',
- '--level2-color': '#00f',
- '--level3-color': '#0f0'
- })
- assert.deepStrictEqual(p({
- styleName: 'root active card',
- fileStyles: `
- .root
- color var(--level1-color, #000)
- .root.active
- color var(--level2-color, #808080)
- .root.active.card
- color var(--level3-color, #fff)
- `
- }), {
- style: { color: '#0f0' }
- })
- })
-
- it('parts with multiple classes and vars', () => {
- setDefaultVariables({
- '--header-bg': '#00f',
- '--active-header-bg': '#0f0',
- '--card-header-bg': '#800080'
- })
- singletonVariables['--full-header-bg'] = '#ffa500' // orange
-
- assert.deepStrictEqual(p({
- styleName: 'root active card',
- fileStyles: `
- .root::part(header)
- background-color var(--header-bg, #808080)
- .root.active::part(header)
- background-color var(--active-header-bg, #f00)
- .root.card::part(header)
- background-color var(--card-header-bg, #00f)
- .root.active.card::part(header)
- background-color var(--full-header-bg, #000)
- `
- }), {
- headerStyle: { backgroundColor: '#ffa500' }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 10: Edge cases and special values
-// ============================================================================
-describe('Level 10: Edge cases', () => {
- it('var() with hyphenated variable names', () => {
- setDefaultVariables({ '--my-very-long-variable-name': '#f00' })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--my-very-long-variable-name, #00f)
- `
- }), {
- style: { color: '#f00' }
- })
- })
-
- it('var() with numeric variable names', () => {
- setDefaultVariables({ '--color-100': '#d3d3d3' })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--color-100, #fff)
- `
- }), {
- style: { color: '#d3d3d3' }
- })
- })
-
- it('empty default in var()', () => {
- singletonVariables['--color'] = '#f00'
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--color)
- `
- }), {
- style: { color: '#f00' }
- })
- })
-
- it('u unit support (1u = 8px)', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- padding-left 2u
- margin-left 1.5u
- `
- }), {
- style: {
- paddingLeft: 16,
- marginLeft: 12
- }
- })
- })
-
- it('multiple inline style props', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color red
- .root::part(header)
- font-size 20px
- `,
- inlineStyleProps: {
- style: { marginLeft: 10 },
- headerStyle: { marginTop: 5 },
- customStyle: { padding: 15 }
- }
- }), {
- style: {
- color: '#f00',
- marginLeft: 10
- },
- headerStyle: {
- fontSize: 20,
- marginTop: 5
- },
- customStyle: {
- padding: 15
- }
- })
- })
-
- it('var() fallback chain - singleton > default > inline default', () => {
- // Test 1: Only inline default
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--test-color, #f00)
- `
- }), {
- style: { color: '#f00' }
- })
-
- // Test 2: Default variable overrides inline default
- setDefaultVariables({ '--test-color': '#00f' })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--test-color, #f00)
- `
- }), {
- style: { color: '#00f' }
- })
-
- // Test 3: Singleton overrides default
- singletonVariables['--test-color'] = '#0f0'
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- color var(--test-color, #f00)
- `
- }), {
- style: { color: '#0f0' }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 11: var() as part of compound values (not the whole value)
-// ============================================================================
-describe('Level 11: var() in compound values', () => {
- it('multiple var() in box-shadow', () => {
- setDefaultVariables({
- '--shadow-x': '2px',
- '--shadow-y': '4px',
- '--shadow-blur': '8px',
- '--shadow-color': 'rgba(0, 0, 0, 0.2)'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- box-shadow var(--shadow-x, 0) var(--shadow-y, 0) var(--shadow-blur, 0) var(--shadow-color, #000)
- `
- }), {
- style: {
- // RN New Architecture supports boxShadow as a string natively
- boxShadow: '2px 4px 8px rgba(0, 0, 0, 0.2)'
- }
- })
- })
-
- it('var() mixed with static values in box-shadow', () => {
- setDefaultVariables({
- '--shadow-color': '#f00'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- box-shadow 2px 4px 8px var(--shadow-color, #000)
- `
- }), {
- style: {
- // RN New Architecture supports boxShadow as a string natively
- boxShadow: '2px 4px 8px #f00'
- }
- })
- })
-
- it('var() in transform with multiple functions', () => {
- setDefaultVariables({
- '--translate-x': '10px',
- '--scale': '1.5'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- transform translateX(var(--translate-x, 0)) scale(var(--scale, 1))
- `
- }), {
- style: {
- // RN applies transforms in reverse order, so scale comes first
- transform: [
- { scale: 1.5 },
- { translateX: 10 }
- ]
- }
- })
- })
-
- it('var() in border longhand properties', () => {
- setDefaultVariables({
- '--border-width': '2px',
- '--border-color': '#00f'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- border-width var(--border-width, 1px)
- border-style solid
- border-color var(--border-color, #000)
- `
- }), {
- style: {
- borderWidth: 2,
- borderStyle: 'solid',
- borderColor: '#00f'
- }
- })
- })
-
- // border shorthand syntax: width style color (all optional, any order for style/color)
- // Common patterns: "1px solid red", "1px solid", "solid red", "1px", etc.
-
- it('border shorthand: width style color (no var)', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- border 2px solid red
- `
- }), {
- style: {
- borderWidth: 2,
- borderStyle: 'solid',
- borderColor: '#f00'
- }
- })
- })
-
- it('border shorthand: width style (no color, no var)', () => {
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- border 2px solid
- `
- }), {
- style: {
- borderWidth: 2,
- borderStyle: 'solid',
- borderColor: 'black' // css-to-react-native defaults to black
- }
- })
- })
-
- it('border shorthand: width style var(color)', () => {
- setDefaultVariables({
- '--border-color': '#0f0'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- border 2px solid var(--border-color, #000)
- `
- }), {
- style: {
- borderWidth: 2,
- borderStyle: 'solid',
- borderColor: '#0f0'
- }
- })
- })
-
- // NOTE: var() in border width position is not currently supported by css-to-react-native
- // Use separate border-width property with var() instead:
- it('border with var(width) using longhand', () => {
- setDefaultVariables({
- '--border-width': '3px',
- '--border-color': '#00f'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- border-width var(--border-width, 1px)
- border-style solid
- border-color var(--border-color, #000)
- `
- }), {
- style: {
- borderWidth: 3,
- borderStyle: 'solid',
- borderColor: '#00f'
- }
- })
- })
-
- it('multiple var() with some overridden by singleton', () => {
- setDefaultVariables({
- '--x': '5px',
- '--y': '10px'
- })
- singletonVariables['--y'] = '20px'
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- box-shadow var(--x, 0) var(--y, 0) 0 #000
- `
- }), {
- style: {
- // RN New Architecture supports boxShadow as a string natively
- boxShadow: '5px 20px 0 #000'
- }
- })
- })
-
- // text-shadow syntax: [color] offset-x offset-y [blur-radius] [color]
- // color can be at start or end, blur-radius is optional
-
- it('var() in text-shadow: offset-x offset-y var(color)', () => {
- setDefaultVariables({
- '--text-shadow-color': 'rgba(0, 0, 0, 0.5)'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- text-shadow 1px 2px var(--text-shadow-color, #000)
- `
- }), {
- style: {
- textShadowOffset: { width: 1, height: 2 },
- textShadowRadius: 0,
- textShadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- })
- })
-
- it('var() in text-shadow: offset-x offset-y blur var(color)', () => {
- setDefaultVariables({
- '--text-shadow-color': 'rgba(0, 0, 0, 0.5)'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- text-shadow 1px 2px 3px var(--text-shadow-color, #000)
- `
- }), {
- style: {
- textShadowOffset: { width: 1, height: 2 },
- textShadowRadius: 3,
- textShadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- })
- })
-
- it('var() in text-shadow: var(color) offset-x offset-y', () => {
- setDefaultVariables({
- '--text-shadow-color': 'rgba(0, 0, 0, 0.5)'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- text-shadow var(--text-shadow-color, #000) 1px 2px
- `
- }), {
- style: {
- textShadowOffset: { width: 1, height: 2 },
- textShadowRadius: 0,
- textShadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- })
- })
-
- it('var() in text-shadow: var(color) offset-x offset-y blur', () => {
- setDefaultVariables({
- '--text-shadow-color': 'rgba(0, 0, 0, 0.5)'
- })
- assert.deepStrictEqual(p({
- styleName: 'root',
- fileStyles: `
- .root
- text-shadow var(--text-shadow-color, #000) 1px 2px 3px
- `
- }), {
- style: {
- textShadowOffset: { width: 1, height: 2 },
- textShadowRadius: 3,
- textShadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- })
- })
-})
-
-// ============================================================================
-// LEVEL 12: Comprehensive integration test
-// ============================================================================
-describe('Level 12: Full integration test', () => {
- it('kitchen sink test', () => {
- setDefaultVariables({
- '--primary-color': '#00f',
- '--secondary-color': '#808080',
- '--spacing-md': '16px',
- '--font-size-lg': '24px'
- })
- singletonVariables['--primary-color'] = '#4b0082' // indigo
- singletonVariables['--active-bg'] = 'rgba(0, 0, 255, 0.1)'
-
- assert.deepStrictEqual(p({
- styleName: 'button primary active',
- fileStyles: `
- .button
- padding-top var(--spacing-md, 12px)
- padding-bottom var(--spacing-md, 12px)
- padding-left var(--spacing-md, 12px)
- padding-right var(--spacing-md, 12px)
- border-radius 8px
- background-color var(--secondary-color, #d3d3d3)
-
- .primary
- background-color var(--primary-color, #00f)
- color white
-
- .active
- opacity 0.9
-
- .button.primary
- font-weight bold
-
- .button.active
- background-color var(--active-bg, transparent)
-
- .button.primary.active
- border-width 2px
-
- .button::part(icon)
- width var(--spacing-md, 16px)
- height var(--spacing-md, 16px)
-
- .button.primary::part(icon)
- opacity 1
-
- .button::part(label)
- font-size var(--font-size-lg, 16px)
- `,
- globalStyles: `
- .button
- cursor pointer
-
- .button::part(label)
- text-transform uppercase
- `,
- localStyles: `
- .button
- min-width 100px
-
- .button.primary
- min-height 40px
- `,
- inlineStyleProps: {
- style: { marginRight: 10 },
- iconStyle: { marginRight: 5 }
- }
- }), {
- style: {
- paddingTop: 16,
- paddingBottom: 16,
- paddingLeft: 16,
- paddingRight: 16,
- borderRadius: 8,
- backgroundColor: 'rgba(0, 0, 255, 0.1)',
- color: '#fff',
- opacity: 0.9,
- fontWeight: 'bold',
- borderWidth: 2,
- cursor: 'pointer',
- minWidth: 100,
- minHeight: 40,
- marginRight: 10
- },
- iconStyle: {
- width: 16,
- height: 16,
- opacity: 1,
- marginRight: 5
- },
- labelStyle: {
- fontSize: 24,
- textTransform: 'uppercase'
- }
- })
- })
-})
diff --git a/packages/runtime/variables.js b/packages/runtime/variables.js
deleted file mode 100644
index 73abc80..0000000
--- a/packages/runtime/variables.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { observable } from '@nx-js/observer-util'
-
-export let defaultVariables = {}
-
-export default observable({})
-
-export function setDefaultVariables (variables = {}) {
- defaultVariables = { ...variables }
-}
diff --git a/packages/runtime/vendor/react-native-css-media-query-processor/README.md b/packages/runtime/vendor/react-native-css-media-query-processor/README.md
deleted file mode 100644
index 45c6b79..0000000
--- a/packages/runtime/vendor/react-native-css-media-query-processor/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Credits
-
-[kristerkary](https://github.com/kristerkari)
-
-Original code taken from:
-https://github.com/kristerkari/react-native-css-media-query-processor
-
-Original version: 0.21.3
diff --git a/packages/runtime/vendor/react-native-css-media-query-processor/index.js b/packages/runtime/vendor/react-native-css-media-query-processor/index.js
deleted file mode 100644
index 214cb3c..0000000
--- a/packages/runtime/vendor/react-native-css-media-query-processor/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import merge from 'deepmerge'
-import memoize from 'micro-memoize'
-import mediaQuery from './mediaquery.js'
-import { getPlatform } from '../../platformHelpers/index.js'
-
-const PREFIX = '@media'
-
-function isMediaQuery (str) {
- return typeof str === 'string' && str.indexOf(PREFIX) === 0
-}
-
-function filterMq (obj) {
- return Object.keys(obj).filter(key => isMediaQuery(key))
-}
-
-function filterNonMq (obj) {
- return Object.keys(obj).reduce((out, key) => {
- if (!isMediaQuery(key) && key !== '__mediaQueries') {
- out[key] = obj[key]
- }
- return out
- }, {})
-}
-
-const mFilterMq = memoize(filterMq)
-const mFilterNonMq = memoize(filterNonMq)
-
-export function process (obj, matchObject) {
- const mqKeys = mFilterMq(obj)
- let res = mFilterNonMq(obj)
-
- mqKeys.forEach(key => {
- if (/^@media\s+(not\s+)?(ios|android|dom|macos|web|windows)/i.test(key)) {
- matchObject.type = getPlatform()
- } else {
- matchObject.type = 'screen'
- }
-
- const isMatch = mediaQuery(obj.__mediaQueries[key], matchObject)
- if (isMatch) {
- res = merge(res, obj[key])
- }
- })
-
- return res
-}
diff --git a/packages/runtime/vendor/react-native-css-media-query-processor/mediaquery.js b/packages/runtime/vendor/react-native-css-media-query-processor/mediaquery.js
deleted file mode 100644
index 32ad3b8..0000000
--- a/packages/runtime/vendor/react-native-css-media-query-processor/mediaquery.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
-Copyright (c) 2014, Yahoo! Inc. All rights reserved.
-Copyrights licensed under the New BSD License.
-See the accompanying LICENSE file for terms.
-*/
-
-export default match
-
-// -----------------------------------------------------------------------------
-
-const RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?\s*$/
-const RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?\s*$/
-
-function match (parsed, values) {
- if (!parsed) {
- return false
- }
- if (parsed.length === 1) {
- return matchQuery(parsed[0], values)
- }
- return parsed.some(mq => matchQuery(mq, values))
-}
-
-function matchQuery (query, values) {
- const inverse = query.inverse
-
- // Either the parsed or specified `type` is "all", or the types must be
- // equal for a match.
- const typeMatch = query.type === 'all' || values.type === query.type
-
- if (query.expressions.length === 0) {
- // Quit early when `type` doesn't match, but take "not" into account.
- if ((typeMatch && inverse) || !(typeMatch || inverse)) {
- return false
- }
- }
-
- const expressionsMatch = query.expressions.every(function (expression) {
- const feature = expression.feature
- const modifier = expression.modifier
- let expValue = expression.value
- let value = values[feature]
-
- // Missing or falsy values don't match.
- if (!value) {
- return false
- }
-
- switch (feature) {
- case 'orientation':
- case 'scan':
- return value.toLowerCase() === expValue.toLowerCase()
-
- case 'width':
- case 'height':
- case 'device-width':
- case 'device-height':
- expValue = toPx(expValue)
- value = toPx(value)
- break
-
- case 'resolution':
- expValue = toDpi(expValue)
- value = toDpi(value)
- break
-
- case 'aspect-ratio':
- case 'device-aspect-ratio':
- case /* Deprecated */ 'device-pixel-ratio':
- expValue = toDecimal(expValue)
- value = toDecimal(value)
- break
-
- case 'grid':
- case 'color':
- case 'color-index':
- case 'monochrome':
- expValue = parseInt(expValue, 10) || 1
- value = parseInt(value, 10) || 0
- break
- }
-
- switch (modifier) {
- case 'min':
- return value >= expValue
- case 'max':
- return value <= expValue
- default:
- return value === expValue
- }
- })
-
- const isMatch = typeMatch && expressionsMatch
-
- if (inverse) {
- return !isMatch
- }
-
- return isMatch
-}
-
-// -- Utilities ----------------------------------------------------------------
-
-function toDecimal (ratio) {
- let decimal = Number(ratio)
- let numbers
-
- if (!decimal) {
- numbers = ratio.match(/^(\d+)\s*\/\s*(\d+)$/)
- decimal = numbers[1] / numbers[2]
- }
-
- return decimal
-}
-
-function toDpi (resolution) {
- const value = parseFloat(resolution)
- const units = String(resolution).match(RE_RESOLUTION_UNIT)[1]
-
- switch (units) {
- case 'dpcm':
- return value / 2.54
- case 'dppx':
- return value * 96
- default:
- return value
- }
-}
-
-function toPx (length) {
- const value = parseFloat(length)
- const units = String(length).match(RE_LENGTH_UNIT)[1]
-
- switch (units) {
- case 'em':
- return value * 16
- case 'rem':
- return value * 16
- case 'cm':
- return (value * 96) / 2.54
- case 'mm':
- return (value * 96) / 2.54 / 10
- case 'in':
- return value * 96
- case 'pt':
- return value * 72
- case 'pc':
- return (value * 72) / 12
- default:
- return value
- }
-}
diff --git a/packages/runtime/vendor/react-native-dynamic-style-processor/README.md b/packages/runtime/vendor/react-native-dynamic-style-processor/README.md
deleted file mode 100644
index cd0de16..0000000
--- a/packages/runtime/vendor/react-native-dynamic-style-processor/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Credits
-
-[kristerkary](https://github.com/kristerkari)
-
-Original code taken from:
-https://github.com/kristerkari/react-native-dynamic-style-processor
-
-Original version: 0.21.0
diff --git a/packages/runtime/vendor/react-native-dynamic-style-processor/index.js b/packages/runtime/vendor/react-native-dynamic-style-processor/index.js
deleted file mode 100644
index 127d17c..0000000
--- a/packages/runtime/vendor/react-native-dynamic-style-processor/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { process as mediaQueriesProcess } from '../react-native-css-media-query-processor/index.js'
-import { transform } from 'css-viewport-units-transform'
-import memoize from 'micro-memoize'
-import { getDimensions } from '../../platformHelpers/index.js'
-
-function omit (obj, omitKey) {
- return Object.keys(obj).reduce((result, key) => {
- if (key !== omitKey) {
- result[key] = obj[key]
- }
- return result
- }, {})
-}
-
-const omitMemoized = memoize(omit)
-
-function viewportUnitsTransform (obj, matchObject) {
- const hasViewportUnits = '__viewportUnits' in obj
-
- if (!hasViewportUnits) {
- return obj
- }
- return transform(omitMemoized(obj, '__viewportUnits'), matchObject)
-}
-
-function mediaQueriesTransform (obj, matchObject) {
- const hasParsedMQs = '__mediaQueries' in obj
-
- if (!hasParsedMQs) {
- return obj
- }
- return mediaQueriesProcess(obj, matchObject)
-}
-
-export function process (obj) {
- const matchObject = getMatchObject()
- return viewportUnitsTransform(
- mediaQueriesTransform(obj, matchObject),
- matchObject
- )
-}
-
-function getMatchObject () {
- const win = getDimensions()
- return {
- width: win.width,
- height: win.height,
- orientation: win.width > win.height ? 'landscape' : 'portrait',
- 'aspect-ratio': win.width / win.height,
- type: 'screen'
- }
-}
diff --git a/plan.md b/plan.md
new file mode 100644
index 0000000..3c5d3be
--- /dev/null
+++ b/plan.md
@@ -0,0 +1,2063 @@
+# Unified CSS-to-RN Engine Plan
+
+This document is the implementation handoff for the CSSX CSS-to-React-Native
+pipeline refactor. It captures the agreed architecture, public APIs, internal
+IR, runtime tracking model, migration path, and test plan. A new agent should
+be able to start from this file and implement the package end to end without
+needing the design discussion history.
+
+## Goal
+
+Unify CSS-to-React-Native style transformation into one maintainable package in
+this monorepo.
+
+The current implementation is split across:
+
+- `cssx` / this monorepo:
+ - Babel transforms
+ - Stylus preprocessing
+ - runtime selector matching
+ - runtime CSS variable substitution
+ - media and viewport unit processing
+ - teamplay-based caching
+- `../css-to-react-native`:
+ - low-level CSS declaration to React Native style transformation
+ - forked support for `var()`, animations, transitions, keyframes
+- `../css-to-react-native-transform`:
+ - full CSS parsing
+ - selector filtering
+ - media query parsing
+ - `:part()` selector support
+ - keyframe extraction
+
+The new package should replace that split with:
+
+- one canonical CSS compiler IR
+- one resolver for static, dynamic, imported, inline, and runtime-generated CSS
+- one runtime dependency tracker
+- one caching model
+- one public API surface re-exported from `cssxjs`
+
+## Non-Goals
+
+These are intentionally out of scope for the first implementation:
+
+- Runtime Stylus compilation. Runtime `compileCss()` accepts pure CSS only.
+- Full browser selector support. CSSX remains a class-combination selector
+ system.
+- Full browser CSS compatibility, prefixing, or old-browser normalization.
+- Mandatory PostCSS. Client-side compiler size is important.
+- A cssta/styled-components-like component factory API.
+- Animation execution hooks/components. CSSX only emits Reanimated v4-compatible
+ style props.
+- Provider-scoped CSS variables. Variables remain global singleton state for
+ now.
+- CSS custom property declarations inside stylesheets, such as
+ `.root { --x: red }`.
+- `:root` custom property defaults.
+- Interpolation inside Pug `style` blocks.
+- Dynamic `:export` values.
+
+## Research Summary
+
+### Current CSSX
+
+Important files:
+
+- `packages/loaders/cssToReactNativeLoader.js`
+- `packages/loaders/stylusToCssLoader.js`
+- `packages/loaders/compilers/css.js`
+- `packages/loaders/compilers/styl.js`
+- `packages/babel-plugin-rn-stylename-inline/index.js`
+- `packages/babel-plugin-rn-stylename-to-style/index.js`
+- `packages/runtime/process.js`
+- `packages/runtime/processCached.js`
+- `packages/runtime/matcher.js`
+- `packages/runtime/variables.js`
+- `packages/runtime/dimensions.js`
+
+Current behavior:
+
+- Inline `css``...`` and `styl``...`` templates are compiled by Babel to style
+ objects.
+- External `.cssx.css` / `.cssx.styl` imports are compiled by loaders or Babel.
+- JSX `styleName` is rewritten to runtime calls.
+- Runtime currently handles selector matching, `var()` substitution, media query
+ processing, viewport units, `u` unit strings, and optional teamplay caching.
+- Expression interpolation inside `css``...`` and `styl``...`` currently throws.
+
+### Forked `css-to-react-native`
+
+Useful pieces:
+
+- property transformers
+- `TokenStream`
+- animation and transition transforms
+- keyframe object inlining behavior
+- shorthand behavior and tests
+
+Do not preserve its architecture blindly. In the new engine, `var()` should be
+resolved before property transformation, so the transformer should no longer
+need unresolved `VARIABLE` tokens spread through every parser.
+
+### Forked `css-to-react-native-transform`
+
+Useful pieces:
+
+- current CSS parser usage
+- media query validation
+- selector filtering constraints
+- existing legacy output shape
+- tests for parts, media, keyframes, viewport units
+
+The new package should replace the old nested object output with canonical
+rule/declaration IR.
+
+### cssta
+
+Useful inspiration:
+
+- template expression placeholder extraction
+- preserving dynamic declarations as tuples until runtime
+- splitting compile-time static work from runtime style tuple resolution
+
+Not reused:
+
+- component factory API
+- React context variable model
+- hook-based animation execution
+
+### Parser Size Decision
+
+PostCSS is not the default parser foundation because of client bundle size.
+
+Measured browser bundle baseline with esbuild:
+
+```text
+current stack:
+css/lib/parse + postcss-value-parser + css-mediaquery + helpers
+15.8 KB minified, 6.2 KB gzip
+
+PostCSS stack:
+postcss + postcss-selector-parser + postcss-value-parser + css-mediaquery + helpers
+128.0 KB minified, 36.1 KB gzip
+```
+
+Use the lightweight stack:
+
+- `css/lib/parse` or an equivalent small stylesheet parser
+- `postcss-value-parser` for values
+- `css-mediaquery` or a small compatible evaluator/parser
+- custom narrow selector parser/validator
+
+## Target Package
+
+Create:
+
+```text
+packages/css-to-rn/
+```
+
+Package name:
+
+```text
+@cssxjs/css-to-rn
+```
+
+It is the unified engine package. The public `cssxjs` package re-exports the
+user-facing APIs.
+
+### Package Boundaries
+
+`@cssxjs/css-to-rn` root export:
+
+- framework-independent compiler and resolver
+- no React imports
+- no React Native imports
+- no Reanimated imports
+
+`@cssxjs/css-to-rn/react` and platform subpaths:
+
+- React hooks and tracked wrapper runtime
+- optional peer dependency on `react`
+- optional peer dependency on `react-native`
+- conditional exports for web vs React Native
+
+`cssxjs`:
+
+- public facade used by users
+- re-exports `css`, `styl`, `pug`
+- re-exports `compileCss`, `cssx`, `useRuntimeCss`, `CssxProvider`,
+ `configureCssx`, `variables`, `setDefaultVariables`, `defaultVariables`
+- keeps conditional runtime entrypoints so Expo/RN picks the RN target
+ automatically and web picks the default target
+
+`@cssxjs/runtime`:
+
+- currently internal in practice
+- can be collapsed, removed, or left as a compatibility wrapper after migration
+- should not keep duplicate selector/var/media/cache implementation long term
+
+### TypeScript
+
+Write the new package in TypeScript from the start.
+
+Use Node-strip-friendly TypeScript, following the pattern in
+`../teamplay/tsconfig.json`:
+
+- `type: "module"`
+- `target: "esnext"`
+- `module: "nodenext"`
+- `moduleResolution: "nodenext"`
+- `rewriteRelativeImportExtensions: true`
+- `erasableSyntaxOnly: true`
+- `verbatimModuleSyntax: true`
+- `strict: true`
+- `allowImportingTsExtensions: true` for source tests
+- explicit `.ts` extensions in source imports
+- no enums
+- no parameter properties
+- no namespaces
+- no decorators
+- no top-level await
+
+Scope the TS setup to `packages/css-to-rn` initially. Do not modernize the
+root repo TS config as part of this plan unless needed later.
+
+Use a custom source condition:
+
+```text
+cssx-ts
+```
+
+Package exports should follow the Teamplay source-test pattern:
+
+```json
+{
+ "exports": {
+ ".": {
+ "cssx-ts": "./src/index.ts",
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.js"
+ },
+ "./react": {
+ "react-native": {
+ "cssx-ts": "./src/react-native.ts",
+ "types": "./dist/react-native.d.ts",
+ "default": "./dist/react-native.js"
+ },
+ "cssx-ts": "./src/web.ts",
+ "types": "./dist/web.d.ts",
+ "default": "./dist/web.js"
+ },
+ "./react-native": {
+ "cssx-ts": "./src/react-native.ts",
+ "types": "./dist/react-native.d.ts",
+ "default": "./dist/react-native.js"
+ },
+ "./web": {
+ "cssx-ts": "./src/web.ts",
+ "types": "./dist/web.d.ts",
+ "default": "./dist/web.js"
+ }
+ }
+}
+```
+
+Adjust file names as implementation settles. The important constraints are:
+
+- root export is framework-independent
+- React/RN/web entrypoints are explicit and conditionally resolvable
+- source tests can import `.ts` through `-C cssx-ts`
+- published package emits `.js` and `.d.ts`
+
+Peer dependencies:
+
+```json
+{
+ "peerDependencies": {
+ "react": "*",
+ "react-native": "*"
+ },
+ "peerDependenciesMeta": {
+ "react": { "optional": true },
+ "react-native": { "optional": true }
+ }
+}
+```
+
+## Public APIs
+
+### Pure Engine APIs
+
+These live at `@cssxjs/css-to-rn`.
+
+```ts
+export function compileCss(
+ css: string,
+ options?: CompileCssOptions
+): CompiledCssSheet
+
+export function compileCssTemplate(
+ cssWithDynamicSlots: string,
+ options?: CompileCssTemplateOptions
+): CompiledCssSheet
+
+export function resolveCssx(
+ input: ResolveCssxInput
+): ResolveCssxResult
+
+export function transformDeclarations(
+ declarations: readonly CssDeclaration[],
+ options?: TransformDeclarationOptions
+): TransformDeclarationResult
+
+export function toLegacyStyleObject(
+ sheet: CompiledCssSheet,
+ options?: LegacyOutputOptions
+): LegacyStyleObject
+```
+
+The exact function names can change, but the package needs these capabilities:
+
+- compile CSS string to canonical IR
+- compile CSS string containing dynamic interpolation slots to canonical IR
+- resolve style props from one or more compiled sheet layers
+- transform resolved declaration values into RN/web style objects
+- output the old object shape temporarily for incremental migration
+
+### Runtime React APIs
+
+These live at `@cssxjs/css-to-rn/react`, `@cssxjs/css-to-rn/web`,
+`@cssxjs/css-to-rn/react-native`, and are re-exported by `cssxjs`.
+
+```ts
+export function cssx(
+ styleName: StyleNameValue,
+ sheet: CompiledCssSheet | TrackedCssSheet | string | Array,
+ inlineStyleProps?: InlineStyleProps
+): ResolvedStyleProps
+
+export function useRuntimeCss(
+ css: string,
+ options?: CompileCssOptions
+): TrackedCssSheet
+
+export function useCssxSheet(
+ sheet: CompiledCssSheet | CompiledCssSheet[],
+ options?: UseCssxSheetOptions
+): TrackedCssSheet | TrackedCssSheet[]
+
+export function useCssxTemplate(
+ sheet: CompiledCssSheet,
+ values: readonly InterpolationValue[],
+ options?: UseCssxTemplateOptions
+): TrackedCssSheet
+
+export function CssxProvider(props: {
+ value?: CssxRuntimeOptions
+ children: React.ReactNode
+}): React.ReactNode
+
+export function configureCssx(options: CssxRuntimeOptions): void
+
+export const variables: Record
+export let defaultVariables: Record
+export function setDefaultVariables(vars: Record): void
+```
+
+Public manual runtime CSS usage:
+
+```tsx
+import { compileCss, cssx, useRuntimeCss } from 'cssxjs'
+
+const sheet = compileCss(generatedCss)
+
+function Button({ disabled, style }) {
+ const trackedSheet = useRuntimeCss(generatedCss)
+
+ return (
+
+ )
+}
+```
+
+Convenience raw string usage is allowed:
+
+```tsx
+
+```
+
+But documented React usage should prefer `useRuntimeCss()` so subscriptions,
+diagnostics, and parsing are controlled.
+
+### `cssx()` Ergonomics
+
+Do not require a `useCssx()` hook per element. The user should be able to write:
+
+```tsx
+const sheet = useRuntimeCss(generatedCss)
+
+return (
+ <>
+
+
+
+)
+```
+
+The hook returns a tracked sheet wrapper. `cssx()` is a plain function that
+resolves styles and records dependencies into the tracked wrapper during render.
+The hook owns the actual React subscription lifecycle.
+
+### Compatibility APIs
+
+`css` and `styl` remain both:
+
+- tagged template markers transformed away by Babel
+- spread helpers transformed by Babel when called as functions
+
+The existing user code shape remains:
+
+```tsx
+import { css, styl } from 'cssxjs'
+
+function Button({ color }) {
+ return
+
+ css`
+ .root {
+ color: ${color};
+ }
+ `
+}
+```
+
+## Compiled Sheet IR
+
+The canonical compiler output must be plain JSON-serializable data:
+
+- no functions
+- no Maps
+- no Sets
+- no Symbols
+- no closures
+- no runtime cache state
+
+Runtime cache/tracker state should live in WeakMaps or non-enumerable wrapper
+objects, not inside the serialized IR.
+
+Approximate shape:
+
+```ts
+export interface CompiledCssSheet {
+ version: 1
+ id: string
+ sourceId?: string
+ contentHash: string
+ rules: CssRule[]
+ keyframes: Record
+ exports?: Record
+ metadata: CssxMetadata
+ diagnostics: CssxDiagnostic[]
+ error?: CssxDiagnostic
+}
+
+export interface CssRule {
+ selector: string
+ classes: string[]
+ part: string | null
+ specificity: number
+ order: number
+ media: string | null
+ declarations: CssDeclaration[]
+}
+
+export interface CssDeclaration {
+ property: string
+ value: CssValueAst
+ raw: string
+ order: number
+ dynamicSlots?: number[]
+}
+
+export interface CssKeyframe {
+ selector: 'from' | 'to' | string
+ declarations: CssDeclaration[]
+ order: number
+}
+
+export interface CssxMetadata {
+ hasVars: boolean
+ vars: string[]
+ hasMedia: boolean
+ hasViewportUnits: boolean
+ hasInterpolations: boolean
+ hasDynamicRuntimeDependencies: boolean
+ hasAnimations: boolean
+ hasTransitions: boolean
+}
+```
+
+The exact TypeScript structure can evolve, but these semantic fields are needed.
+
+### IDs And Path Privacy
+
+Compiled sheets need stable hashes:
+
+- build templates/imports:
+ - use relative file path and per-file template/import order as hash input
+ - do not expose the path in emitted runtime objects
+- runtime `compileCss(css)`:
+ - use CSS content as hash input
+
+Recommended build hash shape:
+
+```text
+sourceId = hash(relativeFilePath + ':' + templateIndex)
+contentHash = hash(staticCssContent)
+id = hash(sourceId + ':' + contentHash)
+```
+
+Runtime objects may expose only hashed IDs:
+
+```ts
+{
+ id: 'cssx_abc123',
+ sourceId: 'cssx_src_def456'
+}
+```
+
+Do not leak absolute or relative server paths into code delivered publicly.
+
+Build diagnostics can include actual filenames and code frames because those are
+developer-only build outputs.
+
+Runtime diagnostics for AI-generated CSS should include sanitized line/column
+but no source paths.
+
+## Compiler Behavior
+
+### Modes
+
+`compileCss()` should support separate modes:
+
+```ts
+type CompileMode = 'runtime' | 'build'
+```
+
+Runtime-safe mode is the default for the public API:
+
+- CSS syntax errors return an empty sheet with structured diagnostics
+- dev mode may warn
+- production should not crash
+- unsupported selectors/rules become diagnostics and are ignored
+- invalid declarations become diagnostics and are ignored
+
+Build-strict mode is used by Babel/loaders:
+
+- syntax errors throw
+- invalid static declarations throw
+- unsupported critical constructs throw when they represent developer source bugs
+- errors should include file-aware code frames where possible
+
+For parser syntax errors in runtime mode, return an empty sheet initially. Do not
+attempt partial recovery until there is a good reason and tests.
+
+### Diagnostics
+
+Compiled sheets must expose structured diagnostics suitable for tooling and
+AI feedback:
+
+```ts
+export interface CssxDiagnostic {
+ level: 'warning' | 'error'
+ code: CssxDiagnosticCode
+ message: string
+ line?: number
+ column?: number
+}
+```
+
+Use stable machine-readable codes. Initial codes:
+
+```text
+CSS_SYNTAX_ERROR
+UNSUPPORTED_SELECTOR
+UNSUPPORTED_AT_RULE
+INVALID_DECLARATION
+UNRESOLVED_VARIABLE
+VARIABLE_CYCLE
+VARIABLE_DEPTH_LIMIT
+UNSUPPORTED_INTERPOLATION_POSITION
+INVALID_INTERPOLATION_VALUE
+UNSUPPORTED_CALC
+UNSUPPORTED_BACKGROUND_IMAGE
+UNSUPPORTED_BACKGROUND_SHORTHAND
+```
+
+Deduplicate dev warnings per stylesheet/declaration/error kind/value pattern to
+avoid console spam during repeated renders.
+
+### Source Locations
+
+Runtime IR should not include source maps or full source locations by default.
+
+Runtime diagnostics may include:
+
+- line
+- column
+- sanitized message
+
+Build tools can use parser locations immediately for code frames, but emitted
+runtime objects should stay small and path-free.
+
+## Selector Model
+
+Keep the CSSX selector subset.
+
+Supported:
+
+```css
+.root
+.root.active
+.root:part(label)
+.root.active:part(icon)
+.root:hover
+.root:active
+.root.active:hover
+:export
+```
+
+Unsupported and ignored with dev diagnostics:
+
+```css
+.root .child
+.root > .child
+#id
+[type='x']
+:nth-child(2)
+```
+
+`:hover` and `:active` are aliases for part-style output:
+
+```css
+.root:hover -> hoverStyle
+.root:active -> activeStyle
+```
+
+They are equivalent targets to:
+
+```css
+.root:part(hover)
+.root:part(active)
+```
+
+If both forms target the same logical part, normal cascade decides the result.
+No built-in hover/press state management is included. CSSX only emits
+`hoverStyle` / `activeStyle` props for components that consume them.
+
+Specificity remains CSSX class specificity:
+
+- specificity is class count
+- part/pseudo aliases do not add browser-style specificity
+- within same specificity, later source order wins
+
+## Cascade And Layering
+
+Canonical IR preserves:
+
+- rule order
+- declaration order
+- selector specificity
+- media condition per rule
+
+This is required for browser-like fallback behavior:
+
+```css
+.button {
+ color: red;
+ color: var(--maybe-color);
+}
+```
+
+If `--maybe-color` is unresolved or invalid at runtime, only the second
+declaration is dropped and `color: red` still applies.
+
+Cross-source precedence stays as today:
+
+1. file/imported stylesheet
+2. module-level global inline template
+3. function-level local inline template
+4. inline style props
+
+Model this as ordered sheet layers:
+
+```ts
+resolveCssx({
+ styleName,
+ layers: [fileSheet, globalSheet, localSheet],
+ inlineStyleProps
+})
+```
+
+Within each sheet:
+
+1. match selectors/classes/part
+2. filter inactive media rules
+3. sort/apply by specificity and source order
+4. resolve declarations in order
+5. drop invalid declarations
+
+Across sheets, later layers override earlier layers.
+
+Public `cssx()` should accept a single sheet or an array:
+
+```ts
+cssx('root', sheet, inlineStyleProps)
+cssx('root', [baseSheet, generatedSheet], inlineStyleProps)
+```
+
+## Interpolation
+
+Interpolation is supported only in JS tagged templates:
+
+```tsx
+css`
+ .button {
+ color: ${buttonColor};
+ }
+`
+
+styl`
+ .button
+ color ${buttonColor}
+`
+```
+
+It is not supported in:
+
+- external `.cssx.css` / `.cssx.styl` files
+- module-level global templates
+- Pug `style` blocks
+- selectors
+- property names
+- media queries
+- `:export`
+
+Interpolation is allowed only where CSS `var()` can legally appear in
+declaration values. It can also interpolate a full `var(...)` string.
+
+### Lowering
+
+Babel lowers template expressions to synthetic `var()`-like tokens before CSS
+or Stylus parsing:
+
+```tsx
+css`
+ .root {
+ color: ${color};
+ padding: ${pad} 2u;
+ }
+`
+```
+
+becomes a static source equivalent to:
+
+```css
+.root {
+ color: var(--__cssx_dynamic_0);
+ padding: var(--__cssx_dynamic_1) 2u;
+}
+```
+
+The compiler validates that the synthetic slots appear only inside declaration
+values. If a slot appears in a selector, property name, media query, `:export`,
+or other unsupported position, build mode throws
+`UNSUPPORTED_INTERPOLATION_POSITION`.
+
+For Stylus:
+
+```text
+JS template -> synthetic dynamic var tokens -> Stylus -> CSS -> compileCssTemplate()
+```
+
+This keeps CSS and Stylus interpolation on one path.
+
+### Runtime Values
+
+Dynamic values are passed as an ordered array in template expression order:
+
+```ts
+useCssxTemplate(__sheet, [color, pad])
+```
+
+Accepted interpolation values:
+
+```ts
+string | number | null | undefined | false
+```
+
+Semantics:
+
+- `string`: inserted as raw CSS value text
+- `number`: inserted as raw numeric token
+- `null`, `undefined`, `false`: invalidate only the containing declaration
+- `true`: invalid
+- objects, arrays, functions, symbols, bigint: invalid
+
+Invalid interpolation values drop only the containing declaration at runtime and
+produce a deduped dev diagnostic.
+
+Interpolation cache equality uses `Object.is` over the primitive value array.
+Do not stringify interpolation values.
+
+### Local Templates Only
+
+Interpolations are supported only in function-scoped local templates. This gives
+the runtime a clear render lifecycle:
+
+```tsx
+function Button({ color }) {
+ return
+
+ css`
+ .root { color: ${color}; }
+ `
+}
+```
+
+Module-level templates with expressions remain unsupported because they would
+require global mutable style state or one-time module initialization semantics.
+
+## Value Resolution
+
+Dynamic values must resolve at the CSS declaration-value layer before RN/web
+property transformation.
+
+This is essential for:
+
+```css
+box-shadow: var(--shadow);
+box-shadow: var(--shadow-1), var(--shadow-2);
+box-shadow: var(--x) 2px 8px rgba(0,0,0,var(--alpha));
+padding: var(--button-padding, 8px 16px);
+border: var(--width) solid var(--color);
+transform: translateX(var(--x)) scale(var(--scale));
+```
+
+Resolution pipeline:
+
+1. replace interpolation slots
+2. recursively resolve nested `var()`
+3. resolve/evaluate supported `calc()` and viewport units at the value layer
+4. apply `u` unit semantics
+5. transform final declaration values into RN/web style props
+
+Implementation can combine steps 3 and 4 internally. The important invariant is
+that RN property transformers receive final CSS value strings with no unresolved
+`var()` or dynamic slots.
+
+### CSS Variables
+
+CSS variable priority stays:
+
+1. runtime `variables['--name']`
+2. `defaultVariables['--name']`
+3. inline fallback `var(--name, fallback)`
+
+Nested vars are supported:
+
+```css
+color: var(--button-color, var(--theme-color, red));
+```
+
+Cycles and runaway recursion are invalid:
+
+```css
+var(--a) where --a -> var(--b) and --b -> var(--a)
+```
+
+Implement:
+
+- resolving-name stack for cycle detection
+- explicit recursion depth limit, for example `20`
+- invalid declaration on cycle/depth limit
+- deduped dev warning
+
+Unresolved vars invalidate only the containing declaration.
+
+Do not support stylesheet custom property declarations initially:
+
+```css
+.root {
+ --button-bg: red;
+ background: var(--button-bg);
+}
+```
+
+Do not treat `:root { --x: ... }` as defaults. Ignore with dev warning. Use
+`setDefaultVariables()` for defaults.
+
+### `calc()`
+
+Support limited `calc()` where the final expression can be reduced safely after
+vars/interpolation/viewport units are resolved:
+
+```css
+width: calc(100vw - 16px);
+margin-left: calc(var(--spacing, 8px) * 2);
+```
+
+Do not attempt full browser layout math:
+
+```css
+width: calc(100% - 16px);
+```
+
+Unsupported `calc()`:
+
+- throws in build mode if fully static
+- drops declaration in runtime mode or if dynamic
+- emits `UNSUPPORTED_CALC`
+
+### Viewport Units
+
+Support:
+
+- `vw`
+- `vh`
+- `vmin`
+- `vmax`
+
+Resolve at the declaration-value layer before property transformation. Viewport
+unit users depend on debounced dimension changes.
+
+### `u` Unit
+
+Preserve current CSSX semantics:
+
+```text
+1u = 8px
+```
+
+The new resolver should handle `u` consistently before final RN/web output.
+
+## Media Queries
+
+Store media conditions on rules:
+
+```ts
+{
+ selector: '.button',
+ classes: ['button'],
+ part: null,
+ specificity: 1,
+ order: 4,
+ media: '@media (min-width: 600px)',
+ declarations: [...]
+}
+```
+
+Do not use a separate nested style map in canonical IR.
+
+Rule filtering order:
+
+1. match selector/classes/part
+2. evaluate media condition
+3. resolve active declarations
+
+Inactive media rules must not contribute variable dependencies.
+
+Target optimization:
+
+- media subscribers rerender only when query match result changes
+- viewport unit subscribers rerender when debounced dimension values change
+
+First milestone may use a simpler debounced dimension version for all media and
+viewport dependencies if needed, but the target should be query-match-based
+media invalidation.
+
+Web:
+
+- use `window.matchMedia(query).change` for media query subscriptions when
+ available
+- use debounced `resize` for viewport units
+- SSR/no-window falls back to configured defaults and no-op subscriptions
+
+React Native:
+
+- use `Dimensions` for width/height
+- reevaluate query matches after dimension changes
+
+Dimension listener initialization:
+
+- platform entrypoint installs adapter automatically
+- actual listeners start lazily on first dimension/media subscription
+- listeners stop when last dimension subscriber unsubscribes, if possible
+
+Dimension notification debounce:
+
+- leading notification for immediate rotation/orientation response
+- trailing notification after resize settles
+- default around `100ms`
+- configurable later through provider or singleton config
+
+## Keyframes, Animations, And Transitions
+
+CSSX should emit Reanimated v4-compatible style props only. It should not own
+animation execution, hooks, or animated component wrappers.
+
+Users write:
+
+```tsx
+import Animated from 'react-native-reanimated'
+
+
+```
+
+CSSX emits style props that Reanimated v4 understands.
+
+### Keyframe IR
+
+Store `@keyframes` separately:
+
+```ts
+{
+ keyframes: {
+ fade: [
+ { selector: 'from', declarations: [...] },
+ { selector: 'to', declarations: [...] }
+ ]
+ },
+ rules: [...]
+}
+```
+
+Keyframe declarations use the same dynamic value pipeline:
+
+- `var()` supported
+- interpolation supported when the keyframes are inside a local interpolated
+ template
+- invalid dynamic keyframe declarations are dropped at runtime
+
+Animation declarations resolve names to keyframe objects after dynamic value
+resolution:
+
+```css
+.button {
+ animation: fade var(--duration, 200ms) ease;
+}
+```
+
+Result includes:
+
+```js
+{
+ animationName: { from: {...}, to: {...} },
+ animationDuration: '200ms',
+ animationTimingFunction: 'ease'
+}
+```
+
+Support comma-separated multi-values from the first implementation:
+
+```css
+transition: background 0.2s, transform 0.1s, opacity 0.3s;
+animation: fadeIn 300ms ease, slideIn 500ms ease-out;
+```
+
+## Property Transformation
+
+The property transformer should be designed around final resolved CSS values.
+It can selectively reuse code from `../css-to-react-native`, but should not be
+constrained by the old architecture.
+
+Keep or add support for:
+
+- all existing supported RN style props
+- shorthand expansion
+- border shorthand with dynamic width/color/style after var resolution
+- padding/margin/border radius/width/color/style shorthands
+- transform
+- text-shadow
+- box-shadow
+- animation and transition shorthands/longhands
+- keyframe object inlining
+- `filter`
+- `background-image`
+- limited `background` shorthand
+
+### Box Shadow
+
+React Native now supports web-style `boxShadow` strings. Keep pass-through
+string output after resolving vars/interpolation/calc/viewport units:
+
+```css
+box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 1px 2px #333;
+```
+
+outputs:
+
+```js
+{ boxShadow: '0 2px 8px rgba(0,0,0,.2), 0 1px 2px #333' }
+```
+
+### Filter
+
+React Native supports CSS-like filter strings. Pass through as string after
+value resolution:
+
+```css
+filter: blur(4px) brightness(0.8);
+```
+
+outputs:
+
+```js
+{ filter: 'blur(4px) brightness(0.8)' }
+```
+
+### Background Image
+
+React Native supports the style prop:
+
+```js
+experimental_backgroundImage
+```
+
+for web-like `linear-gradient()` and `radial-gradient()` strings.
+
+CSS:
+
+```css
+background-image: linear-gradient(90deg, red, blue);
+```
+
+React Native output:
+
+```js
+{ experimental_backgroundImage: 'linear-gradient(90deg, red, blue)' }
+```
+
+Web output:
+
+```js
+{ backgroundImage: 'linear-gradient(90deg, red, blue)' }
+```
+
+Use generic kebab-to-camelCase for properties, then special-case
+`backgroundImage` to `experimental_backgroundImage` for React Native target.
+
+Supported background image functions:
+
+- `linear-gradient()`
+- `radial-gradient()`
+
+Unsupported:
+
+- `url(...)`
+- image-set
+- other image functions
+
+Unsupported background images are dropped with `UNSUPPORTED_BACKGROUND_IMAGE`.
+
+Multiple gradients must be preserved as a comma-separated string:
+
+```css
+background-image:
+ linear-gradient(0deg, white, rgba(238, 64, 53, 0.8), rgba(238, 64, 53, 0) 70%),
+ linear-gradient(45deg, white, rgba(243, 119, 54, 0.8), rgba(243, 119, 54, 0) 70%);
+```
+
+### Background Shorthand
+
+Support a limited useful subset:
+
+```css
+background: red;
+background: linear-gradient(90deg, red, blue);
+background: red linear-gradient(90deg, red, blue);
+background: linear-gradient(...), radial-gradient(...);
+```
+
+Output:
+
+- color-only -> `backgroundColor`
+- gradient-only -> `backgroundImage` / `experimental_backgroundImage`
+- color + gradient -> both
+
+Unsupported:
+
+```css
+background: url(foo.png);
+background: no-repeat center/cover red;
+background: fixed border-box red;
+```
+
+Do not implement full browser background shorthand.
+
+## Runtime Store And React Tracking
+
+Replace the dependency on:
+
+- `teamplay`
+- `teamplay/cache`
+- `@nx-js/observer-util`
+
+with a small CSSX-owned store and React integration.
+
+### Variable Store
+
+Preserve current public API:
+
+```ts
+variables['--text'] = '#111'
+delete variables['--text']
+Object.assign(variables, theme)
+setDefaultVariables({ '--text': '#111' })
+```
+
+Implement `variables` as an internal `Proxy` over a plain object:
+
+- detects `set`
+- detects `deleteProperty`
+- records changed variable names
+- batches notifications in a microtask
+- notifies only subscribers interested in changed names
+
+Use microtask batching:
+
+```ts
+Object.assign(variables, {
+ '--bg': 'black',
+ '--text': 'white'
+})
+```
+
+should notify once with `['--bg', '--text']`, not once per assignment.
+
+Variables remain global singleton state initially. Provider-scoped variables are
+out of scope.
+
+### Runtime Options
+
+Defaults must work without any setup.
+
+Optional configuration paths:
+
+```tsx
+
+
+
+```
+
+and:
+
+```ts
+configureCssx({ dimensionsDebounceMs: 100 })
+```
+
+Provider is for React tree options. Singleton config is for early app-wide setup.
+
+### Tracked Sheet Wrapper
+
+Manual runtime CSS should stay ergonomic:
+
+```tsx
+const sheet = useRuntimeCss(generatedCss)
+
+return (
+ <>
+
+
+
+)
+```
+
+`useRuntimeCss()` returns a tracked wrapper, not the plain JSON IR. The wrapper:
+
+- contains or references the compiled sheet
+- holds a render-local dependency collector
+- owns the React external-store subscription
+- records dependencies from every `cssx()` call during render
+
+`cssx()` itself:
+
+- does not call hooks
+- can be used inline in JSX spreads
+- resolves style props
+- records exact dependencies into the tracked wrapper if present
+
+### React Subscription Lifecycle
+
+Use `useSyncExternalStore` for external store subscriptions.
+
+Important constraints:
+
+- no global subscription mutation during render
+- render-time dependency collection stays local to the tracked wrapper
+- global subscriber registry is mutated only through hook subscribe/unsubscribe
+ lifecycle
+- aborted/suspended renders must not leak subscriptions
+
+Algorithm target:
+
+1. Hook creates a tracker/wrapper.
+2. Before each render, tracker starts a new dependency collection.
+3. Each inline `cssx()` call resolves styles and records used dependencies:
+ - variable names and their versions
+ - media query IDs/match state
+ - viewport dimension dependency if used
+4. After commit, an effect commits the collected dependency set.
+5. `useSyncExternalStore` subscription listens only for changes intersecting the
+ committed dependency set.
+6. If a dependency changed between render and effect commit, trigger one
+ corrective rerender.
+
+Race safeguard:
+
+- tracker records store version snapshot used during render
+- commit effect compares against current versions
+- if changed, force a rerender so no variable/media change is missed
+
+Memory safety:
+
+- suspended/aborted renders may collect dependencies locally, but never register
+ them globally
+- previous committed subscription remains active until React commits a new one or
+ unmounts
+- tests must cover promise-throwing Suspense renders where effects do not run
+
+### Babel-Compiled Usage
+
+Users still write:
+
+```tsx
+
+```
+
+Babel hides the hook:
+
+```tsx
+function Button() {
+ const __cssxSheet = useCssxSheet(__sheet)
+ return
+}
+```
+
+Babel should inject the hook only when a component's styles can depend on
+runtime state:
+
+- stylesheet uses `var()`
+- stylesheet uses media queries
+- stylesheet uses viewport units
+- local template has interpolations
+- dynamic interpolation could introduce `var(...)`
+
+Static-only styles should not pay a subscription cost.
+
+For any interpolation, always use the tracked runtime path, even if Babel sees a
+literal expression. A string literal can still be `var(--x)`.
+
+Dependency tracking must happen after selector matching and active media
+filtering, so unused selectors do not cause rerenders:
+
+```css
+.root { color: var(--root-color); }
+.label { color: var(--label-color); }
+```
+
+Resolving `styleName="root"` subscribes to `--root-color`, not `--label-color`.
+
+If an interpolation value introduces a variable:
+
+```tsx
+css`
+ .root { color: ${color}; }
+`
+```
+
+and `color === 'var(--button-color)'`, the component subscribes to
+`--button-color`. If later `color === 'red'`, it stops depending on that
+variable after commit.
+
+## Caching
+
+The new engine owns caching directly. Teamplay cache is not needed.
+
+### Static Sheet Result Cache
+
+Static/imported/runtime-generated sheets can be shared by many elements and
+style names. Use a bounded per-sheet result cache.
+
+Target default:
+
+```text
+max 100 resolved entries per sheet
+```
+
+Make the exact size internal initially or configurable later.
+
+Cache key includes only values that affect the resolved element:
+
+- normalized `styleName`
+- sheet ID/hash
+- active layer IDs
+- relevant CSS variable values discovered while resolving matched declarations
+- relevant media query match state
+- dimension values only if viewport units are used
+- inline style props hash
+
+Do not invalidate because an unrelated selector uses an unrelated variable.
+
+### Interpolated Template Cache
+
+Interpolated local templates must keep only one last-result slot:
+
+```ts
+{
+ lastValues,
+ lastResult
+}
+```
+
+If values are the same by `Object.is` array equality, return the same result
+reference. If values change, recompute and replace the previous slot. If values
+later change back to an old value, recompute instead of keeping historical
+variants.
+
+### Raw String Convenience Cache
+
+`cssx('root', generatedCss)` is allowed for convenience. It should internally
+cache only the last raw CSS string and compiled sheet:
+
+```ts
+lastCssString
+lastCompiledSheet
+```
+
+Users who need stronger caching should use:
+
+```ts
+const sheet = useRuntimeCss(generatedCss)
+```
+
+or:
+
+```ts
+const sheet = useMemo(() => compileCss(generatedCss), [generatedCss])
+```
+
+### Inline Style Props Hash
+
+Use value hashing by default for inline style props, matching current CSSX
+ergonomics.
+
+Current behavior uses:
+
+```ts
+simpleNumericHash(JSON.stringify(inlineStyleProps))
+```
+
+Continue this direction:
+
+- use `JSON.stringify`
+- numeric hash is fine
+- do not require users to memoize inline style objects
+- fresh-but-equal inline object literals should hit cache
+
+If `JSON.stringify` throws on cycles, treat that inline input as uncacheable for
+that render and warn in dev.
+
+### Output Shape
+
+Resolved style props should be flattened plain objects, like today:
+
+Input:
+
+```js
+{ style: [{ color: 'red' }, { padding: 8 }] }
+```
+
+Output:
+
+```js
+{ style: { color: 'red', padding: 8 } }
+```
+
+This maximizes stable object identity.
+
+## Part Props
+
+Preserve `part="root"` behavior:
+
+```tsx
+
+```
+
+maps to the normal `style` prop.
+
+Other parts map to:
+
+```text
+title -> titleStyle
+icon -> iconStyle
+hover -> hoverStyle
+active -> activeStyle
+```
+
+The IR can represent:
+
+- normal root styles as `part: null`
+- part styles as `part: 'title'`
+- pseudo aliases as `part: 'hover'` / `part: 'active'`
+
+## Stylus
+
+Stylus remains outside `@cssxjs/css-to-rn`.
+
+Pipeline:
+
+```text
+Stylus source -> CSS string -> compileCss()
+```
+
+Runtime compilation is CSS-only:
+
+```ts
+compileCss(generatedCss)
+```
+
+Do not support:
+
+```ts
+compileStyl(generatedStylus)
+```
+
+This keeps `stylus` out of client bundles.
+
+## Pug
+
+Pug style blocks continue to be transformed into local `css` or `styl`
+templates by the existing Pug/Babel path.
+
+Supported:
+
+```pug
+style(lang='styl')
+ .root
+ color var(--color, red)
+```
+
+Not supported initially:
+
+```pug
+style(lang='styl')
+ .root
+ color ${color}
+```
+
+Pug interpolation syntax is a separate feature and is out of scope.
+
+## Babel And Loader Integration
+
+### Inline Template Plugin
+
+Update `packages/babel-plugin-rn-stylename-inline`:
+
+- stop rejecting all template expressions
+- allow expressions only in function-scoped templates
+- lower expressions to synthetic dynamic var tokens
+- for CSS templates, compile tokenized CSS
+- for Stylus templates, run tokenized Stylus through Stylus first, then compile
+ CSS
+- validate slot positions during compilation
+- hoist static compiled sheet IR after imports
+- inject local runtime hook when needed
+- pass ordered expression array to `useCssxTemplate()`
+
+Conceptual output:
+
+```tsx
+const __sheet = { /* compiled IR */ }
+
+function Button({ color }) {
+ const __CSS_LOCAL__ = useCssxTemplate(__sheet, [color])
+ return
+}
+```
+
+The actual generated code may use different internal variable names, but should
+preserve current user-facing behavior.
+
+Global/module-level templates:
+
+- remain static-only
+- expressions are unsupported
+
+### StyleName Plugin
+
+Update `packages/babel-plugin-rn-stylename-to-style`:
+
+- use new resolver/runtime imports
+- support canonical IR layers
+- preserve file < global < local < inline precedence
+- continue converting `styleName` and `*StyleName`
+- continue handling `part`
+- hide injected hooks from users
+- no longer require `observer()` or teamplay detection for caching
+
+The existing `cache: 'teamplay'` option should become deprecated/no-op or be
+removed in a breaking release path.
+
+### External Imports
+
+External `.cssx.css` and `.cssx.styl` imports should converge on canonical IR.
+
+Migration can use `toLegacyStyleObject()` temporarily, but long term:
+
+```tsx
+import styles from './button.cssx.styl'
+
+
+```
+
+where `styles` is canonical compiled sheet IR.
+
+Build-time compilers must use strict mode:
+
+```ts
+compileCss(css, { mode: 'build' })
+```
+
+### Loaders
+
+Update `packages/loaders/cssToReactNativeLoader.js` to use
+`@cssxjs/css-to-rn` instead of `@startupjs/css-to-react-native-transform`.
+
+Update compiler wrappers in `packages/loaders/compilers/` to emit either:
+
+- canonical IR, once runtime is migrated
+- legacy object shape during the transition
+
+### Umbrella Package
+
+Update `packages/cssxjs`:
+
+- re-export new APIs
+- update runtime conditional exports to point to new platform runtime
+- preserve public import paths where possible
+
+## Legacy Adapter
+
+Include a legacy object-shape adapter for incremental migration:
+
+```ts
+toLegacyStyleObject(sheet)
+```
+
+Output shape:
+
+```js
+{
+ root: { paddingTop: 8 },
+ 'root::part(label)': { color: 'red' },
+ __hash__: 123,
+ __vars: ['--color'],
+ __hasMedia: true
+}
+```
+
+Use this only as a bridge. The canonical rule/declaration IR is the target.
+
+## Tests
+
+Use the same broad test setup pattern as `../teamplay/packages/teamplay`:
+
+- Mocha for source-level engine/isomorphic tests
+- Jest + jsdom for React tests
+- Node `-C cssx-ts` custom condition for direct TS source tests
+- TypeScript type tests/build tests
+
+React integration tests should target React 19 only. Upgrade dev/test deps on
+this branch as needed.
+
+### Test Scripts
+
+Approximate package scripts:
+
+```json
+{
+ "test": "npm run test-engine && npm run test-react && npm run test-types",
+ "test-engine": "NODE_OPTIONS=\"${NODE_OPTIONS:-} -C cssx-ts\" mocha 'test/[!_]*.test.ts'",
+ "test-react": "NODE_OPTIONS=\"${NODE_OPTIONS:-} --experimental-vm-modules -C cssx-ts\" jest --runInBand",
+ "test-types": "tsc -p tsconfig.json --noEmit",
+ "build": "tsc -p tsconfig.build.json"
+}
+```
+
+Exact paths can follow the package layout.
+
+### Pure Engine Tests
+
+Port and expand tests from:
+
+- `../css-to-react-native/src/__tests__`
+- `../css-to-react-native-transform/src/index.spec.js`
+- `packages/runtime/test/process.mjs`
+- `packages/runtime/test/matcher.mjs`
+
+Cover:
+
+- property name normalization
+- raw value transforms
+- unit conversion
+- shorthand expansion
+- border shorthand including dynamic width/color/style after var resolution
+- margin/padding/radius/width/color/style shorthands
+- transform
+- text-shadow
+- box-shadow string pass-through
+- filter string pass-through
+- background-image platform mapping
+- background shorthand limited support
+- unsupported background images
+- animations
+- transitions
+- comma-separated animation/transition values
+- keyframes
+- keyframes with vars
+- keyframes with interpolation slots
+- media query parsing and validation
+- viewport units
+- limited calc
+- `u` unit
+- CSS variables:
+ - runtime value
+ - default value
+ - inline fallback
+ - nested fallback
+ - unresolved
+ - cycles
+ - depth limit
+ - variable inside whole shorthand
+ - variable inside shorthand part
+ - variable inside comma chunk
+ - variable inside complex functions
+- interpolation:
+ - CSS templates
+ - Stylus templates
+ - primitive values
+ - `null` / `undefined` / `false`
+ - invalid `true`
+ - invalid objects/arrays/functions/symbols/bigint
+ - interpolated `var(...)`
+ - unsupported selector/property/media/export positions
+- selectors:
+ - class
+ - multi-class
+ - `:part()`
+ - `::part()`
+ - `:hover`
+ - `:active`
+ - unsupported descendants/IDs/attrs/pseudos
+- cascade:
+ - specificity
+ - source order
+ - declaration fallback when dynamic declaration invalid
+ - file/global/local/inline precedence
+- diagnostics:
+ - stable codes
+ - line/column
+ - empty sheet on runtime syntax error
+ - strict throw in build mode
+ - warning dedupe
+- legacy adapter output
+
+### Cache Tests
+
+Add focused reference-stability tests:
+
+- same static `styleName` returns same result object
+- fresh-but-equal inline object returns same result object due to JSON hash
+- changed inline object invalidates
+- unrelated variable change does not invalidate or rerender
+- used variable change invalidates
+- inactive media variable does not subscribe or invalidate
+- media query match changes invalidate
+- viewport unit dimension changes invalidate
+- static sheet bounded cache evicts predictably
+- interpolated sheet stores only one previous value set
+- interpolation same primitive values returns same references
+- interpolation changed values replace previous cache slot
+- interpolation changed back recomputes rather than using historical cache
+- raw CSS string convenience caches only one compiled string
+
+### React Integration Tests
+
+Use Jest/jsdom and React 19.
+
+Cover:
+
+- `useRuntimeCss()` returns tracked wrapper
+- inline `` records dependencies
+- multiple `cssx()` calls in one component union dependencies
+- components rerender only for used variables
+- components do not rerender for unused variables
+- interpolation values that introduce `var()` dynamically update subscriptions
+- interpolation values that stop using `var()` remove subscriptions after commit
+- microtask batching of `variables` changes
+- dimension leading/trailing debounce
+- web `matchMedia` query subscriptions
+- viewport unit resize subscriptions
+- SSR/no-window fallback behavior
+- unmount cleanup
+- Suspense-aborted render does not leak subscriptions
+- promise thrown during rerender where effect does not run destructor does not
+ leak new subscriptions
+- stale-check rerenders if variable changes between render and effect commit
+- subscriber counts are observable in tests through internal test-only helpers
+
+### Babel Tests
+
+Update snapshot tests for:
+
+- static inline templates
+- interpolated local CSS templates
+- interpolated local Stylus templates
+- rejection of global template interpolation
+- rejection of unsupported interpolation positions
+- `styleName` transform with injected hook only when needed
+- static template with no hook
+- external imports with canonical IR or legacy bridge
+- `:hover` / `:active` output
+- `part="root"` behavior
+- Pug style blocks still lowering to CSS/Stylus templates
+
+## Migration Milestones
+
+### Milestone 1: Package Scaffold And Test Harness
+
+- Create `packages/css-to-rn`.
+- Add TS package config, build config, source condition, exports.
+- Add Mocha source tests and Jest React test setup mirroring Teamplay.
+- Add initial type declarations through TS source.
+- Add copied/adapted test fixtures from forks and current runtime.
+- Do not change existing production runtime yet.
+
+Exit criteria:
+
+- package tests run against TS source
+- package builds `.js` and `.d.ts`
+- test scaffold includes expected failing tests for new behavior
+
+### Milestone 2: Pure Compiler IR
+
+- Implement lightweight CSS parse path.
+- Implement selector parser/validator.
+- Implement rule/declaration/keyframe IR.
+- Implement metadata and diagnostics.
+- Implement build/runtime modes.
+- Implement path-private hashes.
+- Implement `:export` static-only.
+- Implement unsupported selector diagnostics.
+- Implement legacy adapter enough to compare with current output.
+
+Exit criteria:
+
+- static CSS fixtures compile to expected IR
+- diagnostics work in runtime-safe and build-strict modes
+- legacy adapter matches current static behavior for core cases
+
+### Milestone 3: Value Resolver And Property Transformer
+
+- Implement interpolation slot representation.
+- Implement recursive `var()` resolver with cycles/depth.
+- Implement declaration invalidation.
+- Implement limited `calc()`.
+- Implement viewport and `u` unit handling.
+- Implement or adapt property transforms.
+- Add new properties:
+ - `filter`
+ - `background-image`
+ - limited `background`
+- Implement animations/transitions/keyframes.
+
+Exit criteria:
+
+- forked property tests pass or have intentional documented deltas
+- complex var/shorthand tests pass
+- Reanimated v4 animation style output matches docs
+
+### Milestone 4: Pure Resolver And Caching
+
+- Implement `resolveCssx()` over sheet layers.
+- Implement specificity/source-order cascade.
+- Implement media filtering.
+- Implement dependency reporting from resolution.
+- Implement per-sheet bounded cache.
+- Implement single-entry interpolation cache.
+- Implement inline style JSON hash.
+- Implement raw string single-entry compile cache.
+- Implement flattened output props.
+
+Exit criteria:
+
+- cache reference tests pass
+- dependency-specific invalidation tests pass
+- current matcher/process behavior is covered by new tests
+
+### Milestone 5: React Runtime Integration
+
+- Implement variable store proxy.
+- Implement default variables.
+- Implement microtask batching.
+- Implement platform dimension adapters.
+- Implement web `matchMedia` support.
+- Implement React tracked sheet wrapper.
+- Implement `useRuntimeCss()`, `useCssxSheet()`, `useCssxTemplate()`.
+- Implement `CssxProvider` and `configureCssx()`.
+- Implement Suspense-safe subscription lifecycle.
+
+Exit criteria:
+
+- React tests pass
+- no `observer()` needed
+- no `teamplay` needed
+- no `@nx-js/observer-util` needed
+
+### Milestone 6: Babel And Loader Migration
+
+- Update inline template plugin for interpolation lowering.
+- Update styleName plugin for new resolver/hook path.
+- Update loaders to call `@cssxjs/css-to-rn`.
+- Keep legacy adapter bridge if needed.
+- Update package dependencies.
+- Update `cssxjs` public exports and conditional runtime exports.
+
+Exit criteria:
+
+- existing Babel snapshots updated
+- example app works
+- CSS variables/media no longer need `observer()`
+- static style behavior remains compatible
+
+### Milestone 7: Runtime Package Cleanup
+
+- Remove duplicated logic from `packages/runtime`.
+- Either:
+ - turn it into a compatibility wrapper around the new package, or
+ - remove it from internal generated imports and keep only if publishing
+ compatibility requires it
+- Remove `teamplay` cache integration.
+- Remove `@nx-js/observer-util` dependency.
+- Update docs that currently mention teamplay caching.
+
+Exit criteria:
+
+- public `cssxjs` API works without teamplay
+- docs no longer require `observer()`
+- package dependency graph no longer includes removed runtime deps unless another
+ package still genuinely needs them
+
+### Milestone 8: Docs And Examples
+
+Update docs for:
+
+- interpolation
+- runtime `compileCss()`
+- `cssx()` and `useRuntimeCss()`
+- diagnostics for AI-generated CSS
+- no-observer variable/media rerendering
+- caching behavior
+- `:hover` / `:active` part aliases
+- `filter`
+- `background-image`
+- Reanimated v4 animation expectations
+
+Update examples to demonstrate:
+
+- local interpolation
+- AI-generated CSS runtime use
+- variables without `observer()`
+- media query updates without teamplay
+
+## Implementation Notes
+
+### Avoiding The Old Split
+
+Do not recreate the old three-package architecture inside one package. Use the
+old packages as:
+
+- test sources
+- known-good code snippets
+- behavior references
+
+Build the new architecture around:
+
+- canonical IR
+- value-layer dynamic resolution
+- dependency-aware resolver
+- direct cache ownership
+- React tracked wrapper integration
+
+### Build-Time Versus Runtime Behavior
+
+The same compiler powers both:
+
+- Babel/loaders
+- runtime AI-generated CSS
+
+But options differ:
+
+```ts
+compileCss(css, { mode: 'build' }) // strict, throw
+compileCss(css, { mode: 'runtime' }) // default, graceful diagnostics
+```
+
+### React 19
+
+Only support React 19 going forward for the new runtime integration. Use
+`useSyncExternalStore` for external subscriptions. `use(context)` may be useful
+for reading provider options, but it does not replace external store
+subscription.
+
+### Platform Targets
+
+The engine should understand target platform:
+
+```ts
+platform: 'ios' | 'android' | 'web'
+reactType: 'react-native' | 'web'
+```
+
+This matters for:
+
+- `experimental_backgroundImage` vs `backgroundImage`
+- pure web line-height string handling
+- platform-specific future behavior
+
+### Current Public Behavior To Preserve
+
+- `styleName` accepts string, arrays, and object flags.
+- `styleName` class matching supports multi-class selectors.
+- `part` prop injects part style props into component props.
+- `part="root"` maps to `style`.
+- file/global/local/inline precedence stays the same.
+- static styles continue to be build-time compiled.
+- Stylus global imports/preprocessing stay outside pure CSS engine.
+
+## Open Implementation Choices
+
+These are left to implementation judgment:
+
+- exact internal names for hooks and generated variables
+- exact cache size defaults
+- exact hash function, as long as deterministic and small
+- exact parser abstraction around `css/lib/parse`
+- exact diagnostic message wording
+- whether legacy adapter is used only in tests or also during migration
+
+Do not reopen the high-level decisions in this document unless implementation
+reveals a concrete blocker.
diff --git a/rspress.config.ts b/rspress.config.ts
index c63447d..efbfd7b 100644
--- a/rspress.config.ts
+++ b/rspress.config.ts
@@ -87,6 +87,7 @@ export default defineConfig({
{ text: 'styl() Function', link: '/api/styl-function' },
{ text: 'CSS Variables', link: '/api/variables' },
{ text: 'JSX Props', link: '/api/jsx-props' },
+ { text: 'Runtime Compilation', link: '/api/runtime' },
{ text: 'Babel Config', link: '/api/babel' }
]
},
diff --git a/yarn.lock b/yarn.lock
index 6a7b8fc..ff31e9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22,6 +22,46 @@ __metadata:
languageName: node
linkType: hard
+"@asamuzakjp/css-color@npm:^5.1.11":
+ version: 5.1.11
+ resolution: "@asamuzakjp/css-color@npm:5.1.11"
+ dependencies:
+ "@asamuzakjp/generational-cache": "npm:^1.0.1"
+ "@csstools/css-calc": "npm:^3.2.0"
+ "@csstools/css-color-parser": "npm:^4.1.0"
+ "@csstools/css-parser-algorithms": "npm:^4.0.0"
+ "@csstools/css-tokenizer": "npm:^4.0.0"
+ checksum: 10c0/32720bdff8daea6a8847aba6cdfae55baa3b4a2690b51d21db7f0382bbd183f3d9f2d5126df50afd889062635684b2819e47113629ee2e80c99389e75f48d060
+ languageName: node
+ linkType: hard
+
+"@asamuzakjp/dom-selector@npm:^7.1.1":
+ version: 7.1.1
+ resolution: "@asamuzakjp/dom-selector@npm:7.1.1"
+ dependencies:
+ "@asamuzakjp/generational-cache": "npm:^1.0.1"
+ "@asamuzakjp/nwsapi": "npm:^2.3.9"
+ bidi-js: "npm:^1.0.3"
+ css-tree: "npm:^3.2.1"
+ is-potential-custom-element-name: "npm:^1.0.1"
+ checksum: 10c0/8cec1c618781c94de5836a215bbe5aafb4d8b835b18c51faf8547f4574afa39f92def3951e40123860062467613dd825f1e1600ff32e8045cc099a91796dcfb8
+ languageName: node
+ linkType: hard
+
+"@asamuzakjp/generational-cache@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "@asamuzakjp/generational-cache@npm:1.0.1"
+ checksum: 10c0/1de62de43764e13fca3b9a31b7ea9b1bf0780fe053d266e40378a19ff8c66b543e011e6a0df02d410cd59bf981126706f176cdbb938985165202c4a079fe1057
+ languageName: node
+ linkType: hard
+
+"@asamuzakjp/nwsapi@npm:^2.3.9":
+ version: 2.3.9
+ resolution: "@asamuzakjp/nwsapi@npm:2.3.9"
+ checksum: 10c0/869b81382e775499c96c45c6dbe0d0766a6da04bcf0abb79f5333535c4e19946851acaa43398f896e2ecc5a1de9cf3db7cf8c4b1afac1ee3d15e21584546d74d
+ languageName: node
+ linkType: hard
+
"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0":
version: 7.26.0
resolution: "@babel/code-frame@npm:7.26.0"
@@ -709,6 +749,17 @@ __metadata:
languageName: node
linkType: hard
+"@bramus/specificity@npm:^2.4.2":
+ version: 2.4.2
+ resolution: "@bramus/specificity@npm:2.4.2"
+ dependencies:
+ css-tree: "npm:^3.0.0"
+ bin:
+ specificity: bin/cli.js
+ checksum: 10c0/c5f4e04e0bca0d2202598207a5eb0733c8109d12a68a329caa26373bec598d99db5bb785b8865fefa00fc01b08c6068138807ceb11a948fe15e904ed6cf4ba72
+ languageName: node
+ linkType: hard
+
"@cspotcode/source-map-support@npm:^0.8.0":
version: 0.8.1
resolution: "@cspotcode/source-map-support@npm:0.8.1"
@@ -718,6 +769,64 @@ __metadata:
languageName: node
linkType: hard
+"@csstools/color-helpers@npm:^6.0.2":
+ version: 6.0.2
+ resolution: "@csstools/color-helpers@npm:6.0.2"
+ checksum: 10c0/4c66574563d7c960010c11e41c2673675baff07c427cca6e8dddffa5777de45770d13ff3efce1c0642798089ad55de52870d9d8141f78db3fa5bba012f2d3789
+ languageName: node
+ linkType: hard
+
+"@csstools/css-calc@npm:^3.2.0, @csstools/css-calc@npm:^3.2.1":
+ version: 3.2.1
+ resolution: "@csstools/css-calc@npm:3.2.1"
+ peerDependencies:
+ "@csstools/css-parser-algorithms": ^4.0.0
+ "@csstools/css-tokenizer": ^4.0.0
+ checksum: 10c0/0191c8d1cd4dffa0d3b6bfd1e78a721934b1d7a6c972966e4fdaa72208c6789e8ff443ee81764a32f1e6107825695b5524ef2b4dc1681b5b29230f2a1277e5df
+ languageName: node
+ linkType: hard
+
+"@csstools/css-color-parser@npm:^4.1.0":
+ version: 4.1.8
+ resolution: "@csstools/css-color-parser@npm:4.1.8"
+ dependencies:
+ "@csstools/color-helpers": "npm:^6.0.2"
+ "@csstools/css-calc": "npm:^3.2.1"
+ peerDependencies:
+ "@csstools/css-parser-algorithms": ^4.0.0
+ "@csstools/css-tokenizer": ^4.0.0
+ checksum: 10c0/7a5ed5cca6ee2d33e6f9710eb00616658efc09df5ed0cf1619f572986180e36c70728bde42a0cc29bd59c6dc4469c04edd4d7f3e52129c3ec9e56a56a85d2d85
+ languageName: node
+ linkType: hard
+
+"@csstools/css-parser-algorithms@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "@csstools/css-parser-algorithms@npm:4.0.0"
+ peerDependencies:
+ "@csstools/css-tokenizer": ^4.0.0
+ checksum: 10c0/94558c2428d6ef0ddef542e86e0a8376aa1263a12a59770abb13ba50d7b83086822c75433f32aa2e7fef00555e1cc88292f9ca5bce79aed232bb3fed73b1528d
+ languageName: node
+ linkType: hard
+
+"@csstools/css-syntax-patches-for-csstree@npm:^1.1.3":
+ version: 1.1.5
+ resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.5"
+ peerDependencies:
+ css-tree: ^3.2.1
+ peerDependenciesMeta:
+ css-tree:
+ optional: true
+ checksum: 10c0/a31f0cfb74e2b5ce8a283c47969a202fc3b23c3ee05c6b6beab7f5c14d89c50b82533e446df74f7df0bf88bf23810ed59431353db26e00d5b013995c1ebf07a2
+ languageName: node
+ linkType: hard
+
+"@csstools/css-tokenizer@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "@csstools/css-tokenizer@npm:4.0.0"
+ checksum: 10c0/669cf3d0f9c8e1ffdf8c9955ad8beba0c8cfe03197fe29a4fcbd9ee6f7a18856cfa42c62670021a75183d9ab37f5d14a866e6a9df753a6c07f59e36797a9ea9f
+ languageName: node
+ linkType: hard
+
"@cssxjs/babel-plugin-rn-stylename-inline@npm:^0.3.0, @cssxjs/babel-plugin-rn-stylename-inline@workspace:packages/babel-plugin-rn-stylename-inline":
version: 0.0.0-use.local
resolution: "@cssxjs/babel-plugin-rn-stylename-inline@workspace:packages/babel-plugin-rn-stylename-inline"
@@ -727,7 +836,6 @@ __metadata:
"@babel/template": "npm:^7.4.0"
"@babel/types": "npm:^7.0.0"
"@cssxjs/loaders": "npm:^0.3.0"
- "@cssxjs/runtime": "npm:^0.3.0"
babel-plugin-tester: "npm:^9.1.0"
jest: "npm:^30.0.4"
languageName: unknown
@@ -742,7 +850,6 @@ __metadata:
"@babel/plugin-syntax-jsx": "npm:^7.0.0"
"@babel/template": "npm:^7.4.0"
"@babel/types": "npm:^7.0.0"
- "@cssxjs/runtime": "npm:^0.3.0"
"@react-pug/babel-plugin-react-pug": "npm:^0.1.18"
babel-plugin-tester: "npm:^9.1.0"
jest: "npm:^30.0.4"
@@ -757,48 +864,42 @@ __metadata:
languageName: unknown
linkType: soft
-"@cssxjs/css-to-react-native@npm:3.2.0-2":
- version: 3.2.0-2
- resolution: "@cssxjs/css-to-react-native@npm:3.2.0-2"
- dependencies:
- camelize: "npm:^1.0.0"
- css-color-keywords: "npm:^1.0.0"
- postcss-value-parser: "npm:^4.0.2"
- checksum: 10c0/54d5990946c164089be1ca2203ff360ab49528df79290b8fd9df1bcdb07780335c03c3a6668a045786ff1b5808c6e101bdfe3b9b62a9fcc3b460d3513f56287f
- languageName: node
- linkType: hard
-
-"@cssxjs/loaders@npm:^0.3.0, @cssxjs/loaders@workspace:packages/loaders":
+"@cssxjs/css-to-rn@npm:^0.3.0, @cssxjs/css-to-rn@workspace:packages/css-to-rn":
version: 0.0.0-use.local
- resolution: "@cssxjs/loaders@workspace:packages/loaders"
+ resolution: "@cssxjs/css-to-rn@workspace:packages/css-to-rn"
dependencies:
- "@startupjs/css-to-react-native-transform": "npm:2.1.0-3"
- stylus: "npm:0.64.0"
- languageName: unknown
- linkType: soft
-
-"@cssxjs/runtime@npm:^0.3.0, @cssxjs/runtime@workspace:packages/runtime":
- version: 0.0.0-use.local
- resolution: "@cssxjs/runtime@workspace:packages/runtime"
- dependencies:
- "@cssxjs/loaders": "npm:^0.3.0"
- "@nx-js/observer-util": "npm:^4.1.3"
- "@startupjs/css-to-react-native-transform": "npm:2.1.0-3"
- css-viewport-units-transform: "npm:^0.10.2"
- deepmerge: "npm:^3.2.0"
- micro-memoize: "npm:^3.0.1"
- mocha: "npm:^8.1.1"
+ "@types/jsdom": "npm:^28.0.3"
+ "@types/node": "npm:^22.8.1"
+ "@types/react": "npm:19.2.17"
+ "@types/react-dom": "npm:19.2.3"
+ css: "npm:^3.0.0"
+ css-mediaquery: "npm:^0.1.2"
+ jsdom: "npm:^29.1.1"
+ mocha: "npm:^8.4.0"
+ postcss-value-parser: "npm:^4.2.0"
+ react: "npm:19.2.7"
+ react-dom: "npm:19.2.7"
+ typescript: "npm:^6.0.3"
peerDependencies:
+ react: "*"
react-native: "*"
- teamplay: "*"
peerDependenciesMeta:
- react-native:
+ react:
optional: true
- teamplay:
+ react-native:
optional: true
languageName: unknown
linkType: soft
+"@cssxjs/loaders@npm:^0.3.0, @cssxjs/loaders@workspace:packages/loaders":
+ version: 0.0.0-use.local
+ resolution: "@cssxjs/loaders@workspace:packages/loaders"
+ dependencies:
+ "@cssxjs/css-to-rn": "npm:^0.3.0"
+ stylus: "npm:0.64.0"
+ languageName: unknown
+ linkType: soft
+
"@emnapi/core@npm:^1.1.0":
version: 1.3.1
resolution: "@emnapi/core@npm:1.3.1"
@@ -1150,6 +1251,18 @@ __metadata:
languageName: node
linkType: hard
+"@exodus/bytes@npm:^1.11.0, @exodus/bytes@npm:^1.15.0, @exodus/bytes@npm:^1.6.0":
+ version: 1.15.1
+ resolution: "@exodus/bytes@npm:1.15.1"
+ peerDependencies:
+ "@noble/hashes": ^1.8.0 || ^2.0.0
+ peerDependenciesMeta:
+ "@noble/hashes":
+ optional: true
+ checksum: 10c0/333056a6953bbf875d9f3b86c32314de29458d842e5f56f6ef8034b18c2d9660184550093d1bae5de0064043d5e23f54cc03148798d9d29cf5167ac03f2e9f8c
+ languageName: node
+ linkType: hard
+
"@humanfs/core@npm:^0.19.1":
version: 0.19.1
resolution: "@humanfs/core@npm:0.19.1"
@@ -2314,13 +2427,6 @@ __metadata:
languageName: node
linkType: hard
-"@nx-js/observer-util@npm:^4.1.3":
- version: 4.2.2
- resolution: "@nx-js/observer-util@npm:4.2.2"
- checksum: 10c0/2b9953f598be95cc87fa1d02a59e73206f8a46d52f1ab20183e525d0f8273f470fa5fd27e176006db9adf2ec3f9e6e7e203a8844fc46998dacd28e9d5f704bd3
- languageName: node
- linkType: hard
-
"@nx/devkit@npm:>=21.5.2 < 23.0.0":
version: 22.2.6
resolution: "@nx/devkit@npm:22.2.6"
@@ -3067,17 +3173,6 @@ __metadata:
languageName: node
linkType: hard
-"@startupjs/css-to-react-native-transform@npm:2.1.0-3":
- version: 2.1.0-3
- resolution: "@startupjs/css-to-react-native-transform@npm:2.1.0-3"
- dependencies:
- "@cssxjs/css-to-react-native": "npm:3.2.0-2"
- css: "npm:^3.0.0"
- css-mediaquery: "npm:^0.1.2"
- checksum: 10c0/e0adfce66b6afb6f5a8e2e164d017c07bd5b810fdde92302d3c28d2c62159a21d79da42a377fb19a211ba17b2175b577b621acec5e9d10f44ccd0a6e4e7a4516
- languageName: node
- linkType: hard
-
"@stylistic/eslint-plugin@npm:2.11.0":
version: 2.11.0
resolution: "@stylistic/eslint-plugin@npm:2.11.0"
@@ -3298,6 +3393,18 @@ __metadata:
languageName: node
linkType: hard
+"@types/jsdom@npm:^28.0.3":
+ version: 28.0.3
+ resolution: "@types/jsdom@npm:28.0.3"
+ dependencies:
+ "@types/node": "npm:*"
+ "@types/tough-cookie": "npm:*"
+ parse5: "npm:^8.0.0"
+ undici-types: "npm:^7.21.0"
+ checksum: 10c0/08b1cd61ee3e9610676be3c68a782a94667b86a5f73b8a262095d05f84c9e864fc11b25ae53450cd519a0abd46c202906a735bd61aa176257a981964bc5b1166
+ languageName: node
+ linkType: hard
+
"@types/json-schema@npm:^7.0.15":
version: 7.0.15
resolution: "@types/json-schema@npm:7.0.15"
@@ -3351,6 +3458,15 @@ __metadata:
languageName: node
linkType: hard
+"@types/node@npm:^22.8.1":
+ version: 22.20.0
+ resolution: "@types/node@npm:22.20.0"
+ dependencies:
+ undici-types: "npm:~6.21.0"
+ checksum: 10c0/55d78223205bd5f81f043d71b7a5c8d8854b9ef44ef81291680943adb27fa5ba1f092658c87183d5bc8cf6baf6a57b81dad966eb3afa452cc301a615b6d9b20e
+ languageName: node
+ linkType: hard
+
"@types/normalize-package-data@npm:^2.4.0":
version: 2.4.4
resolution: "@types/normalize-package-data@npm:2.4.4"
@@ -3372,29 +3488,21 @@ __metadata:
languageName: node
linkType: hard
-"@types/prop-types@npm:*":
- version: 15.7.13
- resolution: "@types/prop-types@npm:15.7.13"
- checksum: 10c0/1b20fc67281902c6743379960247bc161f3f0406ffc0df8e7058745a85ea1538612109db0406290512947f9632fe9e10e7337bf0ce6338a91d6c948df16a7c61
- languageName: node
- linkType: hard
-
-"@types/react-dom@npm:^18.3.1":
- version: 18.3.7
- resolution: "@types/react-dom@npm:18.3.7"
+"@types/react-dom@npm:19.2.3":
+ version: 19.2.3
+ resolution: "@types/react-dom@npm:19.2.3"
peerDependencies:
- "@types/react": ^18.0.0
- checksum: 10c0/8bd309e2c3d1604a28a736a24f96cbadf6c05d5288cfef8883b74f4054c961b6b3a5e997fd5686e492be903c8f3380dba5ec017eff3906b1256529cd2d39603e
+ "@types/react": ^19.2.0
+ checksum: 10c0/b486ebe0f4e2fb35e2e108df1d8fc0927ca5d6002d5771e8a739de11239fe62d0e207c50886185253c99eb9dedfeeb956ea7429e5ba17f6693c7acb4c02f8cd1
languageName: node
linkType: hard
-"@types/react@npm:~18.2.45":
- version: 18.2.79
- resolution: "@types/react@npm:18.2.79"
+"@types/react@npm:19.2.17":
+ version: 19.2.17
+ resolution: "@types/react@npm:19.2.17"
dependencies:
- "@types/prop-types": "npm:*"
- csstype: "npm:^3.0.2"
- checksum: 10c0/c8a8a005d8830a48cc1ef93c3510c4935a2a03e5557dbecaa8f1038450cbfcb18eb206fa7fba7077d54b8da21faeb25577e897a333392770a7797f625b62c78a
+ csstype: "npm:^3.2.2"
+ checksum: 10c0/bc2c4af96b3e480604424de70d5ebda90c5f4b485df471858c0bc2d7d70364b606ec3c4d8579f94f01aa0c6c0591f56bcf14cba5689f5eea4b74250ccdc3a232
languageName: node
linkType: hard
@@ -3405,6 +3513,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/tough-cookie@npm:*":
+ version: 4.0.5
+ resolution: "@types/tough-cookie@npm:4.0.5"
+ checksum: 10c0/68c6921721a3dcb40451543db2174a145ef915bc8bcbe7ad4e59194a0238e776e782b896c7a59f4b93ac6acefca9161fccb31d1ce3b3445cb6faa467297fb473
+ languageName: node
+ linkType: hard
+
"@types/unist@npm:*, @types/unist@npm:^3.0.0, @types/unist@npm:^3.0.3":
version: 3.0.3
resolution: "@types/unist@npm:3.0.3"
@@ -4344,6 +4459,15 @@ __metadata:
languageName: node
linkType: hard
+"bidi-js@npm:^1.0.3":
+ version: 1.0.3
+ resolution: "bidi-js@npm:1.0.3"
+ dependencies:
+ require-from-string: "npm:^2.0.2"
+ checksum: 10c0/fdddea4aa4120a34285486f2267526cd9298b6e8b773ad25e765d4f104b6d7437ab4ba542e6939e3ac834a7570bcf121ee2cf6d3ae7cd7082c4b5bedc8f271e1
+ languageName: node
+ linkType: hard
+
"bin-links@npm:^5.0.0":
version: 5.0.0
resolution: "bin-links@npm:5.0.0"
@@ -4616,13 +4740,6 @@ __metadata:
languageName: node
linkType: hard
-"camelize@npm:^1.0.0":
- version: 1.0.1
- resolution: "camelize@npm:1.0.1"
- checksum: 10c0/4c9ac55efd356d37ac483bad3093758236ab686192751d1c9daa43188cc5a07b09bd431eb7458a4efd9ca22424bba23253e7b353feb35d7c749ba040de2385fb
- languageName: node
- linkType: hard
-
"caniuse-lite@npm:^1.0.30001669":
version: 1.0.30001672
resolution: "caniuse-lite@npm:1.0.30001672"
@@ -5247,13 +5364,6 @@ __metadata:
languageName: node
linkType: hard
-"css-color-keywords@npm:^1.0.0":
- version: 1.0.0
- resolution: "css-color-keywords@npm:1.0.0"
- checksum: 10c0/af205a86c68e0051846ed91eb3e30b4517e1904aac040013ff1d742019b3f9369ba5658ba40901dbbc121186fc4bf0e75a814321cc3e3182fbb2feb81c6d9cb7
- languageName: node
- linkType: hard
-
"css-mediaquery@npm:^0.1.2":
version: 0.1.2
resolution: "css-mediaquery@npm:0.1.2"
@@ -5261,10 +5371,13 @@ __metadata:
languageName: node
linkType: hard
-"css-viewport-units-transform@npm:^0.10.2":
- version: 0.10.3
- resolution: "css-viewport-units-transform@npm:0.10.3"
- checksum: 10c0/3133b0998de05340daee2cce6b3f3a03921b5bd481534be835788afef4b8ce981adefd9943a8098598a1a83bbc9ed668c3498f9b7f8d1382741db82449afb43d
+"css-tree@npm:^3.0.0, css-tree@npm:^3.2.1":
+ version: 3.2.1
+ resolution: "css-tree@npm:3.2.1"
+ dependencies:
+ mdn-data: "npm:2.27.1"
+ source-map-js: "npm:^1.2.1"
+ checksum: 10c0/1f65e9ccaa56112a4706d6f003dd43d777f0dbcf848e66fd320f823192533581f8dd58daa906cb80622658332d50284d6be13b87a6ab4556cbbfe9ef535bbf7e
languageName: node
linkType: hard
@@ -5288,10 +5401,10 @@ __metadata:
languageName: node
linkType: hard
-"csstype@npm:^3.0.2":
- version: 3.1.3
- resolution: "csstype@npm:3.1.3"
- checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
+"csstype@npm:^3.2.2":
+ version: 3.2.3
+ resolution: "csstype@npm:3.2.3"
+ checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce
languageName: node
linkType: hard
@@ -5302,8 +5415,8 @@ __metadata:
"@cssxjs/babel-plugin-rn-stylename-inline": "npm:^0.3.0"
"@cssxjs/babel-plugin-rn-stylename-to-style": "npm:^0.3.0"
"@cssxjs/bundler": "npm:^0.3.0"
+ "@cssxjs/css-to-rn": "npm:^0.3.0"
"@cssxjs/loaders": "npm:^0.3.0"
- "@cssxjs/runtime": "npm:^0.3.0"
"@react-pug/babel-plugin-react-pug": "npm:^0.1.18"
"@react-pug/check-types": "npm:^0.1.18"
babel-preset-cssxjs: "npm:^0.3.0"
@@ -5321,6 +5434,16 @@ __metadata:
languageName: node
linkType: hard
+"data-urls@npm:^7.0.0":
+ version: 7.0.0
+ resolution: "data-urls@npm:7.0.0"
+ dependencies:
+ whatwg-mimetype: "npm:^5.0.0"
+ whatwg-url: "npm:^16.0.0"
+ checksum: 10c0/08d88ef50d8966a070ffdaa703e1e4b29f01bb2da364dfbc1612b1c2a4caa8045802c9532d81347b21781100132addb36a585071c8323b12cce97973961dee9f
+ languageName: node
+ linkType: hard
+
"data-view-buffer@npm:^1.0.1":
version: 1.0.1
resolution: "data-view-buffer@npm:1.0.1"
@@ -5454,6 +5577,13 @@ __metadata:
languageName: node
linkType: hard
+"decimal.js@npm:^10.6.0":
+ version: 10.6.0
+ resolution: "decimal.js@npm:10.6.0"
+ checksum: 10c0/07d69fbcc54167a340d2d97de95f546f9ff1f69d2b45a02fd7a5292412df3cd9eb7e23065e532a318f5474a2e1bccf8392fdf0443ef467f97f3bf8cb0477e5aa
+ languageName: node
+ linkType: hard
+
"decode-named-character-reference@npm:^1.0.0":
version: 1.0.2
resolution: "decode-named-character-reference@npm:1.0.2"
@@ -5501,13 +5631,6 @@ __metadata:
languageName: node
linkType: hard
-"deepmerge@npm:^3.2.0":
- version: 3.3.0
- resolution: "deepmerge@npm:3.3.0"
- checksum: 10c0/143bc6b6cd8a1216565c61c0fe38bf43fe691fb6876fb3f5727c6e323defe4e947c68fbab9957e17e837c5594a56af885c5834d23dc6cf2c41bef97090005104
- languageName: node
- linkType: hard
-
"deepmerge@npm:^4.3.1":
version: 4.3.1
resolution: "deepmerge@npm:4.3.1"
@@ -5753,6 +5876,13 @@ __metadata:
languageName: node
linkType: hard
+"entities@npm:^8.0.0":
+ version: 8.0.0
+ resolution: "entities@npm:8.0.0"
+ checksum: 10c0/938e631664c19451823344a351aeeafd74fae2d5fa51e4d5b6ff635afaefd4bacf0f609989888c04c42733f46ffdac15211608267ebb02488005891a4793e94d
+ languageName: node
+ linkType: hard
+
"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
version: 2.2.1
resolution: "env-paths@npm:2.2.1"
@@ -6488,12 +6618,13 @@ __metadata:
resolution: "example@workspace:example"
dependencies:
"@babel/core": "npm:^7.0.0"
- "@types/react-dom": "npm:^18.3.1"
+ "@types/react": "npm:19.2.17"
+ "@types/react-dom": "npm:19.2.3"
cli-highlight: "npm:^2.1.11"
cssxjs: "npm:^0.3.0"
esbuild: "npm:^0.21.4"
- react: "npm:^18.3.1"
- react-dom: "npm:^18.3.1"
+ react: "npm:19.2.7"
+ react-dom: "npm:19.2.7"
languageName: unknown
linkType: soft
@@ -7669,6 +7800,15 @@ __metadata:
languageName: node
linkType: hard
+"html-encoding-sniffer@npm:^6.0.0":
+ version: 6.0.0
+ resolution: "html-encoding-sniffer@npm:6.0.0"
+ dependencies:
+ "@exodus/bytes": "npm:^1.6.0"
+ checksum: 10c0/66dc3f6f5539cc3beb814fcbfae7eacf4ec38cf824d6e1425b72039b51a40f4456bd8541ba66f4f4fe09cdf885ab5cd5bae6ec6339d6895a930b2fdb83c53025
+ languageName: node
+ linkType: hard
+
"html-entities@npm:^2.6.0":
version: 2.6.0
resolution: "html-entities@npm:2.6.0"
@@ -8310,6 +8450,13 @@ __metadata:
languageName: node
linkType: hard
+"is-potential-custom-element-name@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "is-potential-custom-element-name@npm:1.0.1"
+ checksum: 10c0/b73e2f22bc863b0939941d369486d308b43d7aef1f9439705e3582bfccaa4516406865e32c968a35f97a99396dac84e2624e67b0a16b0a15086a785e16ce7db9
+ languageName: node
+ linkType: hard
+
"is-regex@npm:^1.1.4":
version: 1.1.4
resolution: "is-regex@npm:1.1.4"
@@ -9152,6 +9299,40 @@ __metadata:
languageName: node
linkType: hard
+"jsdom@npm:^29.1.1":
+ version: 29.1.1
+ resolution: "jsdom@npm:29.1.1"
+ dependencies:
+ "@asamuzakjp/css-color": "npm:^5.1.11"
+ "@asamuzakjp/dom-selector": "npm:^7.1.1"
+ "@bramus/specificity": "npm:^2.4.2"
+ "@csstools/css-syntax-patches-for-csstree": "npm:^1.1.3"
+ "@exodus/bytes": "npm:^1.15.0"
+ css-tree: "npm:^3.2.1"
+ data-urls: "npm:^7.0.0"
+ decimal.js: "npm:^10.6.0"
+ html-encoding-sniffer: "npm:^6.0.0"
+ is-potential-custom-element-name: "npm:^1.0.1"
+ lru-cache: "npm:^11.3.5"
+ parse5: "npm:^8.0.1"
+ saxes: "npm:^6.0.0"
+ symbol-tree: "npm:^3.2.4"
+ tough-cookie: "npm:^6.0.1"
+ undici: "npm:^7.25.0"
+ w3c-xmlserializer: "npm:^5.0.0"
+ webidl-conversions: "npm:^8.0.1"
+ whatwg-mimetype: "npm:^5.0.0"
+ whatwg-url: "npm:^16.0.1"
+ xml-name-validator: "npm:^5.0.0"
+ peerDependencies:
+ canvas: ^3.0.0
+ peerDependenciesMeta:
+ canvas:
+ optional: true
+ checksum: 10c0/20e2174b09d9d06393cb48e1392b7a1cb7191d6656a6f7b3b8fbf9853b4ab0ef60b4a42c2c55f71b55ca5da50ffa75bcdc6986210963182e7993c6f9cd4f499b
+ languageName: node
+ linkType: hard
+
"jsesc@npm:^3.0.2":
version: 3.0.2
resolution: "jsesc@npm:3.0.2"
@@ -9615,7 +9796,7 @@ __metadata:
languageName: node
linkType: hard
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.4.0":
version: 1.4.0
resolution: "loose-envify@npm:1.4.0"
dependencies:
@@ -9640,6 +9821,13 @@ __metadata:
languageName: node
linkType: hard
+"lru-cache@npm:^11.3.5":
+ version: 11.5.1
+ resolution: "lru-cache@npm:11.5.1"
+ checksum: 10c0/7b341cea79a8efe9c6a6f20c8757a77eca5b25d7ff983ccf4e11e547b81f6787824baa1c84705251dff84ab4ffac85717ac354b9d02e465f86a9f8b166409979
+ languageName: node
+ linkType: hard
+
"lru-cache@npm:^5.1.1":
version: 5.1.1
resolution: "lru-cache@npm:5.1.1"
@@ -10016,6 +10204,13 @@ __metadata:
languageName: node
linkType: hard
+"mdn-data@npm:2.27.1":
+ version: 2.27.1
+ resolution: "mdn-data@npm:2.27.1"
+ checksum: 10c0/eb8abf5d22e4d1e090346f5e81b67d23cef14c83940e445da5c44541ad874dc8fb9f6ca236e8258c3a489d9fb5884188a4d7d58773adb9089ac2c0b966796393
+ languageName: node
+ linkType: hard
+
"medium-zoom@npm:1.1.0":
version: 1.1.0
resolution: "medium-zoom@npm:1.1.0"
@@ -10049,13 +10244,6 @@ __metadata:
languageName: node
linkType: hard
-"micro-memoize@npm:^3.0.1":
- version: 3.0.2
- resolution: "micro-memoize@npm:3.0.2"
- checksum: 10c0/215a9a10327c9e19f52099cd149d151cffadbdaf77d5ce6ff43aec4c7a2e13f026d3e286ebd2211023cdc27a80424925ff8c481fb3bfea03f2d9f00b1b9a9d4e
- languageName: node
- linkType: hard
-
"micromark-core-commonmark@npm:^2.0.0":
version: 2.0.3
resolution: "micromark-core-commonmark@npm:2.0.3"
@@ -10779,7 +10967,7 @@ __metadata:
languageName: node
linkType: hard
-"mocha@npm:^8.1.1":
+"mocha@npm:^8.4.0":
version: 8.4.0
resolution: "mocha@npm:8.4.0"
dependencies:
@@ -11852,6 +12040,15 @@ __metadata:
languageName: node
linkType: hard
+"parse5@npm:^8.0.0, parse5@npm:^8.0.1":
+ version: 8.0.1
+ resolution: "parse5@npm:8.0.1"
+ dependencies:
+ entities: "npm:^8.0.0"
+ checksum: 10c0/c3c1c5aab55f6e4be5245599790e56e64be7764a4a0edd7f98db4fe3bb380f63add752fa047dff0496446c25f4104f0c7c1967723de640bde92306a7bb67ed2f
+ languageName: node
+ linkType: hard
+
"path-exists@npm:^3.0.0":
version: 3.0.0
resolution: "path-exists@npm:3.0.0"
@@ -12053,7 +12250,7 @@ __metadata:
languageName: node
linkType: hard
-"postcss-value-parser@npm:^4.0.2":
+"postcss-value-parser@npm:^4.2.0":
version: 4.2.0
resolution: "postcss-value-parser@npm:4.2.0"
checksum: 10c0/f4142a4f56565f77c1831168e04e3effd9ffcc5aebaf0f538eee4b2d465adfd4b85a44257bb48418202a63806a7da7fe9f56c330aebb3cac898e46b4cbf49161
@@ -12247,7 +12444,7 @@ __metadata:
languageName: node
linkType: hard
-"punycode@npm:^2.1.0":
+"punycode@npm:^2.1.0, punycode@npm:^2.3.1":
version: 2.3.1
resolution: "punycode@npm:2.3.1"
checksum: 10c0/14f76a8206bc3464f794fb2e3d3cc665ae416c01893ad7a02b23766eb07159144ee612ad67af5e84fa4479ccfe67678c4feb126b0485651b302babf66f04f9e9
@@ -12277,15 +12474,14 @@ __metadata:
languageName: node
linkType: hard
-"react-dom@npm:^18.0.0, react-dom@npm:^18.3.1":
- version: 18.3.1
- resolution: "react-dom@npm:18.3.1"
+"react-dom@npm:19.2.7":
+ version: 19.2.7
+ resolution: "react-dom@npm:19.2.7"
dependencies:
- loose-envify: "npm:^1.1.0"
- scheduler: "npm:^0.23.2"
+ scheduler: "npm:^0.27.0"
peerDependencies:
- react: ^18.3.1
- checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
+ react: ^19.2.7
+ checksum: 10c0/970ff600f6e80d47d39e2f226f12f226173b3cba3382efc97c5f0cd663de9af38c7a4c11c213fb936094faeac83060d660247accaa96b752180d5b951b9cfecb
languageName: node
linkType: hard
@@ -12367,12 +12563,10 @@ __metadata:
languageName: node
linkType: hard
-"react@npm:^18.0.0, react@npm:^18.3.1":
- version: 18.3.1
- resolution: "react@npm:18.3.1"
- dependencies:
- loose-envify: "npm:^1.1.0"
- checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+"react@npm:19.2.7":
+ version: 19.2.7
+ resolution: "react@npm:19.2.7"
+ checksum: 10c0/0bd0e2f1bbd4ba97561c6597bf8a5fec05e6476fe61e165c1065598d16668efc6715205599c94d3ddd49d36cb0f21cbf1b9bcc18ee840b805ce222c3e8d558ac
languageName: node
linkType: hard
@@ -12724,6 +12918,13 @@ __metadata:
languageName: node
linkType: hard
+"require-from-string@npm:^2.0.2":
+ version: 2.0.2
+ resolution: "require-from-string@npm:2.0.2"
+ checksum: 10c0/aaa267e0c5b022fc5fd4eef49d8285086b15f2a1c54b28240fdf03599cbd9c26049fee3eab894f2e1f6ca65e513b030a7c264201e3f005601e80c49fb2937ce2
+ languageName: node
+ linkType: hard
+
"resolve-cwd@npm:^3.0.0":
version: 3.0.0
resolution: "resolve-cwd@npm:3.0.0"
@@ -12863,15 +13064,16 @@ __metadata:
resolution: "root-workspace-0b6124@workspace:."
dependencies:
"@rspress/core": "npm:^2.0.0"
- "@types/react": "npm:~18.2.45"
+ "@types/react": "npm:19.2.17"
+ "@types/react-dom": "npm:19.2.3"
eslint: "npm:^9.39.4"
eslint-plugin-cssxjs: "npm:^0.3.0-alpha.0"
husky: "npm:^4.3.0"
lerna: "npm:^9.0.3"
lint-staged: "npm:^15.2.2"
neostandard: "npm:^0.13.0"
- react: "npm:^18.0.0"
- react-dom: "npm:^18.0.0"
+ react: "npm:19.2.7"
+ react-dom: "npm:19.2.7"
ts-node: "npm:^10.9.2"
typescript: "npm:^5.1.3"
languageName: unknown
@@ -12978,12 +13180,12 @@ __metadata:
languageName: node
linkType: hard
-"scheduler@npm:^0.23.2":
- version: 0.23.2
- resolution: "scheduler@npm:0.23.2"
+"saxes@npm:^6.0.0":
+ version: 6.0.0
+ resolution: "saxes@npm:6.0.0"
dependencies:
- loose-envify: "npm:^1.1.0"
- checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+ xmlchars: "npm:^2.2.0"
+ checksum: 10c0/3847b839f060ef3476eb8623d099aa502ad658f5c40fd60c105ebce86d244389b0d76fcae30f4d0c728d7705ceb2f7e9b34bb54717b6a7dbedaf5dad2d9a4b74
languageName: node
linkType: hard
@@ -13325,6 +13527,13 @@ __metadata:
languageName: node
linkType: hard
+"source-map-js@npm:^1.2.1":
+ version: 1.2.1
+ resolution: "source-map-js@npm:1.2.1"
+ checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
+ languageName: node
+ linkType: hard
+
"source-map-resolve@npm:^0.6.0":
version: 0.6.0
resolution: "source-map-resolve@npm:0.6.0"
@@ -13801,6 +14010,13 @@ __metadata:
languageName: node
linkType: hard
+"symbol-tree@npm:^3.2.4":
+ version: 3.2.4
+ resolution: "symbol-tree@npm:3.2.4"
+ checksum: 10c0/dfbe201ae09ac6053d163578778c53aa860a784147ecf95705de0cd23f42c851e1be7889241495e95c37cabb058edb1052f141387bef68f705afc8f9dd358509
+ languageName: node
+ linkType: hard
+
"synckit@npm:^0.11.8":
version: 0.11.8
resolution: "synckit@npm:0.11.8"
@@ -13944,6 +14160,24 @@ __metadata:
languageName: node
linkType: hard
+"tldts-core@npm:^7.4.3":
+ version: 7.4.3
+ resolution: "tldts-core@npm:7.4.3"
+ checksum: 10c0/866f9d46ef7ba80a560edaa0a659c32e0aa3b4e281694c96bcf7773f6530e107c5681c714f47d58ee1720dc5578bb168a1e8535c514de90b5907850dc1202cd8
+ languageName: node
+ linkType: hard
+
+"tldts@npm:^7.0.5":
+ version: 7.4.3
+ resolution: "tldts@npm:7.4.3"
+ dependencies:
+ tldts-core: "npm:^7.4.3"
+ bin:
+ tldts: bin/cli.js
+ checksum: 10c0/334c8d0d50fb0ac69453947460a6e51396f5c35bef6c70300b201832d86801ce54e6a26d03c1745cf801aa409780086e350a098c0a0afdf005c06de14e5e94c1
+ languageName: node
+ linkType: hard
+
"tmp@npm:~0.2.1":
version: 0.2.3
resolution: "tmp@npm:0.2.3"
@@ -13981,6 +14215,24 @@ __metadata:
languageName: node
linkType: hard
+"tough-cookie@npm:^6.0.1":
+ version: 6.0.1
+ resolution: "tough-cookie@npm:6.0.1"
+ dependencies:
+ tldts: "npm:^7.0.5"
+ checksum: 10c0/ec70bd6b1215efe4ed31a158f0be3e4c9088fcbd8620edc23a5860d4f3d85c757b77e274baaa700f7b25e409f4181552ed189603c2b2e1a9f88104da3a61a37d
+ languageName: node
+ linkType: hard
+
+"tr46@npm:^6.0.0":
+ version: 6.0.0
+ resolution: "tr46@npm:6.0.0"
+ dependencies:
+ punycode: "npm:^2.3.1"
+ checksum: 10c0/83130df2f649228aa91c17754b66248030a3af34911d713b5ea417066fa338aa4bc8668d06bd98aa21a2210f43fc0a3db8b9099e7747fb5830e40e39a6a1058e
+ languageName: node
+ linkType: hard
+
"tree-kill@npm:^1.2.2":
version: 1.2.2
resolution: "tree-kill@npm:1.2.2"
@@ -14300,6 +14552,16 @@ __metadata:
languageName: node
linkType: hard
+"typescript@npm:^6.0.3":
+ version: 6.0.3
+ resolution: "typescript@npm:6.0.3"
+ bin:
+ tsc: bin/tsc
+ tsserver: bin/tsserver
+ checksum: 10c0/4a25ff5045b984370f48f196b3a0120779b1b343d40b9a68d114ea5e5fff099809b2bb777576991a63a5cd59cf7bffd96ff6fe10afcefbcb8bd6fb96ad4b6606
+ languageName: node
+ linkType: hard
+
"typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin, typescript@patch:typescript@npm%3A^5.1.3#optional!builtin":
version: 5.6.3
resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin::version=5.6.3&hash=8c6c40"
@@ -14310,6 +14572,16 @@ __metadata:
languageName: node
linkType: hard
+"typescript@patch:typescript@npm%3A^6.0.3#optional!builtin":
+ version: 6.0.3
+ resolution: "typescript@patch:typescript@npm%3A6.0.3#optional!builtin::version=6.0.3&hash=5786d5"
+ bin:
+ tsc: bin/tsc
+ tsserver: bin/tsserver
+ checksum: 10c0/2f25c74e65663c248fa1ade2b8459d9ce5372ff9dad07067310f132966ebec1d93f6c42f0baf77a6b6a7a91460463f708e6887013aaade22111037457c6b25df
+ languageName: node
+ linkType: hard
+
"uglify-js@npm:^3.1.4":
version: 3.19.3
resolution: "uglify-js@npm:3.19.3"
@@ -14343,6 +14615,13 @@ __metadata:
languageName: node
linkType: hard
+"undici-types@npm:^7.21.0":
+ version: 7.28.0
+ resolution: "undici-types@npm:7.28.0"
+ checksum: 10c0/e1230791cfbaf7fc88a4ebb5282423886a2fb325572234437a3e9c9f7dff970bebe12d5672d6d23a3584119d6d43f8222d06531ed749d8ddeb3551f004fca55d
+ languageName: node
+ linkType: hard
+
"undici-types@npm:~6.19.8":
version: 6.19.8
resolution: "undici-types@npm:6.19.8"
@@ -14350,6 +14629,20 @@ __metadata:
languageName: node
linkType: hard
+"undici-types@npm:~6.21.0":
+ version: 6.21.0
+ resolution: "undici-types@npm:6.21.0"
+ checksum: 10c0/c01ed51829b10aa72fc3ce64b747f8e74ae9b60eafa19a7b46ef624403508a54c526ffab06a14a26b3120d055e1104d7abe7c9017e83ced038ea5cf52f8d5e04
+ languageName: node
+ linkType: hard
+
+"undici@npm:^7.25.0":
+ version: 7.28.0
+ resolution: "undici@npm:7.28.0"
+ checksum: 10c0/fe781983a26098795e99bb1f64906cbb7d0bcaa029a26baade007b53ea67f2631d189b8f9671a31f4c8d0cb3773b7559608628ba54452fef51fec90e7c78bb0d
+ languageName: node
+ linkType: hard
+
"unhead@npm:2.1.2":
version: 2.1.2
resolution: "unhead@npm:2.1.2"
@@ -14686,6 +14979,15 @@ __metadata:
languageName: node
linkType: hard
+"w3c-xmlserializer@npm:^5.0.0":
+ version: 5.0.0
+ resolution: "w3c-xmlserializer@npm:5.0.0"
+ dependencies:
+ xml-name-validator: "npm:^5.0.0"
+ checksum: 10c0/8712774c1aeb62dec22928bf1cdfd11426c2c9383a1a63f2bcae18db87ca574165a0fbe96b312b73652149167ac6c7f4cf5409f2eb101d9c805efe0e4bae798b
+ languageName: node
+ linkType: hard
+
"walk-up-path@npm:^4.0.0":
version: 4.0.0
resolution: "walk-up-path@npm:4.0.0"
@@ -14718,6 +15020,31 @@ __metadata:
languageName: node
linkType: hard
+"webidl-conversions@npm:^8.0.1":
+ version: 8.0.1
+ resolution: "webidl-conversions@npm:8.0.1"
+ checksum: 10c0/3f6f327ca5fa0c065ed8ed0ef3b72f33623376e68f958e9b7bd0df49fdb0b908139ac2338d19fb45bd0e05595bda96cb6d1622222a8b413daa38a17aacc4dd46
+ languageName: node
+ linkType: hard
+
+"whatwg-mimetype@npm:^5.0.0":
+ version: 5.0.0
+ resolution: "whatwg-mimetype@npm:5.0.0"
+ checksum: 10c0/eead164fe73a00dd82f817af6fc0bd22e9c273e1d55bf4bc6bdf2da7ad8127fca82ef00ea6a37892f5f5641f8e34128e09508f92126086baba126b9e0d57feb4
+ languageName: node
+ linkType: hard
+
+"whatwg-url@npm:^16.0.0, whatwg-url@npm:^16.0.1":
+ version: 16.0.1
+ resolution: "whatwg-url@npm:16.0.1"
+ dependencies:
+ "@exodus/bytes": "npm:^1.11.0"
+ tr46: "npm:^6.0.0"
+ webidl-conversions: "npm:^8.0.1"
+ checksum: 10c0/e75565566abf3a2cdbd9f06c965dbcccee6ec4e9f0d3728ad5e08ceb9944279848bcaa211d35a29cb6d2df1e467dd05cfb59fbddf8a0adcd7d0bce9ffb703fd2
+ languageName: node
+ linkType: hard
+
"which-boxed-primitive@npm:^1.0.2":
version: 1.0.2
resolution: "which-boxed-primitive@npm:1.0.2"
@@ -14991,6 +15318,20 @@ __metadata:
languageName: node
linkType: hard
+"xml-name-validator@npm:^5.0.0":
+ version: 5.0.0
+ resolution: "xml-name-validator@npm:5.0.0"
+ checksum: 10c0/3fcf44e7b73fb18be917fdd4ccffff3639373c7cb83f8fc35df6001fecba7942f1dbead29d91ebb8315e2f2ff786b508f0c9dc0215b6353f9983c6b7d62cb1f5
+ languageName: node
+ linkType: hard
+
+"xmlchars@npm:^2.2.0":
+ version: 2.2.0
+ resolution: "xmlchars@npm:2.2.0"
+ checksum: 10c0/b64b535861a6f310c5d9bfa10834cf49127c71922c297da9d4d1b45eeaae40bf9b4363275876088fbe2667e5db028d2cd4f8ee72eed9bede840a67d57dab7593
+ languageName: node
+ linkType: hard
+
"xtend@npm:~4.0.1":
version: 4.0.2
resolution: "xtend@npm:4.0.2"