react-native-css 3.0.0-preview.2 → 3.0.0-preview.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-css",
-  "version": "3.0.0-preview.2",
+  "version": "3.0.0-preview.4",
   "description": "A CSS polyfill for React Native",
   "exports": {
     ".": {
@@ -14,40 +14,48 @@
         "default": "./dist/commonjs/index.js"
       }
     },
-    "./types": {
-      "types": "./types.d.ts"
+    "./compiler": {
+      "source": "./src/compiler/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/compiler/index.d.ts",
+        "default": "./dist/module/compiler/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
+        "default": "./dist/commonjs/compiler/index.js"
+      }
     },
-    "./style-collection": {
-      "source": "./src/runtime/native/style-collection/index.ts",
+    "./babel": {
+      "source": "./src/babel/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/style-collection/index.d.ts",
-        "default": "./dist/module/style-collection/index.js"
+        "types": "./dist/typescript/module/src/babel/index.d.ts",
+        "default": "./dist/module/babel/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/style-collection/index.d.ts",
-        "default": "./dist/commonjs/style-collection/index.js"
+        "types": "./dist/typescript/commonjs/src/babel/index.d.ts",
+        "default": "./dist/commonjs/babel/index.js"
       }
     },
-    "./metro": {
-      "source": "./src/metro/index.ts",
+    "./components": {
+      "source": "./src/components/index.cts",
+      "types": "./src/components/index.d.ts",
       "import": {
-        "types": "./dist/typescript/module/src/metro/index.d.ts",
-        "default": "./dist/module/metro/index.js"
+        "default": "./dist/module/components/index.cjs"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
-        "default": "./dist/commonjs/metro/index.js"
+        "default": "./dist/commonjs/components/index.cjs"
       }
     },
-    "./compiler": {
-      "source": "./src/compiler/index.ts",
+    "./components/*": {
+      "source": "./src/components/*.ts",
+      "react-native": "./src/components/*.tsx",
       "import": {
-        "types": "./dist/typescript/module/src/compiler/index.d.ts",
-        "default": "./dist/module/compiler/index.js"
+        "types": "./dist/typescript/module/src/components/*.d.ts",
+        "default": "./dist/module/components/*.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
-        "default": "./dist/commonjs/compiler/index.js"
+        "types": "./dist/typescript/commonjs/src/components/*.d.ts",
+        "default": "./dist/commonjs/components/*.js"
       }
     },
     "./jest": {
@@ -62,49 +70,73 @@
         "default": "./dist/commonjs/jest/index.js"
       }
     },
-    "./babel": {
-      "source": "./src/babel/index.ts",
+    "./metro": {
+      "source": "./src/metro/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/babel/index.d.ts",
-        "default": "./dist/module/babel/index.js"
+        "types": "./dist/typescript/module/src/metro/index.d.ts",
+        "default": "./dist/module/metro/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/babel/index.d.ts",
-        "default": "./dist/commonjs/babel/index.js"
+        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
+        "default": "./dist/commonjs/metro/index.js"
       }
     },
-    "./components": {
-      "source": "./src/components/index.ts",
-      "react-native": "./src/components/index.tsx",
+    "./native": {
+      "source": "./src/native/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/components/index.d.ts",
-        "default": "./dist/module/components/index.js"
+        "types": "./dist/typescript/module/src/native/index.d.ts",
+        "default": "./dist/module/native/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/components/index.d.ts",
-        "default": "./dist/commonjs/components/index.js"
+        "types": "./dist/typescript/commonjs/src/native/index.d.ts",
+        "default": "./dist/commonjs/native/index.js"
       }
     },
-    "./components/*": {
-      "source": "./src/components/*.ts",
-      "react-native": "./src/components/*.tsx",
+    "./native-internal": {
+      "source": "./src/native-internal/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/components/*.d.ts",
-        "default": "./dist/module/components/*.js"
+        "types": "./dist/typescript/module/src/native-internal/index.d.ts",
+        "default": "./dist/module/native-internal/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/components/*.d.ts",
-        "default": "./dist/commonjs/components/*.js"
+        "types": "./dist/typescript/commonjs/src/native-internal/index.d.ts",
+        "default": "./dist/commonjs/native-internal/index.js"
+      }
+    },
+    "./package.json": "./package.json",
+    "./types": {
+      "types": "./types.d.ts"
+    },
+    "./utilities": {
+      "source": "./src/utilities/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/utilities/index.d.ts",
+        "default": "./dist/module/utilities/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/utilities/index.d.ts",
+        "default": "./dist/commonjs/utilities/index.js"
       }
     },
