react-native-css 3.0.0-nightly.df0f885 → 3.0.0-preview.0

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-native-css",
-  "version": "3.0.0-nightly.df0f885",
+  "version": "3.0.0-preview.0",
+  "description": "A CSS polyfill for React Native",
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -16,6 +17,17 @@
     "./types": {
       "types": "./types.d.ts"
     },
+    "./style-collection": {
+      "source": "./src/runtime/native/style-collection/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/style-collection/index.d.ts",
+        "default": "./dist/module/style-collection/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/style-collection/index.d.ts",
+        "default": "./dist/commonjs/style-collection/index.js"
+      }
+    },
     "./metro": {
       "source": "./src/metro/index.ts",
       "import": {
@@ -104,7 +116,7 @@
     "prepare": "bob build",
     "prepublishOnly": "bob build",
     "release": "release-it --config ./.config/release-it.config.ts",
-    "release:nightly": "release-it --config ./.config/release-it.config.ts 3.0.0-nightly.\"$(git rev-parse --short HEAD)\" --npm.tag=beta",
+    "release:nightly": "release-it --config ./.config/release-it.nightly.config.ts 3.0.0-nightly.\"$(git rev-parse --short HEAD)\" --npm.tag=nightly && git restore :/",
     "start": "yarn example start",
     "start:build": "yarn build && yarn example build",
     "start:debug": "yarn build && yarn example debug",
@@ -141,57 +153,61 @@
     "!**/__mocks__"
   ],
   "dependencies": {
+    "@expo/metro-runtime": "~6.1.1",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "colorjs.io": "0.6.0-alpha.1",
     "comment-json": "^4.2.5",
     "debug": "^4.4.1"
   },
   "peerDependencies": {
-    "expo": "54.0.0-canary-20250713-8f814f8",
+    "expo": "54.0.0-preview.6",
     "lightningcss": ">=1.27.0",
     "react": "19.1.0",
-    "react-native": "0.80.1"
+    "react-native": "0.81.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.30.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
-    "@testing-library/react-native": "^13.2.0",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@testing-library/react-native": "^13.3.3",
     "@tsconfig/react-native": "^3.0.6",
     "@types/babel__core": "^7",
     "@types/connect": "^3.4.38",
     "@types/debug": "^4.1.12",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.1.10",
     "@types/react-refresh": "^0",
     "@types/react-test-renderer": "^19",
     "babel-plugin-tester": "^12.0.0",
-    "babel-preset-expo": "13.3.0-canary-20250713-8f814f8",
+    "babel-preset-expo": "14.0.2",
     "commitlint": "^19.8.1",
     "eas-build-cache-provider": "^16.4.2",
     "eslint": "^9.30.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.1",
-    "expo": "54.0.0-canary-20250713-8f814f8",
+    "expo": "54.0.0-preview.6",
     "jest": "^29.7.0",
-    "jest-expo": "54.0.0-canary-20250713-8f814f8",
+    "jest-expo": "54.0.2",
     "lefthook": "^1.12.2",
     "lightningcss": "^1.30.1",
     "metro-runtime": "^0.83.0",
+    "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "19.1.0",
-    "react-native": "0.80.1",
+    "react-native": "0.81.0",
     "react-native-builder-bob": "^0.40.13",
-    "react-native-reanimated": "4.0.1",
-    "react-native-safe-area-context": "5.4.0",
+    "react-native-reanimated": "4.0.2",
+    "react-native-safe-area-context": "5.6.1",
     "react-native-worklets": "0.4.1",
     "react-refresh": "^0.17.0",
     "react-test-renderer": "^19.1.0",
     "release-it": "^19.0.4",
-    "tailwindcss": "^4.1.11",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.37.0"
+    "tailwindcss": "^4.1.12",
+    "tailwindcss-safe-area": "^1.1.0",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.40.0"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/compiler/atRules.ts

@@ -79,7 +79,16 @@ function isPropAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
 }
 
 export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
-  const mapping: StyleRuleMapping = {};
+  // Include any default mapping here
+  const mapping: StyleRuleMapping = {
+    "caret-color": ["cursorColor"],
+    "fill": ["fill"],
+    "stroke": ["stroke"],
+    "stroke-width": ["strokeWidth"],
+    "-webkit-line-clamp": ["numberOfLines"],
+    "-rn-ripple-color": ["android_ripple", "color"],
+    "-rn-ripple-style": ["android_ripple", "borderless"],
+  };
 
   if (!rules) return mapping;
 
@@ -120,7 +129,7 @@ function propAtRuleBlock(
     return item.value.type === "colon";
   });
 
