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

package/dist/typescript/module/src/utilities/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./specificity";
+export * from "./style-descriptor";
+export * from "./dot-notation.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/src/utilities/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/typescript/module/src/utilities/specificity.d.ts

@@ -0,0 +1,13 @@
+import type { SpecificityArray, StyleRule } from "../compiler";
+import type { InlineStyleRecord } from "../runtime.types";
+export declare const Specificity: {
+    Order: number;
+    ClassName: number;
+    Important: number;
+    Inline: number;
+    PseudoElements: number;
+    PseudoClass: number;
+};
+export declare const inlineSpecificity: SpecificityArray;
+export declare const specificityCompareFn: (a: StyleRule | InlineStyleRecord, b: StyleRule | InlineStyleRecord) => number;
+//# sourceMappingURL=specificity.d.ts.map

package/dist/typescript/module/src/utilities/specificity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"specificity.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/specificity.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,eAAO,MAAM,WAAW;;;;;;;CASvB,CAAC;AAQF,eAAO,MAAM,iBAAiB,EAAE,gBAAqB,CAAC;AAGtD,eAAO,MAAM,oBAAoB,GAC/B,GAAG,SAAS,GAAG,iBAAiB,EAChC,GAAG,SAAS,GAAG,iBAAiB,WAkBjC,CAAC"}

package/dist/typescript/module/src/utilities/style-descriptor.d.ts

@@ -0,0 +1,4 @@
+import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
+export declare function isStyleDescriptorArray(value: unknown): value is StyleDescriptor[];
+export declare function isStyleFunction(value: StyleDescriptor): value is StyleFunction;
+//# sourceMappingURL=style-descriptor.d.ts.map

package/dist/typescript/module/src/utilities/style-descriptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-descriptor.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/style-descriptor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEhF,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,OAAO,GACb,KAAK,IAAI,eAAe,EAAE,CAO5B;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,aAAa,CAQxB"}

package/dist/typescript/module/src/web/api.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps, type PropsWithChildren } from "react";
+import type { ColorScheme, Props, StyledConfiguration, StyledOptions, StyledProps } from "react-native-css";
+import type { ReactComponent } from "../runtime.types";
+export declare const styled: <const C extends ReactComponent, const M extends StyledConfiguration<C>>(baseComponent: C, mapping: M, _options?: StyledOptions) => (props: StyledProps<ComponentProps<C>, M>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const useCssElement: <C extends ReactComponent>(component: C, incomingProps: Props, mapping: StyledConfiguration<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const colorScheme: ColorScheme;
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
+export declare function vars(variables: Record<string, string | number>): Record<string, string>;
+export declare function VariableContextProvider(props: PropsWithChildren<{
+    value: Record<`--${string}`, string | number>;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare const useNativeVariable: () => never;
+export declare const useUnstableNativeVariable: () => never;
+//# sourceMappingURL=api.d.ts.map

package/dist/typescript/module/src/web/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../src/web/api.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,mBAAmB,EACnB,aAAa,EACb,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,eAAO,MAAM,MAAM,GACjB,KAAK,CAAC,CAAC,SAAS,cAAc,EAC9B,KAAK,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAEtC,eAAe,CAAC,EAChB,SAAS,CAAC,EACV,WAAW,aAAa,MAEhB,OAAO,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,2FAGjD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,cAAc,EACpD,WAAW,CAAC,EACZ,eAAe,KAAK,EACpB,SAAS,mBAAmB,CAAC,CAAC,CAAC,2FA4BhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,0BAW9D;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;CAAE,CAAC,2CAe5E;AAED,eAAO,MAAM,iBAAiB,aAE7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAErC,CAAC"}

package/dist/typescript/module/src/web/assign-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assign-style.d.ts","sourceRoot":"","sources":["../../../../../src/web/assign-style.ts"],"names":[],"mappings":"AACA,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,EACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAqB3B"}

package/dist/typescript/module/src/web/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/web/index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,CAAC;AAEjB,mBAAmB,kBAAkB,CAAC;AACtC,cAAc,OAAO,CAAC"}

package/dist/typescript/module/src/web/metro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metro.d.ts","sourceRoot":"","sources":["../../../../../src/web/metro.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-css",
-  "version": "3.0.0-preview.2",
+  "version": "3.0.0-preview.3",
   "description": "A CSS polyfill for React Native",
   "exports": {
     ".": {
@@ -14,31 +14,6 @@
         "default": "./dist/commonjs/index.js"
       }
     },
-    "./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": {
-        "types": "./dist/typescript/module/src/metro/index.d.ts",
-        "default": "./dist/module/metro/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
-        "default": "./dist/commonjs/metro/index.js"
-      }
-    },
     "./compiler": {
       "source": "./src/compiler/index.ts",
       "import": {
@@ -50,18 +25,6 @@
         "default": "./dist/commonjs/compiler/index.js"
       }
     },
-    "./jest": {
-      "source": "./src/jest/index.ts",
-      "react-native": "./src/jest/index.ts",
-      "import": {
-        "types": "./dist/typescript/module/src/jest/index.d.ts",
-        "default": "./dist/module/jest/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
-        "default": "./dist/commonjs/jest/index.js"
-      }
-    },
     "./babel": {
       "source": "./src/babel/index.ts",
       "import": {
@@ -97,14 +60,85 @@
         "default": "./dist/commonjs/components/*.js"
       }
     },
-    "./package.json": "./package.json"
+    "./jest": {
+      "source": "./src/jest/index.ts",
+      "react-native": "./src/jest/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/jest/index.d.ts",
+        "default": "./dist/module/jest/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
+        "default": "./dist/commonjs/jest/index.js"
+      }
+    },
+    "./metro": {
+      "source": "./src/metro/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/metro/index.d.ts",
+        "default": "./dist/module/metro/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
+        "default": "./dist/commonjs/metro/index.js"
+      }
+    },
+    "./native": {
+      "source": "./src/native/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/native/index.d.ts",
+        "default": "./dist/module/native/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/native/index.d.ts",
+        "default": "./dist/commonjs/native/index.js"
+      }
+    },
+    "./native-internal": {
+      "source": "./src/native-internal/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/native-internal/index.d.ts",
+        "default": "./dist/module/native-internal/index.js"
+      },
+      "require": {
+        "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"
+      }
+    },
+    "./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,32 +186,30 @@
     "!**/__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",
