react-native-css 0.0.0-nightly.da5ce0f → 0.0.0-nightly.df32ce3

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAe,CAAC;AAC9B,cAAc,uBAAoB,CAAC;AACnC,cAAc,yBAAsB,CAAC"}

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,7 +1,7 @@
 {
   "name": "react-native-css",
-  "version": "0.0.0-nightly.da5ce0f",
-  "description": "A CSS polyfill for React Native",
+  "version": "0.0.0-nightly.df32ce3",
+  "description": "Use CSS stylesheets in React Native",
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -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",
@@ -159,12 +183,13 @@
     "example": "yarn workspace react-native-css-example",
     "lint": "eslint",
     "prepare": "bob build",
+    "prepack": "bob build",
     "prepublishOnly": "bob build",
     "release": "release-it --config ./.config/release-it.config.ts",
     "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,14 +216,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"
   },
@@ -209,46 +238,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/debug": "^4.1.12",
     "@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": {
@@ -267,7 +298,12 @@
           "esm": true
         }
       ],
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   },
   "packageManager": "yarn@4.9.2",

package/src/babel/helpers.ts

@@ -1,3 +1,5 @@
+import { dirname, resolve, sep } from "path";
+
 import tBabelTypes, { type CallExpression } from "@babel/types";
 
 export type BabelTypes = typeof tBabelTypes;
@@ -10,7 +12,7 @@ export interface PluginOpts {
 
 export interface PluginState {
   opts?: PluginOpts;
-  filename: string;
+  filename: string | undefined;
 }
 
 export function getInteropRequireDefaultSource(
@@ -38,3 +40,8 @@ export function getInteropRequireDefaultSource(
 
   return requireArg.value;
 }
+
+// The handlers match "/"-separated package paths, and path.resolve separates with "\" on Windows
+export function resolveImportSource(filename: string, source: string): string {
+  return resolve(dirname(filename), source).split(sep).join("/");
+}

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";
 
@@ -24,10 +25,14 @@ export default function ({
 }: {
   types: BabelTypes;
 }): PluginObj<PluginState> {
-  const processed = new WeakSet();
+  const processed = new WeakSet<Statement>();
 
-  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 (
@@ -39,17 +44,19 @@ export default function ({
     name: "Rewrite react-native to react-native-css",
     visitor: {
       ImportDeclaration(path, state): void {
+        const { filename } = state;
+
         if (
-          processed.has(path) ||
+          filename === undefined ||
           processed.has(path.node) ||
-          isFromThisModule(state.filename)
+          isFromThisModule(filename)
         ) {
           return;
         }
 
         const statements =
-          handleReactNativeImport(path.node, t, state.filename) ??
-          handleReactNativeWebImport(path.node, t, state.filename);
+          handleReactNativeImport(path.node, t, filename) ??
+          handleReactNativeWebImport(path.node, t, filename);
 
         if (!statements) {
           return;
@@ -62,10 +69,12 @@ export default function ({
         path.replaceWithMultiple(statements);
       },
       VariableDeclaration(path, state): void {
+        const { filename } = state;
+
         if (
-          processed.has(path) ||
+          filename === undefined ||
           processed.has(path.node) ||
-          isFromThisModule(state.filename)
+          isFromThisModule(filename)
         ) {
           return;
         }
@@ -94,6 +103,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) {
@@ -114,14 +128,14 @@ export default function ({
               t,
               id.name,
               initArg.value,
-              state.filename,
+              filename,
             ) ??
             handleReactNativeWebIdentifierRequire(
               path,
               t,
               id.name,
               initArg.value,
-              state.filename,
+              filename,
             );
         } else if (
           t.isObjectPattern(id) &&
@@ -134,14 +148,14 @@ export default function ({
               t,
               id,
               initArg.value,
-              state.filename,
+              filename,
             ) ??
             handleReactNativeWebObjectPatternRequire(
               path,
               t,
               id,
               initArg.value,
-              state.filename,
+              filename,
             );
         } else if (
           t.isIdentifier(id) &&
@@ -152,12 +166,13 @@ export default function ({
           if (!source) {
             return;
           }
-          statements = handleReactNativeWebIdentifierRequire(
+          statements = handleReactNativeWebInteropRequireDefault(
             path,
             t,
             id.name,
+            init,
             source,
-            state.filename,
+            filename,
           );
         }
 

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

@@ -1,7 +1,6 @@
-import { resolve } from "path";
-
 import { type NodePath } from "@babel/traverse";
 import tBabelTypes, {
+  type CallExpression,
   type ImportDeclaration,
   type ObjectPattern,
   type Statement,
@@ -9,12 +8,13 @@ import tBabelTypes, {
 } from "@babel/types";
 
 import { allowedModules } from "./allowedModules";
+import { resolveImportSource } from "./helpers";
 
 type BabelTypes = typeof tBabelTypes;
 
 function parseReactNativeWebSource(source: string, filename: string) {
   if (source.startsWith(".")) {
-    source = resolve(filename, source);
+    source = resolveImportSource(filename, source);
 
     const internalPath = source.split("react-native-web/dist")[1];
     if (!internalPath) {
@@ -48,6 +48,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 +77,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 +90,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 +163,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 +207,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

@@ -1,5 +1,3 @@
-import { dirname, resolve } from "path";
-
 import { type NodePath } from "@babel/traverse";
 import tBabelTypes, {
   type ImportDeclaration,
@@ -9,12 +7,13 @@ import tBabelTypes, {
 } from "@babel/types";
 
 import { allowedModules } from "./allowedModules";
+import { resolveImportSource } from "./helpers";
 
 type BabelTypes = typeof tBabelTypes;
 
 function parseReactNativeSource(source: string, filename: string) {
   if (source.startsWith(".")) {
-    source = resolve(dirname(filename), source);
+    source = resolveImportSource(filename, source);
 
     const internalPath = source.split("react-native/Libraries/Components/")[1];
     if (!internalPath) {
@@ -48,6 +47,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 +76,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 +89,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 +184,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 = {},