react-native-css 3.0.7 → 3.1.0-rc.0

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

@@ -1,5 +1,5 @@
-import type { SpecificityArray, StyleRule } from "../compiler";
-import type { InlineStyleRecord } from "../runtime.types";
+import type { SpecificityArray, StyleRule } from "../compiler/index.js";
+import type { InlineStyleRecord } from "../runtime.types.js";
 export declare const Specificity: {
     Order: number;
     ClassName: number;

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

@@ -1 +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"}
+{"version":3,"file":"specificity.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/specificity.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,sBAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAkB,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

@@ -1,4 +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;
+export declare function isStyleFunction(value: unknown): value is StyleFunction;
 //# sourceMappingURL=style-descriptor.d.ts.map

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

@@ -1 +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"}
+{"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,CAE5B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,aAAa,CAUtE"}

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

@@ -1,7 +1,7 @@
-import { type ComponentPropsWithRef, 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<ComponentPropsWithRef<C>, M>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { type PropsWithChildren } from "react";
+import type { ColorScheme, Props, StyledConfiguration } from "react-native-css";
+import type { ReactComponent, Styled } from "../runtime.types.js";
+export declare const styled: Styled;
 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;
 /**
@@ -10,7 +10,7 @@ export declare const colorScheme: ColorScheme;
 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;
+}>): import("react").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

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../src/web/api.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE1B,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;AAOvD,eAAO,MAAM,MAAM,GACjB,KAAK,CAAC,CAAC,SAAS,cAAc,EAC9B,KAAK,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAEtC,eAAe,CAAC,EAChB,UAAS,CAAuB,EAChC,WAAW,aAAa,MAEhB,OAAO,WAAW,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,2FAGxD,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"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../src/web/api.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,mBAAmB,EAEpB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,qBAAkB,CAAC;AAO/D,eAAO,MAAM,MAAM,EAAE,MAQpB,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,+BAe5E;AAED,eAAO,MAAM,iBAAiB,aAE7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAErC,CAAC"}

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

@@ -1 +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"}
+{"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,uBAsB3B"}

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

@@ -1,4 +1,4 @@
-import "./metro";
-export type * from "../runtime.types";
-export * from "./api";
+import "./metro.js";
+export type * from "../runtime.types.js";
+export * from "./api.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/web/index.ts"],"names":[],"mappings":"AACA,OAAO,YAAS,CAAC;AAEjB,mBAAmB,qBAAkB,CAAC;AACtC,cAAc,UAAO,CAAC"}

package/node/babel.mjs

@@ -0,0 +1,4 @@
+// Preserve the callable default export when Node loads the preset as ESM.
+import implementation from "../dist/commonjs/babel/index.js";
+
+export default implementation.default;

package/node/compiler.mjs

@@ -0,0 +1,2 @@
+// Node ESM entry for the CommonJS tooling implementation.
+export { compile } from "../dist/commonjs/compiler/index.js";

package/node/metro.mjs

@@ -0,0 +1,2 @@
+// Node ESM entry for the CommonJS tooling implementation.
+export { withReactNativeCSS } from "../dist/commonjs/metro/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-css",
-  "version": "3.0.7",
+  "version": "3.1.0-rc.0",
   "description": "Use CSS stylesheets in React Native",
   "exports": {
     ".": {
@@ -18,7 +18,7 @@
       "source": "./src/compiler/index.ts",
       "import": {
         "types": "./dist/typescript/module/src/compiler/index.d.ts",
-        "default": "./dist/module/compiler/index.js"
+        "default": "./node/compiler.mjs"
       },
       "require": {
         "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
@@ -29,7 +29,7 @@
       "source": "./src/babel/index.ts",
       "import": {
         "types": "./dist/typescript/module/src/babel/index.d.ts",
-        "default": "./dist/module/babel/index.js"
+        "default": "./node/babel.mjs"
       },
       "require": {
         "types": "./dist/typescript/commonjs/src/babel/index.d.ts",
@@ -59,6 +59,30 @@
         "default": "./dist/commonjs/components/react-native-safe-area-context.js"
       }
     },
+    "./components/copyComponentProperties": {
+      "source": "./src/components/copyComponentProperties.ts",
+      "react-native": "./src/components/copyComponentProperties.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/components/copyComponentProperties.d.ts",
+        "default": "./dist/module/components/copyComponentProperties.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/components/copyComponentProperties.d.ts",
+        "default": "./dist/commonjs/components/copyComponentProperties.js"
+      }
+    },
+    "./components/index": {
+      "source": "./src/components/index.cts",
+      "import": {
+        "default": "./dist/module/components/index.cjs",
+        "types": "./dist/typescript/module/src/components/index.d.ts"
+      },
+      "require": {
+        "default": "./dist/commonjs/components/index.cjs",
+        "types": "./dist/typescript/commonjs/src/components/index.d.ts"
+      },
+      "react-native": "./src/components/index.cts"
+    },
     "./components/*": {
       "source": "./src/components/*.tsx",
       "react-native": "./src/components/*.tsx",
@@ -87,7 +111,7 @@
       "source": "./src/metro/index.ts",
       "import": {
         "types": "./dist/typescript/module/src/metro/index.d.ts",
-        "default": "./dist/module/metro/index.js"
+        "default": "./node/metro.mjs"
       },
       "require": {
         "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
@@ -164,7 +188,7 @@
     "start": "yarn example start",
     "start:build": "yarn build && yarn example build",
     "start:debug": "yarn build && yarn example debug",
-    "test": "NODE_OPTIONS=\"${NODE_OPTIONS:-} --experimental-vm-modules\" jest",
+    "test": "jest",
     "typecheck": "tsc --noEmit"
   },
   "keywords": [
@@ -191,15 +215,18 @@
   "files": [
     "src",
     "dist",
+    "node",
     "types.d.ts",
     "!**/__tests__",
     "!**/__fixtures__",
-    "!**/__mocks__"
+    "!**/__mocks__",
+    "!**/*.test.*",
+    "!**/*.spec.*"
   ],
   "dependencies": {
     "@types/debug": "^4.1.12",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
-    "colorjs.io": "0.6.0-alpha.1",
+    "colorjs.io": "0.7.0",
     "comment-json": "^4.2.5",
     "debug": "^4.4.1"
   },
@@ -210,46 +237,48 @@
     "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",
+    "@babel/core": "^7.29.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@eslint/js": "^10.0.1",
+    "@expo/metro-config": "57.0.12",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
+    "@react-native/jest-preset": "0.86.3",
+    "@react-native/metro-config": "0.86.3",
     "@release-it/conventional-changelog": "10.0.1",
     "@tailwindcss/postcss": "^4.1.12",
     "@testing-library/react-native": "^13.3.3",
     "@tsconfig/react-native": "^3.0.6",
     "@types/babel__core": "^7",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.10",
+    "@types/react": "~19.2.0",
     "@types/react-test-renderer": "^19",
     "babel-plugin-tester": "^12.0.0",
-    "babel-preset-expo": "~54.0.3",
+    "babel-preset-expo": "57.0.11",
     "commitlint": "^20.0.0",
     "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.10",
+    "expo": "57.0.22",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.12",
-    "lefthook": "^1.12.3",
+    "jest-expo": "57.0.5",
+    "lefthook": "^2.1.5",
     "lightningcss": "^1.30.1",
-    "metro-runtime": "^0.83.0",
+    "metro-runtime": "^0.84.2",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "react": "19.1.0",
-    "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": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-worklets": "0.10.1",
     "react-refresh": "^0.17.0",
-    "react-test-renderer": "19.1.0",
-    "release-it": "^19.0.4",
+    "react-test-renderer": "19.2.3",
+    "release-it": "^20.2.1",
     "tailwindcss": "^4.1.12",
     "tailwindcss-safe-area": "^1.1.0",
-    "typescript": "^5.9.2",
+    "typescript": "~6.0.3",
     "typescript-eslint": "^8.40.0"
   },
   "react-native-builder-bob": {
@@ -268,7 +297,12 @@
           "esm": true
         }
       ],
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   },
   "packageManager": "yarn@4.9.2",