+    "@expo/metro-config": ">=0.21.8",
     "lightningcss": ">=1.27.0",
     "react": "19.1.0",
-    "react-native": "0.81.0"
+    "react-native": "0.81.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.30.1",
+    "@expo/metro-config": "~0.21.11",
     "@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",
@@ -186,9 +218,9 @@
     "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.0-preview.16",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.7",
+    "jest-expo": "~54.0.8",
     "lefthook": "^1.12.3",
     "lightningcss": "^1.30.1",
     "metro-runtime": "^0.83.0",
@@ -201,7 +233,7 @@
     "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,37 +37,13 @@ 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
 }
 
 /***********************************************

package/src/compiler/compiler.ts

@@ -3,20 +3,25 @@ import { inspect } from "node:util";
 
 import { debug } from "debug";
 import {
+  Features,
   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,
+  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 { parseMediaQuery } from "./media-query";
 import { StylesheetBuilder } from "./stylesheet";
@@ -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,83 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   const builder = new StylesheetBuilder(options);
 
-  logger(`Start lightningcss`);
+  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 +145,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 +162,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(),

package/src/compiler/compiler.types.ts

@@ -1,26 +1,29 @@
 /* eslint-disable */
 import type { Debugger } from "debug";
-import type { MediaFeatureNameFor_MediaFeatureId } from "lightningcss";
+import type {
+  MediaFeatureNameFor_MediaFeatureId,
+  TokenOrValue,
+} from "lightningcss";
 
-import { VAR_SYMBOL } from "../runtime/native/reactivity";
+import { VAR_SYMBOL } from "../native/reactivity";
 
 export interface CompilerOptions {
   filename?: string;
   projectRoot?: string;
   inlineRem?: number | false;
+  inlineVariables?: false | InlineVariableOptions;
   selectorPrefix?: string;
   stylesheetOrder?: number;
   features?: FeatureFlagRecord;
   logger?: (message: string) => void | Debugger;
-  /** Strip unused variables declarations. Defaults: false */
-  stripUnusedVariables?: boolean;
-  /** @internal */
-  ignorePropertyWarningRegex?: (string | RegExp)[];
-  preserveVariables?: boolean;
   hexColors?: boolean;
   colorPrecision?: number;
 }
 
+export interface InlineVariableOptions {
+  exclude?: `--${string}`[];
+}
+
 /**
  * A `react-native-css` StyleSheet
  */
@@ -156,6 +159,12 @@ export type InlineVariable = {
   [key: string]: unknown | undefined;
 };
 
+export type UniqueVarInfo = {
+  count: number;
+  value: TokenOrValue[] | undefined;
+  flat?: true;
+};
+
 /******************************   Animations  ******************************/
 
 export type Animation = [string, AnimationKeyframes[]];