@cssxio/react-native 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CSSX contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# `@cssxio/react-native`
+
+CSSX utilities for bare React Native and Expo. Styles are emitted as native
+style objects; no CSS file or DOM shim is used.
+
+```tsx
+import { create, props, sx } from '@cssxio/react-native';
+
+const styles = create({ card: 'flex-1 gap-4 rounded-lg bg-blue-600 p-4' });
+
+<View {...props(styles.card)}>
+  <Text style={sx('text-lg font-semibold text-white')}>CSSX native</Text>
+</View>;
+```
+
+Add `@cssxio/react-native/babel` to the Babel plugins used by Metro. The plugin
+precompiles object-literal `create` calls. The runtime fallback keeps the same
+API available in tests and environments that do not run Babel.
+
+Bare React Native:
+
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: ['@cssxio/react-native/babel'],
+};
+```
+
+Expo:
+
+```js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['@cssxio/react-native/babel'],
+  };
+};
+```
+
+Utilities that map to React Native `ViewStyle`, `TextStyle`, or `ImageStyle`
+are supported. Browser-only selectors, media queries, CSS variables, grid,
+tables, filters, masks, and DOM-specific values fail with an explicit build
+error. Pass `{ platform: 'ios' }` or `{ platform: 'android' }` to `create` when
+using the `ios:` and `android:` variants.

package/dist/babel.cjs

@@ -0,0 +1,287 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/babel.ts
+var babel_exports = {};
+__export(babel_exports, {
+  default: () => cssxReactNativeBabelPlugin
+});
+module.exports = __toCommonJS(babel_exports);
+
+// src/index.ts
+var import_compiler = require("@cssxio/compiler");
+var propertyNames = {
+  "align-content": "alignContent",
+  "align-items": "alignItems",
+  "align-self": "alignSelf",
+  "aspect-ratio": "aspectRatio",
+  "background-color": "backgroundColor",
+  "border-bottom-color": "borderBottomColor",
+  "border-bottom-left-radius": "borderBottomLeftRadius",
+  "border-bottom-right-radius": "borderBottomRightRadius",
+  "border-bottom-width": "borderBottomWidth",
+  "border-color": "borderColor",
+  "border-left-color": "borderLeftColor",
+  "border-left-width": "borderLeftWidth",
+  "border-radius": "borderRadius",
+  "border-right-color": "borderRightColor",
+  "border-right-width": "borderRightWidth",
+  "border-style": "borderStyle",
+  "border-top-color": "borderTopColor",
+  "border-top-left-radius": "borderTopLeftRadius",
+  "border-top-right-radius": "borderTopRightRadius",
+  "border-top-width": "borderTopWidth",
+  "border-width": "borderWidth",
+  bottom: "bottom",
+  color: "color",
+  display: "display",
+  flex: "flex",
+  "flex-basis": "flexBasis",
+  "flex-direction": "flexDirection",
+  "flex-grow": "flexGrow",
+  "flex-shrink": "flexShrink",
+  "flex-wrap": "flexWrap",
+  "font-size": "fontSize",
+  "font-style": "fontStyle",
+  "font-weight": "fontWeight",
+  gap: "gap",
+  height: "height",
+  "justify-content": "justifyContent",
+  left: "left",
+  "letter-spacing": "letterSpacing",
+  "line-height": "lineHeight",
+  margin: "margin",
+  "margin-bottom": "marginBottom",
+  "margin-left": "marginLeft",
+  "margin-right": "marginRight",
+  "margin-top": "marginTop",
+  "max-height": "maxHeight",
+  "max-width": "maxWidth",
+  "min-height": "minHeight",
+  "min-width": "minWidth",
+  opacity: "opacity",
+  overflow: "overflow",
+  padding: "padding",
+  "padding-bottom": "paddingBottom",
+  "padding-left": "paddingLeft",
+  "padding-right": "paddingRight",
+  "padding-top": "paddingTop",
+  position: "position",
+  right: "right",
+  "text-align": "textAlign",
+  "text-decoration-line": "textDecorationLine",
+  "text-transform": "textTransform",
+  top: "top",
+  width: "width",
+  "z-index": "zIndex"
+};
+var logicalProperties = {
+  "inset-inline": ["left", "right"],
+  "margin-block": ["marginTop", "marginBottom"],
+  "margin-inline": ["marginLeft", "marginRight"],
+  "padding-block": ["paddingTop", "paddingBottom"],
+  "padding-inline": ["paddingLeft", "paddingRight"]
+};
+function create(styles, options = {}) {
+  const records = (0, import_compiler.compileStyleRecords)(styles, { theme: options.theme });
+  const theme = (0, import_compiler.parseTheme)(options.theme);
+  return Object.fromEntries(
+    Object.entries(records.candidates).map(([name, candidates]) => [
+      name,
+      { $$cssx: 3, style: compileCandidates(candidates, theme, options.platform) }
+    ])
+  );
+}
+function compileCandidates(candidates, theme, platform) {
+  const style = {};
+  for (const source of candidates) {
+    const candidate = platformCandidate(source, platform);
+    if (candidate === null) {
+      continue;
+    }
+    const recipe = (0, import_compiler.describeUtilityRecipe)(candidate, theme);
+    for (const atom of recipe.atoms) {
+      for (const declaration of atom) {
+        appendDeclaration(style, candidate, declaration);
+      }
+    }
+  }
+  return style;
+}
+function platformCandidate(source, platform) {
+  const match = /^(ios|android):(.*)$/.exec(source);
+  if (match) {
+    return match[1] === platform ? match[2] : null;
+  }
+  if (!source.startsWith("[") && source.includes(":")) {
+    throw new Error(`CSSX React Native cannot represent the variant in "${source}".`);
+  }
+  return source;
+}
+function appendDeclaration(style, candidate, declaration) {
+  if (declaration.selectorSuffix || declaration.atRule) {
+    throw new Error(`CSSX React Native cannot represent browser-only utility "${candidate}".`);
+  }
+  if (appendCustomTransform(style, declaration.property, declaration.value, candidate)) {
+    return;
+  }
+  if (appendTransform(style, declaration.property, declaration.value)) {
+    return;
+  }
+  const logical = logicalProperties[declaration.property];
+  if (logical) {
+    const value2 = nativeValue(declaration.value, candidate);
+    for (const property2 of logical) {
+      style[property2] = value2;
+    }
+    return;
+  }
+  const property = propertyNames[declaration.property];
+  if (!property) {
+    throw new Error(
+      `CSSX React Native cannot represent "${candidate}" because ${declaration.property} is browser-only.`
+    );
+  }
+  const value = nativeValue(declaration.value, candidate);
+  if (property === "display" && value !== "flex" && value !== "none") {
+    throw new Error(`CSSX React Native cannot represent display value "${String(value)}" from "${candidate}".`);
+  }
+  if (property === "overflow" && value !== "visible" && value !== "hidden") {
+    throw new Error(`CSSX React Native cannot represent overflow value "${String(value)}" from "${candidate}".`);
+  }
+  if (property === "flex" && typeof value === "string") {
+    style[property] = Number.parseFloat(value);
+    return;
+  }
+  style[property] = value;
+}
+function appendTransform(style, property, value) {
+  if ((property === "translate" || property === "rotate" || property === "scale") && value.includes("var(")) {
+    return true;
+  }
+  let transforms;
+  if (property === "translate") {
+    const [x = "0", y = "0"] = value.split(" ");
+    transforms = [{ translateX: nativeValue(x, "translate") }, { translateY: nativeValue(y, "translate") }];
+  } else if (property === "rotate") {
+    transforms = [{ rotate: value }];
+  } else if (property === "scale") {
+    const [x = "1", y = x] = value.split(" ");
+    transforms = [{ scaleX: Number(x) }, { scaleY: Number(y) }];
+  }
+  if (!transforms) {
+    return false;
+  }
+  style.transform = [...style.transform ?? [], ...transforms];
+  return true;
+}
+function appendCustomTransform(style, property, value, candidate) {
+  const transformProperty = {
+    "--cssx-rotate": "rotate",
+    "--cssx-scale-x": "scaleX",
+    "--cssx-scale-y": "scaleY",
+    "--cssx-translate-x": "translateX",
+    "--cssx-translate-y": "translateY"
+  };
+  const nativeProperty = transformProperty[property];
+  if (!nativeProperty) {
+    return false;
+  }
+  const native = nativeValue(value, candidate);
+  style.transform = [
+    ...style.transform ?? [],
+    { [nativeProperty]: native }
+  ];
+  return true;
+}
+function nativeValue(value, candidate) {
+  const important = value.endsWith(" !important") ? value.slice(0, -11) : value;
+  const calculation = /^calc\((-?[\d.]+)rem \* (-?[\d.]+)\)$/.exec(important);
+  if (calculation) {
+    return Number(calculation[1]) * 16 * Number(calculation[2]);
+  }
+  const rem = /^(-?[\d.]+)rem$/.exec(important);
+  if (rem) {
+    return Number(rem[1]) * 16;
+  }
+  const pixels = /^(-?[\d.]+)px$/.exec(important);
+  if (pixels) {
+    return Number(pixels[1]);
+  }
+  if (/^-?[\d.]+$/.test(important)) {
+    return Number(important);
+  }
+  if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
+    return important;
+  }
+  if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
+    throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
+  }
+  return important;
+}
+
+// src/babel.ts
+function cssxReactNativeBabelPlugin(api, options = {}) {
+  api.assertVersion(7);
+  const types = api.types;
+  const importSource = options.importSource ?? "@cssxio/react-native";
+  return {
+    name: "@cssxio/react-native/babel",
+    visitor: {
+      CallExpression(path) {
+        if (!isCreateCall(path, importSource, types)) {
+          return;
+        }
+        const argument = path.node.arguments[0];
+        if (path.node.arguments.length !== 1 || !types.isObjectExpression(argument)) {
+          throw path.buildCodeFrameError("cssx.create() expects one object literal argument.");
+        }
+        const input = readStyleMap(argument, types, path);
+        path.replaceWith(types.valueToNode(create(input, options)));
+      }
+    }
+  };
+}
+function isCreateCall(path, importSource, types) {
+  if (!types.isIdentifier(path.node.callee)) {
+    return false;
+  }
+  const binding = path.scope.getBinding(path.node.callee.name);
+  const declaration = binding?.path.parentPath?.node;
+  return Boolean(
+    binding?.path.isImportSpecifier() && types.isIdentifier(binding.path.node.imported, { name: "create" }) && types.isImportDeclaration(declaration) && declaration.source.value === importSource
+  );
+}
+function readStyleMap(object, types, path) {
+  const input = {};
+  for (const property of object.properties) {
+    if (!types.isObjectProperty(property) || !types.isStringLiteral(property.value)) {
+      throw path.buildCodeFrameError("CSSX React Native style values must be static string literals.");
+    }
+    if (property.computed) {
+      throw path.buildCodeFrameError("CSSX React Native style keys must be static.");
+    }
+    const key = types.isIdentifier(property.key) ? property.key.name : types.isStringLiteral(property.key) || types.isNumericLiteral(property.key) ? String(property.key.value) : null;
+    if (key === null) {
+      throw path.buildCodeFrameError("CSSX React Native style keys must be static.");
+    }
+    input[key] = property.value.value;
+  }
+  return input;
+}

package/dist/babel.d.cts

@@ -0,0 +1,14 @@
+import { PluginObj, PluginPass } from '@babel/core';
+import * as BabelTypes from '@babel/types';
+import { NativeCompilerOptions } from './index.cjs';
+
+interface NativeBabelOptions extends NativeCompilerOptions {
+    readonly importSource?: string;
+}
+/** Compiles object-literal create calls imported from the React Native runtime. */
+declare function cssxReactNativeBabelPlugin(api: {
+    readonly types: typeof BabelTypes;
+    assertVersion(version: number): void;
+}, options?: NativeBabelOptions): PluginObj<PluginPass>;
+
+export { type NativeBabelOptions, cssxReactNativeBabelPlugin as default };

package/dist/babel.d.ts

@@ -0,0 +1,14 @@
+import { PluginObj, PluginPass } from '@babel/core';
+import * as BabelTypes from '@babel/types';
+import { NativeCompilerOptions } from './index.js';
+
+interface NativeBabelOptions extends NativeCompilerOptions {
+    readonly importSource?: string;
+}
+/** Compiles object-literal create calls imported from the React Native runtime. */
+declare function cssxReactNativeBabelPlugin(api: {
+    readonly types: typeof BabelTypes;
+    assertVersion(version: number): void;
+}, options?: NativeBabelOptions): PluginObj<PluginPass>;
+
+export { type NativeBabelOptions, cssxReactNativeBabelPlugin as default };

package/dist/babel.js

@@ -0,0 +1,56 @@
+import {
+  create
+} from "./chunk-P3KGLFG3.js";
+
+// src/babel.ts
+function cssxReactNativeBabelPlugin(api, options = {}) {
+  api.assertVersion(7);
+  const types = api.types;
+  const importSource = options.importSource ?? "@cssxio/react-native";
+  return {
+    name: "@cssxio/react-native/babel",
+    visitor: {
+      CallExpression(path) {
+        if (!isCreateCall(path, importSource, types)) {
+          return;
+        }
+        const argument = path.node.arguments[0];
+        if (path.node.arguments.length !== 1 || !types.isObjectExpression(argument)) {
+          throw path.buildCodeFrameError("cssx.create() expects one object literal argument.");
+        }
+        const input = readStyleMap(argument, types, path);
+        path.replaceWith(types.valueToNode(create(input, options)));
+      }
+    }
+  };
+}
+function isCreateCall(path, importSource, types) {
+  if (!types.isIdentifier(path.node.callee)) {
+    return false;
+  }
+  const binding = path.scope.getBinding(path.node.callee.name);
+  const declaration = binding?.path.parentPath?.node;
+  return Boolean(
+    binding?.path.isImportSpecifier() && types.isIdentifier(binding.path.node.imported, { name: "create" }) && types.isImportDeclaration(declaration) && declaration.source.value === importSource
+  );
+}
+function readStyleMap(object, types, path) {
+  const input = {};
+  for (const property of object.properties) {
+    if (!types.isObjectProperty(property) || !types.isStringLiteral(property.value)) {
+      throw path.buildCodeFrameError("CSSX React Native style values must be static string literals.");
+    }
+    if (property.computed) {
+      throw path.buildCodeFrameError("CSSX React Native style keys must be static.");
+    }
+    const key = types.isIdentifier(property.key) ? property.key.name : types.isStringLiteral(property.key) || types.isNumericLiteral(property.key) ? String(property.key.value) : null;
+    if (key === null) {
+      throw path.buildCodeFrameError("CSSX React Native style keys must be static.");
+    }
+    input[key] = property.value.value;
+  }
+  return input;
+}
+export {
+  cssxReactNativeBabelPlugin as default
+};

package/dist/chunk-P3KGLFG3.js

@@ -0,0 +1,264 @@
+// src/index.ts
+import { compileStyleRecords, describeUtilityRecipe, parseTheme } from "@cssxio/compiler";
+var propertyNames = {
+  "align-content": "alignContent",
+  "align-items": "alignItems",
+  "align-self": "alignSelf",
+  "aspect-ratio": "aspectRatio",
+  "background-color": "backgroundColor",
+  "border-bottom-color": "borderBottomColor",
+  "border-bottom-left-radius": "borderBottomLeftRadius",
+  "border-bottom-right-radius": "borderBottomRightRadius",
+  "border-bottom-width": "borderBottomWidth",
+  "border-color": "borderColor",
+  "border-left-color": "borderLeftColor",
+  "border-left-width": "borderLeftWidth",
+  "border-radius": "borderRadius",
+  "border-right-color": "borderRightColor",
+  "border-right-width": "borderRightWidth",
+  "border-style": "borderStyle",
+  "border-top-color": "borderTopColor",
+  "border-top-left-radius": "borderTopLeftRadius",
+  "border-top-right-radius": "borderTopRightRadius",
+  "border-top-width": "borderTopWidth",
+  "border-width": "borderWidth",
+  bottom: "bottom",
+  color: "color",
+  display: "display",
+  flex: "flex",
+  "flex-basis": "flexBasis",
+  "flex-direction": "flexDirection",
+  "flex-grow": "flexGrow",
+  "flex-shrink": "flexShrink",
+  "flex-wrap": "flexWrap",
+  "font-size": "fontSize",
+  "font-style": "fontStyle",
+  "font-weight": "fontWeight",
+  gap: "gap",
+  height: "height",
+  "justify-content": "justifyContent",
+  left: "left",
+  "letter-spacing": "letterSpacing",
+  "line-height": "lineHeight",
+  margin: "margin",
+  "margin-bottom": "marginBottom",
+  "margin-left": "marginLeft",
+  "margin-right": "marginRight",
+  "margin-top": "marginTop",
+  "max-height": "maxHeight",
+  "max-width": "maxWidth",
+  "min-height": "minHeight",
+  "min-width": "minWidth",
+  opacity: "opacity",
+  overflow: "overflow",
+  padding: "padding",
+  "padding-bottom": "paddingBottom",
+  "padding-left": "paddingLeft",
+  "padding-right": "paddingRight",
+  "padding-top": "paddingTop",
+  position: "position",
+  right: "right",
+  "text-align": "textAlign",
+  "text-decoration-line": "textDecorationLine",
+  "text-transform": "textTransform",
+  top: "top",
+  width: "width",
+  "z-index": "zIndex"
+};
+var logicalProperties = {
+  "inset-inline": ["left", "right"],
+  "margin-block": ["marginTop", "marginBottom"],
+  "margin-inline": ["marginLeft", "marginRight"],
+  "padding-block": ["paddingTop", "paddingBottom"],
+  "padding-inline": ["paddingLeft", "paddingRight"]
+};
+function create(styles, options = {}) {
+  const records = compileStyleRecords(styles, { theme: options.theme });
+  const theme = parseTheme(options.theme);
+  return Object.fromEntries(
+    Object.entries(records.candidates).map(([name, candidates]) => [
+      name,
+      { $$cssx: 3, style: compileCandidates(candidates, theme, options.platform) }
+    ])
+  );
+}
+function props(...inputs) {
+  const styles = [];
+  visitStyles(inputs, styles);
+  return { style: mergeStyles(styles) };
+}
+function sx(...inputs) {
+  const styles = [];
+  for (const input of inputs) {
+    if (typeof input === "string") {
+      styles.push(create({ value: input }).value.style);
+    } else {
+      visitStyles([input], styles);
+    }
+  }
+  return mergeStyles(styles);
+}
+function visitStyles(inputs, output) {
+  for (const input of inputs) {
+    if (!input) {
+      continue;
+    }
+    if (isNativeStyleArray(input)) {
+      visitStyles(input, output);
+      continue;
+    }
+    if (typeof input !== "object" || input.$$cssx !== 3) {
+      throw new Error("cssx.props() received an object that was not compiled by CSSX for React Native.");
+    }
+    output.push(input.style);
+  }
+}
+function isNativeStyleArray(input) {
+  return Array.isArray(input);
+}
+function mergeStyles(styles) {
+  const output = {};
+  for (const style of styles) {
+    for (const [property, value] of Object.entries(style)) {
+      if (property === "transform" && Array.isArray(output.transform) && Array.isArray(value)) {
+        output.transform = [...output.transform, ...value];
+      } else {
+        output[property] = value;
+      }
+    }
+  }
+  return output;
+}
+function compileCandidates(candidates, theme, platform) {
+  const style = {};
+  for (const source of candidates) {
+    const candidate = platformCandidate(source, platform);
+    if (candidate === null) {
+      continue;
+    }
+    const recipe = describeUtilityRecipe(candidate, theme);
+    for (const atom of recipe.atoms) {
+      for (const declaration of atom) {
+        appendDeclaration(style, candidate, declaration);
+      }
+    }
+  }
+  return style;
+}
+function platformCandidate(source, platform) {
+  const match = /^(ios|android):(.*)$/.exec(source);
+  if (match) {
+    return match[1] === platform ? match[2] : null;
+  }
+  if (!source.startsWith("[") && source.includes(":")) {
+    throw new Error(`CSSX React Native cannot represent the variant in "${source}".`);
+  }
+  return source;
+}
+function appendDeclaration(style, candidate, declaration) {
+  if (declaration.selectorSuffix || declaration.atRule) {
+    throw new Error(`CSSX React Native cannot represent browser-only utility "${candidate}".`);
+  }
+  if (appendCustomTransform(style, declaration.property, declaration.value, candidate)) {
+    return;
+  }
+  if (appendTransform(style, declaration.property, declaration.value)) {
+    return;
+  }
+  const logical = logicalProperties[declaration.property];
+  if (logical) {
+    const value2 = nativeValue(declaration.value, candidate);
+    for (const property2 of logical) {
+      style[property2] = value2;
+    }
+    return;
+  }
+  const property = propertyNames[declaration.property];
+  if (!property) {
+    throw new Error(
+      `CSSX React Native cannot represent "${candidate}" because ${declaration.property} is browser-only.`
+    );
+  }
+  const value = nativeValue(declaration.value, candidate);
+  if (property === "display" && value !== "flex" && value !== "none") {
+    throw new Error(`CSSX React Native cannot represent display value "${String(value)}" from "${candidate}".`);
+  }
+  if (property === "overflow" && value !== "visible" && value !== "hidden") {
+    throw new Error(`CSSX React Native cannot represent overflow value "${String(value)}" from "${candidate}".`);
+  }
+  if (property === "flex" && typeof value === "string") {
+    style[property] = Number.parseFloat(value);
+    return;
+  }
+  style[property] = value;
+}
+function appendTransform(style, property, value) {
+  if ((property === "translate" || property === "rotate" || property === "scale") && value.includes("var(")) {
+    return true;
+  }
+  let transforms;
+  if (property === "translate") {
+    const [x = "0", y = "0"] = value.split(" ");
+    transforms = [{ translateX: nativeValue(x, "translate") }, { translateY: nativeValue(y, "translate") }];
+  } else if (property === "rotate") {
+    transforms = [{ rotate: value }];
+  } else if (property === "scale") {
+    const [x = "1", y = x] = value.split(" ");
+    transforms = [{ scaleX: Number(x) }, { scaleY: Number(y) }];
+  }
+  if (!transforms) {
+    return false;
+  }
+  style.transform = [...style.transform ?? [], ...transforms];
+  return true;
+}
+function appendCustomTransform(style, property, value, candidate) {
+  const transformProperty = {
+    "--cssx-rotate": "rotate",
+    "--cssx-scale-x": "scaleX",
+    "--cssx-scale-y": "scaleY",
+    "--cssx-translate-x": "translateX",
+    "--cssx-translate-y": "translateY"
+  };
+  const nativeProperty = transformProperty[property];
+  if (!nativeProperty) {
+    return false;
+  }
+  const native = nativeValue(value, candidate);
+  style.transform = [
+    ...style.transform ?? [],
+    { [nativeProperty]: native }
+  ];
+  return true;
+}
+function nativeValue(value, candidate) {
+  const important = value.endsWith(" !important") ? value.slice(0, -11) : value;
+  const calculation = /^calc\((-?[\d.]+)rem \* (-?[\d.]+)\)$/.exec(important);
+  if (calculation) {
+    return Number(calculation[1]) * 16 * Number(calculation[2]);
+  }
+  const rem = /^(-?[\d.]+)rem$/.exec(important);
+  if (rem) {
+    return Number(rem[1]) * 16;
+  }
+  const pixels = /^(-?[\d.]+)px$/.exec(important);
+  if (pixels) {
+    return Number(pixels[1]);
+  }
+  if (/^-?[\d.]+$/.test(important)) {
+    return Number(important);
+  }
+  if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
+    return important;
+  }
+  if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
+    throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
+  }
+  return important;
+}
+
+export {
+  create,
+  props,
+  sx
+};

package/dist/index.cjs

@@ -0,0 +1,290 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  create: () => create,
+  props: () => props,
+  sx: () => sx
+});
+module.exports = __toCommonJS(index_exports);
+var import_compiler = require("@cssxio/compiler");
+var propertyNames = {
+  "align-content": "alignContent",
+  "align-items": "alignItems",
+  "align-self": "alignSelf",
+  "aspect-ratio": "aspectRatio",
+  "background-color": "backgroundColor",
+  "border-bottom-color": "borderBottomColor",
+  "border-bottom-left-radius": "borderBottomLeftRadius",
+  "border-bottom-right-radius": "borderBottomRightRadius",
+  "border-bottom-width": "borderBottomWidth",
+  "border-color": "borderColor",
+  "border-left-color": "borderLeftColor",
+  "border-left-width": "borderLeftWidth",
+  "border-radius": "borderRadius",
+  "border-right-color": "borderRightColor",
+  "border-right-width": "borderRightWidth",
+  "border-style": "borderStyle",
+  "border-top-color": "borderTopColor",
+  "border-top-left-radius": "borderTopLeftRadius",
+  "border-top-right-radius": "borderTopRightRadius",
+  "border-top-width": "borderTopWidth",
+  "border-width": "borderWidth",
+  bottom: "bottom",
+  color: "color",
+  display: "display",
+  flex: "flex",
+  "flex-basis": "flexBasis",
+  "flex-direction": "flexDirection",
+  "flex-grow": "flexGrow",
+  "flex-shrink": "flexShrink",
+  "flex-wrap": "flexWrap",
+  "font-size": "fontSize",
+  "font-style": "fontStyle",
+  "font-weight": "fontWeight",
+  gap: "gap",
+  height: "height",
+  "justify-content": "justifyContent",
+  left: "left",
+  "letter-spacing": "letterSpacing",
+  "line-height": "lineHeight",
+  margin: "margin",
+  "margin-bottom": "marginBottom",
+  "margin-left": "marginLeft",
+  "margin-right": "marginRight",
+  "margin-top": "marginTop",
+  "max-height": "maxHeight",
+  "max-width": "maxWidth",
+  "min-height": "minHeight",
+  "min-width": "minWidth",
+  opacity: "opacity",
+  overflow: "overflow",
+  padding: "padding",
+  "padding-bottom": "paddingBottom",
+  "padding-left": "paddingLeft",
+  "padding-right": "paddingRight",
+  "padding-top": "paddingTop",
+  position: "position",
+  right: "right",
+  "text-align": "textAlign",
+  "text-decoration-line": "textDecorationLine",
+  "text-transform": "textTransform",
+  top: "top",
+  width: "width",
+  "z-index": "zIndex"
+};
+var logicalProperties = {
+  "inset-inline": ["left", "right"],
+  "margin-block": ["marginTop", "marginBottom"],
+  "margin-inline": ["marginLeft", "marginRight"],
+  "padding-block": ["paddingTop", "paddingBottom"],
+  "padding-inline": ["paddingLeft", "paddingRight"]
+};
+function create(styles, options = {}) {
+  const records = (0, import_compiler.compileStyleRecords)(styles, { theme: options.theme });
+  const theme = (0, import_compiler.parseTheme)(options.theme);
+  return Object.fromEntries(
+    Object.entries(records.candidates).map(([name, candidates]) => [
+      name,
+      { $$cssx: 3, style: compileCandidates(candidates, theme, options.platform) }
+    ])
+  );
+}
+function props(...inputs) {
+  const styles = [];
+  visitStyles(inputs, styles);
+  return { style: mergeStyles(styles) };
+}
+function sx(...inputs) {
+  const styles = [];
+  for (const input of inputs) {
+    if (typeof input === "string") {
+      styles.push(create({ value: input }).value.style);
+    } else {
+      visitStyles([input], styles);
+    }
+  }
+  return mergeStyles(styles);
+}
+function visitStyles(inputs, output) {
+  for (const input of inputs) {
+    if (!input) {
+      continue;
+    }
+    if (isNativeStyleArray(input)) {
+      visitStyles(input, output);
+      continue;
+    }
+    if (typeof input !== "object" || input.$$cssx !== 3) {
+      throw new Error("cssx.props() received an object that was not compiled by CSSX for React Native.");
+    }
+    output.push(input.style);
+  }
+}
+function isNativeStyleArray(input) {
+  return Array.isArray(input);
+}
+function mergeStyles(styles) {
+  const output = {};
+  for (const style of styles) {
+    for (const [property, value] of Object.entries(style)) {
+      if (property === "transform" && Array.isArray(output.transform) && Array.isArray(value)) {
+        output.transform = [...output.transform, ...value];
+      } else {
+        output[property] = value;
+      }
+    }
+  }
+  return output;
+}
+function compileCandidates(candidates, theme, platform) {
+  const style = {};
+  for (const source of candidates) {
+    const candidate = platformCandidate(source, platform);
+    if (candidate === null) {
+      continue;
+    }
+    const recipe = (0, import_compiler.describeUtilityRecipe)(candidate, theme);
+    for (const atom of recipe.atoms) {
+      for (const declaration of atom) {
+        appendDeclaration(style, candidate, declaration);
+      }
+    }
+  }
+  return style;
+}
+function platformCandidate(source, platform) {
+  const match = /^(ios|android):(.*)$/.exec(source);
+  if (match) {
+    return match[1] === platform ? match[2] : null;
+  }
+  if (!source.startsWith("[") && source.includes(":")) {
+    throw new Error(`CSSX React Native cannot represent the variant in "${source}".`);
+  }
+  return source;
+}
+function appendDeclaration(style, candidate, declaration) {
+  if (declaration.selectorSuffix || declaration.atRule) {
+    throw new Error(`CSSX React Native cannot represent browser-only utility "${candidate}".`);
+  }
+  if (appendCustomTransform(style, declaration.property, declaration.value, candidate)) {
+    return;
+  }
+  if (appendTransform(style, declaration.property, declaration.value)) {
+    return;
+  }
+  const logical = logicalProperties[declaration.property];
+  if (logical) {
+    const value2 = nativeValue(declaration.value, candidate);
+    for (const property2 of logical) {
+      style[property2] = value2;
+    }
+    return;
+  }
+  const property = propertyNames[declaration.property];
+  if (!property) {
+    throw new Error(
+      `CSSX React Native cannot represent "${candidate}" because ${declaration.property} is browser-only.`
+    );
+  }
+  const value = nativeValue(declaration.value, candidate);
+  if (property === "display" && value !== "flex" && value !== "none") {
+    throw new Error(`CSSX React Native cannot represent display value "${String(value)}" from "${candidate}".`);
+  }
+  if (property === "overflow" && value !== "visible" && value !== "hidden") {
+    throw new Error(`CSSX React Native cannot represent overflow value "${String(value)}" from "${candidate}".`);
+  }
+  if (property === "flex" && typeof value === "string") {
+    style[property] = Number.parseFloat(value);
+    return;
+  }
+  style[property] = value;
+}
+function appendTransform(style, property, value) {
+  if ((property === "translate" || property === "rotate" || property === "scale") && value.includes("var(")) {
+    return true;
+  }
+  let transforms;
+  if (property === "translate") {
+    const [x = "0", y = "0"] = value.split(" ");
+    transforms = [{ translateX: nativeValue(x, "translate") }, { translateY: nativeValue(y, "translate") }];
+  } else if (property === "rotate") {
+    transforms = [{ rotate: value }];
+  } else if (property === "scale") {
+    const [x = "1", y = x] = value.split(" ");
+    transforms = [{ scaleX: Number(x) }, { scaleY: Number(y) }];
+  }
+  if (!transforms) {
+    return false;
+  }
+  style.transform = [...style.transform ?? [], ...transforms];
+  return true;
+}
+function appendCustomTransform(style, property, value, candidate) {
+  const transformProperty = {
+    "--cssx-rotate": "rotate",
+    "--cssx-scale-x": "scaleX",
+    "--cssx-scale-y": "scaleY",
+    "--cssx-translate-x": "translateX",
+    "--cssx-translate-y": "translateY"
+  };
+  const nativeProperty = transformProperty[property];
+  if (!nativeProperty) {
+    return false;
+  }
+  const native = nativeValue(value, candidate);
+  style.transform = [
+    ...style.transform ?? [],
+    { [nativeProperty]: native }
+  ];
+  return true;
+}
+function nativeValue(value, candidate) {
+  const important = value.endsWith(" !important") ? value.slice(0, -11) : value;
+  const calculation = /^calc\((-?[\d.]+)rem \* (-?[\d.]+)\)$/.exec(important);
+  if (calculation) {
+    return Number(calculation[1]) * 16 * Number(calculation[2]);
+  }
+  const rem = /^(-?[\d.]+)rem$/.exec(important);
+  if (rem) {
+    return Number(rem[1]) * 16;
+  }
+  const pixels = /^(-?[\d.]+)px$/.exec(important);
+  if (pixels) {
+    return Number(pixels[1]);
+  }
+  if (/^-?[\d.]+$/.test(important)) {
+    return Number(important);
+  }
+  if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
+    return important;
+  }
+  if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
+    throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
+  }
+  return important;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  create,
+  props,
+  sx
+});

package/dist/index.d.cts

@@ -0,0 +1,27 @@
+type NativePlatform = 'android' | 'ios';
+type NativeTransform = Readonly<Record<string, number | string>>;
+type NativeStyleValue = number | string | readonly NativeTransform[];
+type NativeStyle = Readonly<Record<string, NativeStyleValue>>;
+interface NativeCompilerOptions {
+    readonly platform?: NativePlatform;
+    readonly theme?: string;
+}
+interface CompiledNativeStyle {
+    readonly $$cssx: 3;
+    readonly style: NativeStyle;
+}
+type NativeStyleInput = CompiledNativeStyle | false | null | undefined | readonly NativeStyleInput[];
+type NativeSxInput = string | NativeStyleInput;
+type NativeStyleMap<T extends Readonly<Record<string, string>>> = {
+    readonly [Key in keyof T]: CompiledNativeStyle;
+};
+/** Compiles static utility maps to React Native-compatible style records. */
+declare function create<T extends Readonly<Record<string, string>>>(styles: T, options?: NativeCompilerOptions): NativeStyleMap<T>;
+/** Merges compiled native styles from left to right. */
+declare function props(...inputs: readonly NativeStyleInput[]): {
+    readonly style: NativeStyle;
+};
+/** Compiles inline utility strings and merges compiled native styles. */
+declare function sx(...inputs: readonly NativeSxInput[]): NativeStyle;
+
+export { type CompiledNativeStyle, type NativeCompilerOptions, type NativePlatform, type NativeStyle, type NativeStyleInput, type NativeStyleMap, type NativeStyleValue, type NativeSxInput, type NativeTransform, create, props, sx };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+type NativePlatform = 'android' | 'ios';
+type NativeTransform = Readonly<Record<string, number | string>>;
+type NativeStyleValue = number | string | readonly NativeTransform[];
+type NativeStyle = Readonly<Record<string, NativeStyleValue>>;
+interface NativeCompilerOptions {
+    readonly platform?: NativePlatform;
+    readonly theme?: string;
+}
+interface CompiledNativeStyle {
+    readonly $$cssx: 3;
+    readonly style: NativeStyle;
+}
+type NativeStyleInput = CompiledNativeStyle | false | null | undefined | readonly NativeStyleInput[];
+type NativeSxInput = string | NativeStyleInput;
+type NativeStyleMap<T extends Readonly<Record<string, string>>> = {
+    readonly [Key in keyof T]: CompiledNativeStyle;
+};
+/** Compiles static utility maps to React Native-compatible style records. */
+declare function create<T extends Readonly<Record<string, string>>>(styles: T, options?: NativeCompilerOptions): NativeStyleMap<T>;
+/** Merges compiled native styles from left to right. */
+declare function props(...inputs: readonly NativeStyleInput[]): {
+    readonly style: NativeStyle;
+};
+/** Compiles inline utility strings and merges compiled native styles. */
+declare function sx(...inputs: readonly NativeSxInput[]): NativeStyle;
+
+export { type CompiledNativeStyle, type NativeCompilerOptions, type NativePlatform, type NativeStyle, type NativeStyleInput, type NativeStyleMap, type NativeStyleValue, type NativeSxInput, type NativeTransform, create, props, sx };

package/dist/index.js

@@ -0,0 +1,10 @@
+import {
+  create,
+  props,
+  sx
+} from "./chunk-P3KGLFG3.js";
+export {
+  create,
+  props,
+  sx
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@cssxio/react-native",
+  "version": "0.2.0",
+  "description": "CSSX utility styling runtime and compiler transform for React Native and Expo.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./babel": {
+      "types": "./dist/babel.d.ts",
+      "import": "./dist/babel.js",
+      "require": "./dist/babel.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts src/babel.ts --format esm,cjs --dts --external @babel/core --clean"
+  },
+  "dependencies": {
+    "@cssxio/compiler": "workspace:*"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.28.0"
+  },
+  "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    }
+  }
+}