package/src/babel/import-plugin.ts

@@ -1,4 +1,4 @@
-import { resolve } from "path";
+import { basename, dirname, resolve, sep } from "path";
 
 import { type PluginObj } from "@babel/core";
 import type { Statement } from "@babel/types";
@@ -16,6 +16,7 @@ import {
 import {
   handleReactNativeWebIdentifierRequire,
   handleReactNativeWebImport,
+  handleReactNativeWebInteropRequireDefault,
   handleReactNativeWebObjectPatternRequire,
 } from "./react-native-web";
 
@@ -26,8 +27,12 @@ export default function ({
 }): PluginObj<PluginState> {
   const processed = new WeakSet();
 
-  const thisModuleDist = resolve(__dirname, "../../../dist");
-  const thisModuleSrc = resolve(__dirname, "../../../src");
+  const packageRoot = resolve(
+    __dirname,
+    basename(dirname(__dirname)) === "src" ? "../.." : "../../..",
+  );
+  const thisModuleDist = resolve(packageRoot, "dist") + sep;
+  const thisModuleSrc = resolve(packageRoot, "src") + sep;
 
   function isFromThisModule(filename: string): boolean {
     return (
@@ -94,6 +99,11 @@ export default function ({
           return;
         }
 
+        // A local function called require is not the module loader.
+        if (path.scope.getBinding("require")) {
+          return;
+        }
+
         const initArg = init.arguments.at(0);
 
         if (!initArg) {
@@ -152,10 +162,11 @@ export default function ({
           if (!source) {
             return;
           }
-          statements = handleReactNativeWebIdentifierRequire(
+          statements = handleReactNativeWebInteropRequireDefault(
             path,
             t,
             id.name,
+            init,
             source,
             state.filename,
           );

package/src/babel/react-native-web.ts

@@ -1,7 +1,8 @@
-import { resolve } from "path";
+import { dirname, resolve } from "path";
 
 import { type NodePath } from "@babel/traverse";
 import tBabelTypes, {
+  type CallExpression,
   type ImportDeclaration,
   type ObjectPattern,
   type Statement,
@@ -14,7 +15,7 @@ type BabelTypes = typeof tBabelTypes;
 
 function parseReactNativeWebSource(source: string, filename: string) {
   if (source.startsWith(".")) {
-    source = resolve(filename, source);
+    source = resolve(dirname(filename), source);
 
     const internalPath = source.split("react-native-web/dist")[1];
     if (!internalPath) {
@@ -48,6 +49,7 @@ export function handleReactNativeWebImport(
   filename: string,
 ): Statement[] | undefined {
   const { specifiers, source } = declaration;
+  if (declaration.importKind && declaration.importKind !== "value") return;
 
   const rnwSource = parseReactNativeWebSource(source.value, filename);
   if (!rnwSource) {
@@ -76,7 +78,7 @@ export function handleReactNativeWebImport(
       } else {
         statements.push(
           t.importDeclaration(
-            [t.importSpecifier(specifier.local, specifier.local)],
+            [t.importSpecifier(specifier.local, t.identifier(name))],
             t.stringLiteral(`react-native-css/components/${name}`),
           ),
         );
@@ -89,6 +91,10 @@ export function handleReactNativeWebImport(
         ),
       );
     } else {
+      if (specifier.importKind && specifier.importKind !== "value") {
+        statements.push(t.importDeclaration([specifier], source));
+        continue;
+      }
       const localName = t.isStringLiteral(specifier.imported)
         ? specifier.imported.value
         : specifier.imported.name;
@@ -158,6 +164,28 @@ export function handleReactNativeWebIdentifierRequire(
   }
 }
 
+export function handleReactNativeWebInteropRequireDefault(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: string,
+  init: CallExpression,
+  source: string,
+  filename: string,
+) {
+  const parsed = parseReactNativeWebSource(source, filename);
+  if (!parsed) return;
+
+  const wrapped = t.cloneNode(init);
+  wrapped.arguments = [
+    t.callExpression(t.identifier("require"), [t.stringLiteral(parsed.source)]),
+  ];
+  return [
+    t.variableDeclaration(path.node.kind, [
+      t.variableDeclarator(t.identifier(id), wrapped),
+    ]),
+  ];
+}
+
 export function handleReactNativeWebObjectPatternRequire(
   path: NodePath<VariableDeclaration>,
   t: BabelTypes,
@@ -180,6 +208,7 @@ export function handleReactNativeWebObjectPatternRequire(
       // We need to exit as we do not handle `const { Text, ...rest } = require('react-native-web');`
       return;
     } else if (
+      identifier.computed ||
       !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
     ) {
       // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native-web');`

package/src/babel/react-native.ts

@@ -48,6 +48,7 @@ export function handleReactNativeImport(
   filename: string,
 ): Statement[] | undefined {
   const { specifiers, source } = declaration;
+  if (declaration.importKind && declaration.importKind !== "value") return;
 
   const rnwSource = parseReactNativeSource(source.value, filename);
   if (!rnwSource) {
@@ -76,7 +77,7 @@ export function handleReactNativeImport(
       } else {
         statements.push(
           t.importDeclaration(
-            [t.importSpecifier(specifier.local, specifier.local)],
+            [t.importSpecifier(specifier.local, t.identifier(name))],
             t.stringLiteral(`react-native-css/components/${name}`),
           ),
         );
@@ -89,6 +90,10 @@ export function handleReactNativeImport(
         ),
       );
     } else {
+      if (specifier.importKind && specifier.importKind !== "value") {
+        statements.push(t.importDeclaration([specifier], source));
+        continue;
+      }
       const localName = t.isStringLiteral(specifier.imported)
         ? specifier.imported.value
         : specifier.imported.name;
@@ -180,6 +185,7 @@ export function handleReactNativeObjectPatternRequire(
       // We need to exit as we do not handle `const { Text, ...rest } = require('react-native');`
       return;
     } else if (
+      identifier.computed ||
       !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
     ) {
       // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native');`

package/src/compiler/atRules.ts

@@ -1,4 +1,5 @@
 import type {
+  Declaration,
   DeclarationBlock,
   ParsedComponent,
   Rule,
@@ -99,6 +100,49 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   return mapping;
 }
 
+const mappingProperty = "-rn-native-mapping";
+
+export function isMappingProperty(name: string) {
+  return name === mappingProperty || name.startsWith(`${mappingProperty}-`);
+}
+
+/** Declaration metadata survives the optimizer flattening nested at rules. */
+export function parsePropDeclarations(declarations: Declaration[] = []) {
+  const mapping: StyleRuleMapping = {};
+  for (const declaration of declarations) {
+    if (
+      declaration.property !== "custom" ||
+      !isMappingProperty(declaration.value.name)
+    ) {
+      continue;
+    }
+    const { name, value } = declaration.value;
+    const target = value.filter(
+      (item): item is Extract<TokenOrValue, { type: "token" }> =>
+        item.type === "token" && item.value.type !== "white-space",
+    );
+    if (target.length === 0) continue;
+    nativeMappingAtRuleBlock(
+      [
+        {
+          type: "token",
+          value: {
+            type: "ident",
+            value:
+              name === mappingProperty
+                ? "*"
+                : name.slice(mappingProperty.length + 1),
+          },
+        },
+        { type: "token", value: { type: "colon" } },
+        ...target,
+      ],
+      mapping,
+    );
+  }
+  return mapping;
+}
+
 function nativeMappingAtRuleBlock(
   token: Extract<TokenOrValue, { type: "token" }>[],
   mapping: StyleRuleMapping = {},

package/src/compiler/compiler.ts

@@ -4,7 +4,6 @@ import { inspect } from "node:util";
 import { debug } from "debug";
 import {
   type ContainerRule,
-  type MediaQuery as CSSMediaQuery,
   type CustomAtRules,
   type MediaRule,
   type ParsedComponent,
@@ -13,7 +12,11 @@ import {
   type Visitor,
 } from "lightningcss";
 
-import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
+import {
+  maybeMutateReactNativeOptions,
+  parsePropAtRule,
+  parsePropDeclarations,
+} from "./atRules";
 import type {
   CompilerOptions,
   ContainerQuery,
@@ -92,9 +95,41 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
     const css = typeof code === "string" ? code : code.toString();
     const match = css.match(/:root\s*\{[^}]*font-size:\s*([\d.]+)px/);
     effectiveRem = match?.[1] ? parseFloat(match[1]) : 14;
+    options.inlineRem = effectiveRem;
   }
 
-  const firstPassVisitor: Visitor<CustomAtRules> = {};
+  const firstPassVisitor: Visitor<CustomAtRules> = {
+    Rule(rule) {
+      if (
+        rule.type === "unknown" &&
+        ["cssInterop", "react-native"].includes(rule.value.name)
+      ) {
+        throw new Error(
+          `Unsupported @${rule.value.name} configuration. Use the compiler inlineVariables.exclude option to preserve variables, @media (prefers-color-scheme: dark) for dark mode, and React Native Appearance.setColorScheme() for manual selection.`,
+        );
+      }
+      // Reject before variable inlining can erase an unsupported condition and
+      // accidentally turn its values into unconditional declarations.
+      if (
+        rule.type === "style" &&
+        rule.value.selectors.some(
+          (selector) =>
+            selector.some(
+              (part) => part.type === "pseudo-class" && part.kind === "root",
+            ) &&
+            selector.some(
+              (part) =>
+                part.type === "class" ||
+                (part.type === "attribute" && part.name === "class"),
+            ),
+        )
+      ) {
+        throw new Error(
+          "Class-qualified :root selectors are unsupported on native. Use @media (prefers-color-scheme: dark) for dark mode, and React Native Appearance.setColorScheme() for manual selection.",
+        );
+      }
+    },
+  };
 
   if (effectiveRem !== false) {
     const remMultiplier = effectiveRem;
@@ -254,7 +289,12 @@ function extractRule(
       const value = rule.value;
 
       const declarationBlock = value.declarations;
-      mapping = { ...mapping, ...parsePropAtRule(value.rules) };
+      mapping = {
+        ...mapping,
+        ...parsePropAtRule(value.rules),
+        ...parsePropDeclarations(declarationBlock?.declarations),
+        ...parsePropDeclarations(declarationBlock?.importantDeclarations),
+      };
 
       // 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);
@@ -337,39 +377,16 @@ function extractMedia(
   builder: StylesheetBuilder,
   mapping: StyleRuleMapping,
 ) {
-  builder = builder.fork("media");
-
-  // Initialize an empty array to store screen media queries
-  const media: CSSMediaQuery[] = [];
-
-  // Iterate over all media queries in the mediaRule
+  // Comma separated queries are alternatives. Each branch inherits the outer
+  // conditions without adding its siblings as required conjunctions.
   for (const mediaQuery of mediaRule.query.mediaQueries) {
-    if (
-      // If this is only a media query
-      (mediaQuery.mediaType === "print" && mediaQuery.qualifier !== "not") ||
-      // If this is a @media not print {}
-      // We can only do this if there are no conditions, as @media not print and (min-width: 100px) could be valid
-      (mediaQuery.mediaType !== "print" &&
-        mediaQuery.qualifier === "not" &&
-        mediaQuery.condition === null)
-    ) {
+    const queryBuilder = builder.fork("media");
+    if (!parseMediaQuery(mediaQuery, queryBuilder)) {
       continue;
     }
-
-    media.push(mediaQuery);
-  }
-
-  if (media.length === 0) {
-    return;
-  }
-
-  for (const m of media) {
-    parseMediaQuery(m, builder);
-  }
-
-  // Iterate over all rules in the mediaRule and extract their styles using the updated CompilerCollection
-  for (const rule of mediaRule.rules) {
-    extractRule(rule, builder, mapping);
+    for (const rule of mediaRule.rules) {
+      extractRule(rule, queryBuilder, mapping);
+    }
   }
 }
 
@@ -386,9 +403,12 @@ function extractContainer(
   builder = builder.fork("container");
 
   // Iterate over all rules inside the containerRule and extract their styles using the updated CompilerCollection
-  const query: ContainerQuery = {
-    m: parseContainerCondition(containerRule.condition, builder),
-  };
+  const condition = parseContainerCondition(containerRule.condition, builder);
+  if (!condition) {
+    // An unsupported condition must not turn into an unconditional container.
+    return;
+  }
+  const query: ContainerQuery = { m: condition };
 
   if (containerRule.name) {
     query.n = `c:${containerRule.name}`;
@@ -438,21 +458,14 @@ function parsePropertyInitialValue(
     case "length-percentage":
       return parseLength(component.value, builder);
     case "token-list":
-      return reduceParseUnparsed(
-        component.value,
-        builder,
-        "@property",
-        false,
-      );
+      return reduceParseUnparsed(component.value, builder, "@property", false);
     case "custom-ident":
     case "literal":
       return component.value;
     case "repeated": {
       const results = component.value.components
         .map((c) => parsePropertyInitialValue(c, builder))
-        .filter(
-          (v): v is NonNullable<StyleDescriptor> => v !== undefined,
-        );
+        .filter((v): v is NonNullable<StyleDescriptor> => v !== undefined);
       // Unwrap single-child repeated values so downstream consumers get a
       // scalar instead of a 1-element array. For example, `<length>+` with
       // initial-value `10px` should produce the same shape as `<length>`.