-  if (!from || from.length !== 1 || !to) {
+  if (!from || from.length !== 1) {
     return mapping;
   }
 
@@ -129,10 +138,15 @@ function propAtRuleBlock(
     return mapping;
   }
 
+  if (!to) {
+    mapping["*"] = toRNProperty(fromToken.value.value);
+    return mapping;
+  }
+
   mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":
-        return index === 0 && item.value.value === "^" ? ["^"] : [];
+        return index === 0 && item.value.value === "*" ? ["*"] : [];
       case "ident":
         return [toRNProperty(item.value.value)];
       default:

package/src/compiler/compiler.ts

@@ -19,8 +19,8 @@ import { parseContainerCondition } from "./container-query";
 import { parseDeclaration } from "./declarations";
 import { extractKeyFrames } from "./keyframes";
 import { parseMediaQuery } from "./media-query";
-import { getSelectors } from "./selectors";
 import { StylesheetBuilder } from "./stylesheet";
+import { supportsConditionValid } from "./supports";
 
 const defaultLogger = debug("react-native-css:compiler");
 
@@ -105,9 +105,10 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   // Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
   lightningcss({
-    filename: "style.css", // This is ignored, but required
     code: typeof code === "string" ? new TextEncoder().encode(code) : code,
     visitor,
+    filename: options.filename ?? "style.css",
+    projectRoot: options.projectRoot ?? process.cwd(),
   });
 
   return {
@@ -165,14 +166,9 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
 
       const declarationBlock = value.declarations;
       const mapping = parsePropAtRule(value.rules);
-      const selectors = getSelectors(
-        value.selectors,
-        false,
-        builder.getOptions(),
-      );
 
       // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
-      builder = builder.fork("style", selectors);
+      builder = builder.fork("style", value.selectors);
 
       if (declarationBlock) {
         if (declarationBlock.declarations) {
@@ -205,6 +201,13 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
         extractRule(layerRule, builder);
       }
       break;
+    case "supports":
+      if (supportsConditionValid(rule.value.condition)) {
+        for (const layerRule of rule.value.rules) {
+          extractRule(layerRule, builder);
+        }
+      }
+      break;
     case "custom":
     case "font-face":
     case "font-palette-values":
@@ -217,7 +220,6 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     case "unknown":
     case "import":
     case "page":
-    case "supports":
     case "counter-style":
     case "moz-document":
     case "nesting":
@@ -293,7 +295,7 @@ function extractContainer(
   };
 
   if (containerRule.name) {
-    query.n = containerRule.name;
+    query.n = `c:${containerRule.name}`;
   }
 
   builder.addContainerQuery(query);

package/src/compiler/compiler.types.ts

@@ -5,8 +5,9 @@ import type { MediaFeatureNameFor_MediaFeatureId } from "lightningcss";
 import { VAR_SYMBOL } from "../runtime/native/reactivity";
 
 export interface CompilerOptions {
+  filename?: string;
+  projectRoot?: string;
   inlineRem?: number | false;
-  grouping?: (string | RegExp)[];
   selectorPrefix?: string;
   stylesheetOrder?: number;
   features?: FeatureFlagRecord;
@@ -23,9 +24,7 @@ export interface CompilerOptions {
 /**
  * A `react-native-css` StyleSheet
  */
-export type ReactNativeCssStyleSheet = ReactNativeCssStyleSheet_V2;
-
-export interface ReactNativeCssStyleSheet_V2 {
+export interface ReactNativeCssStyleSheet {
   /** Feature flags */
   f?: FeatureFlagRecord;
   /** rem */
@@ -33,7 +32,7 @@ export interface ReactNativeCssStyleSheet_V2 {
   /** StyleRuleSets */
   s?: (readonly [string, StyleRuleSet])[];
   /** KeyFrames */
-  k?: Animation_V2[];
+  k?: Animation[];
   /** Root Variables */
   vr?: RootVariables;
   /** Universal Variables */
@@ -99,10 +98,8 @@ export type StyleDeclaration =
   | Record<string, StyleDescriptor>
   /** A style that needs to be set  */
   | [StyleDescriptor, string | string[]]
-  /** A value that can only be computed at runtime */
-  | [StyleFunction, string | string[]]
   /** A value that can only be computed at runtime, and only after styles have been calculated */
-  | [StyleFunction, string | string[], 1];
+  | [StyleDescriptor, string | string[], 1];
 
 export type StyleDescriptor =
   | string
@@ -159,11 +156,11 @@ export type InlineVariable = {
   [key: string]: unknown | undefined;
 };
 
-/******************************   Animations V2  ******************************/
+/******************************   Animations  ******************************/
 
-export type Animation_V2 = [string, AnimationKeyframes_V2[]];
-export type AnimationRecord = Record<string, AnimationKeyframes_V2[]>;
-export type AnimationKeyframes_V2 = [string | number, StyleDeclaration[]];
+export type Animation = [string, AnimationKeyframes[]];
+export type AnimationRecord = Record<string, AnimationKeyframes[]>;
+export type AnimationKeyframes = [string | number, StyleDeclaration[]];
 
 /******************************    Conditions    ******************************/
 
@@ -179,7 +176,7 @@ export type MediaCondition =
   // Comparison
   | [
       MediaFeatureComparison,
-      MediaFeatureNameFor_MediaFeatureId | MediaFeatureNameFor_MediaFeatureId,
+      MediaFeatureNameFor_MediaFeatureId | "dir",
       StyleDescriptor,
     ]
   // [Start, End]
@@ -258,7 +255,7 @@ export type LoggerOptions = {
 export interface CompilerCollection extends CompilerOptions {
   features: FeatureFlagRecord;
   rules: Map<string, StyleRule[]>;
-  keyframes: Map<string, AnimationKeyframes_V2[]>;
+  keyframes: Map<string, AnimationKeyframes[]>;
   darkMode?: string | null;
   rootVariables: VariableRecord;
   universalVariables: VariableRecord;