-    "./package.json": "./package.json"
+    "./web": {
+      "source": "./src/web/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/web/index.d.ts",
+        "default": "./dist/module/web/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/web/index.d.ts",
+        "default": "./dist/commonjs/web/index.js"
+      }
+    }
   },
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
   "types": "./dist/typescript/commonjs/src/index.d.ts",
   "workspaces": [
     "example",
-    "configs"
+    "configs",
+    "."
   ],
   "scripts": {
     "build": "bob build",
@@ -152,56 +184,53 @@
     "!**/__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-preview.13",
-    "lightningcss": ">=1.27.0",
-    "react": "19.1.0",
-    "react-native": "0.81.0"
+    "@expo/metro-config": ">=54",
+    "react": ">=19",
+    "react-native": ">=0.81"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.30.1",
+    "@expo/metro-config": "~54.0.5",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
     "@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.10",
-    "@types/react-refresh": "^0",
     "@types/react-test-renderer": "^19",
     "babel-plugin-tester": "^12.0.0",
-    "babel-preset-expo": "~14.0.6",
+    "babel-preset-expo": "~54.0.3",
     "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-preview.13",
+    "expo": "54.0.10",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.7",
+    "jest-expo": "~54.0.12",
     "lefthook": "^1.12.3",
     "lightningcss": "^1.30.1",
     "metro-runtime": "^0.83.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "19.1.0",
-    "react-native": "0.81.1",
+    "react-native": "0.81.4",
     "react-native-builder-bob": "^0.40.13",
     "react-native-reanimated": "~4.1.0",
     "react-native-safe-area-context": "5.6.1",
     "react-native-worklets": "~0.5.0",
     "react-refresh": "^0.17.0",
-    "react-test-renderer": "^19.1.0",
+    "react-test-renderer": "19.1.0",
     "release-it": "^19.0.4",
     "tailwindcss": "^4.1.12",
     "tailwindcss-safe-area": "^1.1.0",

package/src/compiler/atRules.ts

@@ -37,45 +37,21 @@ export interface ReactNativeAtRule {
 
 export function maybeMutateReactNativeOptions(
   rule: Rule | ReactNativeAtRule,
-  builder: StylesheetBuilder,
+  _builder: StylesheetBuilder,
 ) {
   if (rule.type !== "custom" || rule.value?.name !== "react-native") {
     return;
   }
 
-  const { declarations } = rule.value.body.value;
-  if (!declarations) return;
-
-  for (const declaration of declarations) {
-    if (declaration.property !== "custom") continue;
-
-    switch (declaration.value.name) {
-      case "preserve-variables": {
-        declaration.value.value.forEach((token) => {
-          if (token.type !== "dashed-ident") {
-            return;
-          }
-
-          if (token.value !== "true" && token.value !== "false") {
-            return;
-          }
-
-          builder.setOptions("preserveVariables", token.value === "true");
-        });
-        break;
-      }
-      default:
-        break;
-    }
-  }
+  // TODO: Add inline options
 }
 
 /***********************************************
- * @prop                                       *
+ * @nativeMapping                                       *
  ***********************************************/
 
-function isPropAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
-  return rule.type === "unknown" && rule.value.name === "prop";
+function isNativeMappingAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
+  return rule.type === "unknown" && rule.value.name === "nativeMapping";
 }
 
 export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
@@ -95,14 +71,14 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   if (!rules) return mapping;
 
   for (const rule of rules) {
-    if (!isPropAtRule(rule)) continue;
+    if (!isNativeMappingAtRule(rule)) continue;
 
     if (rule.value.prelude.length > 0) {
       const prelude = rule.value.prelude.filter((item) => {
         return item.value.type !== "white-space";
       });
 
-      propAtRuleBlock(prelude, mapping);
+      nativeMappingAtRuleBlock(prelude, mapping);
     } else if (rule.value.block) {
       // Remove all whitespace tokens
       const blocks = rule.value.block.filter((item) => {
@@ -115,7 +91,7 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
       });
 
       for (const block of blockRules) {
-        propAtRuleBlock(block, mapping);
+        nativeMappingAtRuleBlock(block, mapping);
       }
     }
   }
@@ -123,38 +99,51 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   return mapping;
 }
 
-function propAtRuleBlock(
+function nativeMappingAtRuleBlock(
   token: Extract<TokenOrValue, { type: "token" }>[],
   mapping: StyleRuleMapping = {},
 ): StyleRuleMapping {
-  const [from, to] = splitByDelimiter(token, (item) => {
+  let [from, to] = splitByDelimiter(token, (item) => {
     return item.value.type === "colon";
   });
 
-  if (!from || from.length !== 1) {
-    return mapping;
+  // @nativeMapping <to>; (has no from value)
+  if (!to) {
+    to = from;
+    from = [
+      {
+        type: "token",
+        value: { type: "ident", value: "*" },
+      },
+    ];
   }
 
-  const fromToken = from[0];
-  if (!fromToken || fromToken.value.type !== "ident") {
+  // We can only map from a single property
+  if (!from || from.length !== 1 || !to) {
     return mapping;
   }
 
-  if (!to) {
-    mapping["*"] = toRNProperty(fromToken.value.value);
+  const fromToken = from[0];
+  if (!fromToken || fromToken.value.type !== "ident") {
     return mapping;
   }
 
-  mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
+  let value: string | string[] = 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)];
+        return item.value.value.split(".").map((part) => toRNProperty(part));
       default:
         return [];
     }
   });
 
+  if (value.length === 2 && value[0] === "&" && value[1]) {
+    value = value[1];
+  }
+
+  mapping[toRNProperty(fromToken.value.value)] = value;
+
   return mapping;
 }

package/src/compiler/compiler.ts

@@ -3,21 +3,26 @@ import { inspect } from "node:util";
 
 import { debug } from "debug";
 import {
-  transform as lightningcss,
   type ContainerRule,
   type MediaQuery as CSSMediaQuery,
   type CustomAtRules,
   type MediaRule,
   type Rule,
-  type TokenOrValue,
   type Visitor,
 } from "lightningcss";
 
 import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
-import type { CompilerOptions, ContainerQuery } from "./compiler.types";
+import type {
+  CompilerOptions,
+  ContainerQuery,
+  StyleRuleMapping,
+  UniqueVarInfo,
+} from "./compiler.types";
 import { parseContainerCondition } from "./container-query";
-import { parseDeclaration } from "./declarations";
+import { parseDeclaration, round } from "./declarations";
+import { inlineVariables } from "./inline-variables";
 import { extractKeyFrames } from "./keyframes";
+import { lightningcssLoader } from "./lightningcss-loader";
 import { parseMediaQuery } from "./media-query";
 import { StylesheetBuilder } from "./stylesheet";
 import { supportsConditionValid } from "./supports";
@@ -33,6 +38,7 @@ const defaultLogger = debug("react-native-css:compiler");
  */
 export function compile(code: Buffer | string, options: CompilerOptions = {}) {
   const { logger = defaultLogger } = options;
+
   const isLoggerEnabled =
     "enabled" in logger ? logger.enabled : Boolean(logger);
 
@@ -52,7 +58,85 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   const builder = new StylesheetBuilder(options);
 
-  logger(`Start lightningcss`);
+  const { lightningcss, Features } = lightningcssLoader();
+
+  logger(`Lightningcss first pass`);
+
+  /**
+   * Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
+   *
+   * devongovett on Aug 20, 2023
+   * > calc simplification happens during the initial parse phase, which is before custom visitors run. Currently there is not an additional simplification pass done after transforms, resulting in the output you see here.
+   * https://github.com/parcel-bundler/lightningcss/issues/554#issuecomment-1685143494
+   *
+   * Due to the above issue, we run lightningcss twice
+   */
+
+  const vars = new Map<string, UniqueVarInfo>();
+
+  const firstPassVisitor: Visitor<CustomAtRules> = {};
+
+  if (options.inlineRem !== false) {
+    firstPassVisitor.Length = (length) => {
+      if (length.unit !== "rem" || options.inlineRem === false) {
+        return length;
+      }
+
+      return {
+        unit: "px",
+        value: round(length.value * (options.inlineRem ?? 14)),
+      };
+    };
+  }
+
+  if (options.inlineVariables !== false) {
+    const exclusionList: string[] = options.inlineVariables?.exclude ?? [];
+
+    firstPassVisitor.Declaration = (decl) => {
+      if (
+        decl.property === "custom" &&
+        decl.value.name.startsWith("--") &&
+        !exclusionList.includes(decl.value.name)
+      ) {
+        const entry = vars.get(decl.value.name) ?? {
+          count: 0,
+          value: [
+            ...decl.value.value,
+            { type: "token", value: { type: "white-space", value: " " } },
+          ],
+        };
+        entry.count++;
+        vars.set(decl.value.name, entry);
+      }
+    };
+    firstPassVisitor.StyleSheetExit = (sheet) => {
+      return inlineVariables(sheet, vars);
+    };
+  }
+
+  const { code: firstPass } = lightningcss({
+    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    include: Features.DoublePositionGradients | Features.ColorFunction,
+    exclude: Features.VendorPrefixes,
+    visitor: firstPassVisitor,
+    filename: options.filename ?? "style.css",
+    projectRoot: options.projectRoot ?? process.cwd(),
+  });
+
+  if (isLoggerEnabled) {
+    const MAX_LOG_SIZE = 100 * 1024; // 100KB
+    if (firstPass.length <= MAX_LOG_SIZE) {
+      logger(firstPass.toString());
+    } else {
+      logger(
+        `firstPass buffer too large to log in full (${firstPass.length} bytes). Preview: ` +
+          firstPass.subarray(0, 1024).toString() +
+          "...",
+      );
+    }
+  }
+
+  logger(`Lightningcss second pass`);
 
   const customAtRules: CustomAtRules = {
     "react-native": {
@@ -63,6 +147,7 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
   const visitor: Visitor<typeof customAtRules> = {
     Rule(rule) {
       maybeMutateReactNativeOptions(rule, builder);
+      return rule;
     },
     StyleSheetExit(sheet) {
       if (isLoggerEnabled) {
@@ -79,33 +164,12 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
       }
 
       logger(`Exiting lightningcss`);
+      return sheet;
     },
   };
 
-  if (options.stripUnusedVariables) {
-    const onVarUsage = (token: TokenOrValue) => {
-      if (token.type === "function") {
-        token.value.arguments.forEach((token) => onVarUsage(token));
-      } else if (token.type === "var") {
-        builder.varUsage.add(token.value.name.ident);
-        if (token.value.fallback) {
-          const fallbackValues = token.value.fallback;
-          fallbackValues.forEach((varObj) => onVarUsage(varObj));
-        }
-      }
-    };
-
-    visitor.Declaration = (decl) => {
-      if (decl.property === "unparsed" || decl.property === "custom") {
-        decl.value.value.forEach((token) => onVarUsage(token));
-      }
-      return decl;
-    };
-  }
-
-  // Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
   lightningcss({
-    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    code: firstPass,
     visitor,
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd(),
@@ -120,7 +184,11 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 /**
  * Extracts style declarations and animations from a given CSS rule, based on its type.
  */
-function extractRule(rule: Rule, builder: StylesheetBuilder) {
+function extractRule(
+  rule: Rule,
+  builder: StylesheetBuilder,
+  mapping: StyleRuleMapping = {},
+) {
   // Check the rule's type to determine which extraction function to call
   switch (rule.type) {
     case "keyframes": {
@@ -130,12 +198,12 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     }
     case "container": {
       // If the rule is a container, extract it with the `extractedContainer` function
-      extractContainer(rule.value, builder);
+      extractContainer(rule.value, builder, mapping);
       break;
     }
     case "media": {
       // If the rule is a media query, extract it with the `extractMedia` function
-      extractMedia(rule.value, builder);
+      extractMedia(rule.value, builder, mapping);
       break;
     }
     case "nested-declarations": {
@@ -144,7 +212,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
       const declarationBlock = value.declarations;
       if (declarationBlock) {
         if (declarationBlock.declarations?.length) {
-          builder.newNestedRule();
+          builder.newNestedRule({ mapping });
           for (const declaration of declarationBlock.declarations) {
             parseDeclaration(declaration, builder);
           }
@@ -152,7 +220,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
         }
 
         if (declarationBlock.importantDeclarations?.length) {
-          builder.newNestedRule({ important: true });
+          builder.newNestedRule({ mapping, important: true });
           for (const declaration of declarationBlock.importantDeclarations) {
             parseDeclaration(declaration, builder);
           }
@@ -165,13 +233,13 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
       const value = rule.value;
 
       const declarationBlock = value.declarations;
-      const mapping = parsePropAtRule(value.rules);
+      mapping = { ...mapping, ...parsePropAtRule(value.rules) };
 
       // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
       builder = builder.fork("style", value.selectors);
 
       if (declarationBlock) {
-        if (declarationBlock.declarations) {
+        if (declarationBlock.declarations?.length) {
           builder.newRule(mapping);
           for (const declaration of declarationBlock.declarations) {
             parseDeclaration(declaration, builder);
@@ -179,7 +247,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
           builder.applyRuleToSelectors();
         }
 
-        if (declarationBlock.importantDeclarations) {
+        if (declarationBlock.importantDeclarations?.length) {
           builder.newRule(mapping, { important: true });
           for (const declaration of declarationBlock.importantDeclarations) {
             parseDeclaration(declaration, builder);
@@ -190,7 +258,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
 
       if (value.rules) {
         for (const nestedRule of value.rules) {
-          extractRule(nestedRule, builder);
+          extractRule(nestedRule, builder, mapping);
         }
       }
 
@@ -198,13 +266,13 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     }
     case "layer-block":
       for (const layerRule of rule.value.rules) {
-        extractRule(layerRule, builder);
+        extractRule(layerRule, builder, mapping);
       }
       break;
     case "supports":
       if (supportsConditionValid(rule.value.condition)) {
         for (const layerRule of rule.value.rules) {
-          extractRule(layerRule, builder);
+          extractRule(layerRule, builder, mapping);
         }
       }
       break;
@@ -241,7 +309,11 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
  *
  * @returns undefined if no screen media queries are found in the mediaRule, else it returns the extracted styles.
  */
-function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
+function extractMedia(
+  mediaRule: MediaRule,
+  builder: StylesheetBuilder,
+  mapping: StyleRuleMapping,
+) {
   builder = builder.fork("media");
 
   // Initialize an empty array to store screen media queries
@@ -274,7 +346,7 @@ function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
 
   // Iterate over all rules in the mediaRule and extract their styles using the updated CompilerCollection
   for (const rule of mediaRule.rules) {
-    extractRule(rule, builder);
+    extractRule(rule, builder, mapping);
   }
 }
 
@@ -286,6 +358,7 @@ function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
 function extractContainer(
   containerRule: ContainerRule,
   builder: StylesheetBuilder,
+  mapping: StyleRuleMapping,
 ) {
   builder = builder.fork("container");
 
@@ -301,6 +374,6 @@ function extractContainer(
   builder.addContainerQuery(query);
 
   for (const rule of containerRule.rules) {
-    extractRule(rule, builder);
+    extractRule(rule, builder, mapping);
   }
 }