react-native-unistyles 3.5.3 → 3.7.0

package/metro/index.d.ts

@@ -0,0 +1,31 @@
+type MetroConfig = {
+    transformer?: {
+        babelTransformerPath?: string
+    }
+    resolver?: {
+        resolveRequest?: ((...args: Array<any>) => any) | null
+    }
+}
+
+export interface UnistylesMetroOptions {
+    /**
+     * Logs the dependencies detected in every StyleSheet, same as the `debug` option of the Babel plugin
+     */
+    debug?: boolean
+}
+
+/**
+ * Experimental, replaces `react-native-unistyles/plugin` in babel.config.js
+ *
+ * Every `react-native` import (also from node_modules) resolves to Unistyles components
+ * and StyleSheets are processed by the Unistyles Babel plugin, run by Metro.
+ * There is nothing to configure: no `root`, `autoProcessImports`, `autoProcessPaths` or `autoRemapImports`.
+ *
+ * ```js
+ * const { getDefaultConfig } = require('expo/metro-config')
+ * const { withUnistylesConfig } = require('react-native-unistyles/metro')
+ *
+ * module.exports = withUnistylesConfig(getDefaultConfig(__dirname))
+ * ```
+ */
+export declare const withUnistylesConfig: <T extends MetroConfig>(config: T, options?: UnistylesMetroOptions) => T

package/metro/index.js

@@ -0,0 +1,170 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// metro/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  withUnistylesConfig: () => withUnistylesConfig
+});
+module.exports = __toCommonJS(index_exports);
+var import_node_fs = __toESM(require("node:fs"));
+var import_node_path2 = __toESM(require("node:path"));
+
+// plugin/src/consts.ts
+var REACT_NATIVE_COMPONENT_NAMES = [
+  "ActivityIndicator",
+  "View",
+  "Text",
+  "Image",
+  "ImageBackground",
+  "KeyboardAvoidingView",
+  "Pressable",
+  "ScrollView",
+  "FlatList",
+  "SectionList",
+  "Switch",
+  "TextInput",
+  "RefreshControl",
+  "TouchableHighlight",
+  "TouchableOpacity",
+  "VirtualizedList",
+  "Animated",
+  "SafeAreaView"
+  // Modal - there is no exposed native handle
+  // TouchableWithoutFeedback - can't accept a ref
+];
+var METRO_UPSTREAM_TRANSFORMER_ENV = "UNISTYLES_METRO_UPSTREAM_TRANSFORMER";
+var METRO_OPTIONS_ENV = "UNISTYLES_METRO_OPTIONS";
+
+// metro/src/resolver.ts
+var import_node_path = __toESM(require("node:path"));
+var DEEP_IMPORTS = [...REACT_NATIVE_COMPONENT_NAMES, "ViewNativeComponent", "TextNativeComponent"];
+var PASSTHROUGH_PACKAGES = ["react-native", "@react-native", "react-native-web"];
+var createResolveRequest = ({ unistylesRoot, upstream, path: path2 = import_node_path.default }) => {
+  const { sep } = path2;
+  const sourceDir = path2.join(unistylesRoot, "src");
+  const componentsDir = path2.join(sourceDir, "components", "native");
+  const componentsIndex = path2.join(componentsDir, "index.ts");
+  const builds = [path2.join(unistylesRoot, "lib", "module"), path2.join(unistylesRoot, "lib", "commonjs")];
+  const getSourcePath = (filePath) => {
+    const build = builds.find((buildDir) => filePath.startsWith(`${buildDir}${sep}`));
+    if (!build) {
+      return void 0;
+    }
+    const modulePath = filePath.slice(build.length + 1).replace(/\.js$/, "").replace(/\.(native|ios|android|web)$/, "");
+    return path2.join(sourceDir, modulePath);
+  };
+  const getPackageName = (filePath) => {
+    const parts = filePath.split(`${sep}node_modules${sep}`);
+    if (parts.length === 1) {
+      return void 0;
+    }
+    const segments = parts.at(-1).split(sep);
+    return segments[0]?.startsWith("@") ? `${segments[0]}${sep}${segments[1]}` : segments[0];
+  };
+  const shouldSwapFrom = (originModulePath) => {
+    if (originModulePath.startsWith(`${unistylesRoot}${sep}`)) {
+      return false;
+    }
+    const packageName = getPackageName(originModulePath);
+    return !PASSTHROUGH_PACKAGES.some((name) => packageName === name || packageName?.startsWith(`${name}${sep}`));
+  };
+  const getDeepImport = (filePath) => {
+    const segments = filePath.split(sep);
+    if (segments.at(-5) === "react-native-web" && segments.at(-4) === "dist" && segments.at(-3) === "exports") {
+      return segments.at(-2);
+    }
+    if (filePath.includes(`${sep}react-native${sep}Libraries${sep}`)) {
+      return segments.at(-1)?.split(".").at(0);
+    }
+    return void 0;
+  };
+  const getSwapTarget = (moduleName, filePath) => {
+    if (moduleName === "react-native" || filePath.endsWith(`${sep}react-native-web${sep}dist${sep}index.js`)) {
+      return componentsIndex;
+    }
+    const deepImport = getDeepImport(filePath);
+    return deepImport && DEEP_IMPORTS.includes(deepImport) ? path2.join(componentsDir, "deep", `${deepImport}.ts`) : void 0;
+  };
+  return (context, moduleName, platform) => {
+    const resolve = upstream ?? context.resolveRequest;
+    const resolution = resolve(context, moduleName, platform);
+    if (resolution.type !== "sourceFile" || !("filePath" in resolution)) {
+      return resolution;
+    }
+    const sourcePath = getSourcePath(resolution.filePath);
+    if (sourcePath) {
+      return resolve(context, sourcePath, platform);
+    }
+    if (!shouldSwapFrom(context.originModulePath)) {
+      return resolution;
+    }
+    const swapTarget = getSwapTarget(moduleName, resolution.filePath);
+    return swapTarget ? { type: "sourceFile", filePath: swapTarget } : resolution;
+  };
+};
+
+// metro/src/index.ts
+var withUnistylesConfig = (config, options = {}) => {
+  const babelTransformerPath = import_node_path2.default.join(__dirname, "babel-transformer.js");
+  const upstreamBabelTransformerPath = config.transformer?.babelTransformerPath;
+  if (upstreamBabelTransformerPath === babelTransformerPath) {
+    throw new Error("Unistyles \u{1F984}: withUnistylesConfig was applied twice to the same Metro config");
+  }
+  if (!upstreamBabelTransformerPath) {
+    throw new Error(
+      "Unistyles \u{1F984}: Metro config has no babelTransformerPath, pass the config returned by getDefaultConfig to withUnistylesConfig"
+    );
+  }
+  const unistylesOptions = {
+    debug: options.debug ?? false
+  };
+  process.env[METRO_UPSTREAM_TRANSFORMER_ENV] = upstreamBabelTransformerPath;
+  process.env[METRO_OPTIONS_ENV] = JSON.stringify(unistylesOptions);
+  return {
+    ...config,
+    transformer: {
+      ...config.transformer,
+      babelTransformerPath,
+      // part of Metro's transform cache key
+      unistyles: unistylesOptions
+    },
+    resolver: {
+      ...config.resolver,
+      resolveRequest: createResolveRequest({
+        unistylesRoot: import_node_fs.default.realpathSync(import_node_path2.default.join(__dirname, "..")),
+        upstream: config.resolver?.resolveRequest
+      })
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withUnistylesConfig
+});

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.5.3",
+  "version": "3.7.0",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
-    "test": "NODE_ENV=babel-test jest ./plugin ./src/__tests__",
+    "test": "NODE_ENV=babel-test jest ./plugin ./metro ./src/__tests__",
     "test:coverage": "NODE_ENV=babel-test jest --passWithNoTests --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
-    "format": "oxfmt src plugin repack-plugin",
-    "lint": "oxlint src plugin repack-plugin",
-    "check": "oxfmt src plugin repack-plugin && oxlint --fix src plugin repack-plugin",
-    "check:ci": "oxfmt --check src plugin repack-plugin && oxlint src plugin repack-plugin",
-    "prepare": "bob build && bun run plugin:build && bun run repack:plugin:build",
+    "format": "oxfmt src plugin repack-plugin metro",
+    "lint": "oxlint src plugin repack-plugin metro",
+    "check": "oxfmt src plugin repack-plugin metro && oxlint --fix src plugin repack-plugin metro",
+    "check:ci": "oxfmt --check src plugin repack-plugin metro && oxlint src plugin repack-plugin metro",
+    "prepare": "bob build && bun run plugin:build && bun run repack:plugin:build && bun run metro:build",
     "precommit": "concurrently 'bun run tsc' 'bun run lint' 'bun run check' 'bun run test' 'bun run circular:check'",
     "plugin:build": "node plugin/esbuild.js",
     "repack:plugin:build": "node repack-plugin/esbuild.js",
+    "metro:build": "node metro/esbuild.js",
     "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 src/**/*.ts",
     "components:build": "node build-components.js"
   },
@@ -25,22 +26,22 @@
   "exports": {
     ".": {
       "types": "./lib/typescript/src/index.d.ts",
-      "import": "./lib/module/index.js",
       "browser": "./lib/module/index.js",
       "react-native": "./src/index.ts",
+      "import": "./lib/module/index.js",
       "default": "./lib/commonjs/index.js"
     },
     "./mocks": {
       "types": "./lib/typescript/src/mocks.d.ts",
-      "import": "./lib/module/mocks.js",
       "browser": "./lib/module/mocks.js",
       "react-native": "./src/mocks.ts",
+      "import": "./lib/module/mocks.js",
       "default": "./lib/commonjs/mocks.js"
     },
     "./components/native/*": {
-      "import": "./lib/module/components/native/*",
       "browser": "./lib/module/components/native/*",
       "react-native": "./src/components/native/*",
+      "import": "./lib/module/components/native/*",
       "default": "./lib/commonjs/components/native/*"
     },
     "./plugin": {
@@ -53,33 +54,37 @@
       "types": "./repack-plugin/index.d.ts",
       "default": "./repack-plugin/index.js"
     },
+    "./metro": {
+      "types": "./metro/index.d.ts",
+      "default": "./metro/index.js"
+    },
     "./package.json": "./package.json",
     "./server": {
       "types": "./lib/typescript/src/server/index.d.ts",
-      "import": "./lib/module/server/index.js",
       "browser": "./lib/module/server/index.js",
       "react-native": "./src/server/index.ts",
+      "import": "./lib/module/server/index.js",
       "default": "./lib/commonjs/server/index.js"
     },
     "./web": {
       "types": "./lib/typescript/src/web-only/index.d.ts",
-      "import": "./lib/module/web-only/index.js",
       "browser": "./lib/module/web-only/index.js",
       "react-native": "./src/web-only/index.ts",
+      "import": "./lib/module/web-only/index.js",
       "default": "./lib/commonjs/web-only/index.js"
     },
     "./reanimated": {
       "types": "./lib/typescript/src/reanimated/index.d.ts",
-      "import": "./lib/module/reanimated/index.js",
       "browser": "./lib/module/reanimated/index.js",
       "react-native": "./src/reanimated/index.ts",
+      "import": "./lib/module/reanimated/index.js",
       "default": "./lib/commonjs/reanimated/index.js"
     },
     "./diagnostics": {
       "types": "./lib/typescript/src/diagnostics/index.d.ts",
-      "import": "./lib/module/diagnostics/index.js",
       "browser": "./lib/module/diagnostics/index.js",
       "react-native": "./src/diagnostics/index.ts",
+      "import": "./lib/module/diagnostics/index.js",
       "default": "./lib/commonjs/diagnostics/index.js"
     }
   },
@@ -100,6 +105,7 @@
     "react-native.config.js",
     "Unistyles.podspec",
     "repack-plugin",
+    "metro",
     "unistyles_get_rn_version.rb",
     "!repack-plugin/__tests__",
     "!repack-plugin/src",
@@ -107,6 +113,9 @@
     "!plugin/__tests__",
     "!plugin/src",
     "!plugin/esbuild.js",
+    "!metro/__tests__",
+    "!metro/src",
+    "!metro/esbuild.js",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -115,7 +124,13 @@
     "!android/local.properties",
     "!**/*.spec.ts",
     "!**/*.spec.tsx",
-    "!**/.*"
+    "!**/__tests__",
+    "!**/.*",
+    "!src/unifiber/test",
+    "!src/unifiber/bench",
+    "!src/unifiber/package.json",
+    "!src/unifiber/tsconfig.json",
+    "!src/unifiber/bun.lock"
   ],
   "keywords": [
     "react-native",
@@ -139,31 +154,33 @@
     "@babel/types": "7.29.8"
   },
   "devDependencies": {
-    "@callstack/repack": "5.4.0",
-    "@commitlint/config-conventional": "21.2.3",
-    "@react-native/normalize-colors": "0.87.1",
-    "@rspack/core": "2.2.7",
+    "@callstack/repack": "5.4.2",
+    "@commitlint/config-conventional": "21.2.4",
+    "@react-native/normalize-colors": "0.88.0",
+    "@rspack/core": "2.2.9",
     "@types/jest": "30.0.0",
-    "@types/react": "19.2.18",
+    "@types/react": "19.3.0",
     "babel-plugin-tester": "12.0.0",
-    "commitlint": "21.2.3",
-    "concurrently": "10.0.5",
+    "commitlint": "21.2.4",
+    "concurrently": "10.0.6",
     "dpdm": "4.3.0",
     "esbuild": "0.28.2",
     "jest": "30.5.2",
+    "@babel/core": "7.29.7",
     "@babel/plugin-syntax-jsx": "7.29.7",
-    "@babel/runtime": "7.29.7",
-    "@react-native/babel-preset": "0.87.1",
-    "@react-native/jest-preset": "0.87.1",
+    "@babel/runtime": "7.29.10",
+    "@react-native/babel-preset": "0.88.0",
+    "@react-native/jest-preset": "0.88.0",
+    "@react-native/metro-babel-transformer": "0.88.0",
     "nitrogen": "0.37.1",
-    "oxfmt": "0.70.0",
-    "oxlint": "1.85.0",
-    "react": "19.2.3",
-    "react-native": "0.87.1",
-    "react-native-builder-bob": "0.43.1",
+    "oxfmt": "0.74.0",
+    "oxlint": "1.89.0",
+    "react": "19.3.0",
+    "react-native": "0.88.0",
+    "react-native-builder-bob": "0.43.2",
     "react-native-nitro-modules": "0.37.1",
-    "react-native-reanimated": "4.7.0",
-    "react-native-web": "0.21.3",
+    "react-native-reanimated": "4.7.1",
+    "react-native-web": "0.21.4",
     "typescript": "6.0.3"
   },
   "peerDependencies": {
@@ -209,6 +226,7 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
+    "exclude": "{**/{__tests__,__fixtures__,__mocks__}/**,**/unifiber/{test,bench}/**,**/unifiber/*}",
     "targets": [
       "commonjs",
       "module",

package/plugin/index.d.ts

@@ -44,6 +44,13 @@ export interface UnistylesPluginOptions {
      */
     root: string
 
+    /**
+     * Set by react-native-unistyles/metro, don't use it!
+     * Metro picks the files to process and swaps imports in its resolver,
+     * so `root`, `autoProcessImports`, `autoProcessPaths` and `autoRemapImports` are ignored
+     */
+    isMetro?: boolean
+
     /**
      * Example: ['@my-org/styles']
      * Enable this option if you want to process only files containing specific imports.

package/plugin/index.js

@@ -91,6 +91,7 @@ var NATIVE_COMPONENTS_PATHS = {
     }
   ]
 };
+var METRO_UPSTREAM_TRANSFORMER_ENV = "UNISTYLES_METRO_UPSTREAM_TRANSFORMER";
 
 // plugin/src/exotic.ts
 var t2 = __toESM(require("@babel/types"));
@@ -139,6 +140,9 @@ function addUnistylesImport(path2, state) {
   nodesToRemove.forEach((node) => path2.node.body.splice(path2.node.body.indexOf(node), 1));
 }
 function isInsideNodeModules(state) {
+  if (state.opts.isMetro) {
+    return false;
+  }
   return state.file.opts.filename?.includes("node_modules") && !state.file.replaceWithUnistyles;
 }
 function addUnistylesRequire(path2, state) {
@@ -351,6 +355,47 @@ function getReturnStatementsFromBody(node, results = []) {
   }
   return results;
 }
+function countReturnStatements(node) {
+  if (t4.isFunction(node) || t4.isClass(node)) {
+    return 0;
+  }
+  if (t4.isReturnStatement(node)) {
+    return 1;
+  }
+  return (t4.VISITOR_KEYS[node.type] ?? []).reduce((count, key) => {
+    const child = node[key];
+    const children = (Array.isArray(child) ? child : [child]).filter(
+      (childNode) => t4.isNode(childNode)
+    );
+    return count + children.reduce((childCount, childNode) => childCount + countReturnStatements(childNode), 0);
+  }, 0);
+}
+function collectReturnedObjects(node, targets, unsupported) {
+  if (t4.isObjectExpression(node)) {
+    targets.push(node);
+    return;
+  }
+  if (t4.isConditionalExpression(node)) {
+    collectReturnedObjects(node.consequent, targets, unsupported);
+    collectReturnedObjects(node.alternate, targets, unsupported);
+    return;
+  }
+  if (t4.isLogicalExpression(node)) {
+    if (node.operator !== "&&") {
+      collectReturnedObjects(node.left, targets, unsupported);
+    }
+    collectReturnedObjects(node.right, targets, unsupported);
+    return;
+  }
+  if (t4.isTSAsExpression(node) || t4.isTSSatisfiesExpression(node) || t4.isParenthesizedExpression(node)) {
+    collectReturnedObjects(node.expression, targets, unsupported);
+    return;
+  }
+  if (t4.isNullLiteral(node) || t4.isBooleanLiteral(node) || t4.isIdentifier(node) && node.name === "undefined") {
+    return;
+  }
+  unsupported.push(node);
+}
 function isUnistylesStyleSheet(path2, state) {
   const { callee } = path2.node;
   if (!t4.isMemberExpression(callee) || !t4.isIdentifier(callee.property)) {
@@ -665,42 +710,63 @@ function getStylesDependenciesFromFunction(funcPath) {
   }, {});
 }
 function addDependencies(state, styleName, unistyle, detectedDependencies) {
-  const debugMessage = (deps) => {
+  const debugMessage = (deps, unsupportedReason) => {
     if (state.opts.debug) {
       const mappedDeps = deps.map(
         (dep) => Object.keys(UnistyleDependency).find(
           (key) => UnistyleDependency[key] === dep
         )
       ).join(", ");
-      console.log(
-        `${state.filename?.replace(`${state.file.opts.root}/`, "")}: styles.${styleName}: [${mappedDeps}]`
-      );
+      const style = `${state.filename?.replace(`${state.file.opts.root}/`, "")}: styles.${styleName}`;
+      if (unsupportedReason) {
+        console.warn(
+          `Unistyles \u{1F984}: ${style}: detected [${mappedDeps}], but ${unsupportedReason}. Return an object literal, or a ternary/logical expression of object literals.`
+        );
+        return;
+      }
+      console.log(`${style}: [${mappedDeps}]`);
     }
   };
   const styleDependencies = detectedDependencies.map(toUnistylesDependency);
   if (styleDependencies.length > 0) {
     const uniqueDependencies = Array.from(new Set(styleDependencies));
-    debugMessage(uniqueDependencies);
-    let targets = [];
+    const targets = [];
+    const unsupported = [];
+    let unsupportedReturns = 0;
     if (t4.isArrowFunctionExpression(unistyle.value) || t4.isFunctionExpression(unistyle.value)) {
-      if (t4.isObjectExpression(unistyle.value.body)) {
-        targets.push(unistyle.value.body);
-      }
       if (t4.isBlockStatement(unistyle.value.body)) {
-        targets = getReturnStatementsFromBody(unistyle.value.body).map((node) => {
+        const returnStatements = getReturnStatementsFromBody(unistyle.value.body);
+        unsupportedReturns = countReturnStatements(unistyle.value.body) - returnStatements.length;
+        returnStatements.forEach((node) => {
           if (t4.isIdentifier(node.argument)) {
             node.argument = t4.objectExpression([t4.spreadElement(node.argument)]);
           }
-          return node.argument;
-        }).filter((node) => t4.isObjectExpression(node));
+          if (node.argument) {
+            collectReturnedObjects(node.argument, targets, unsupported);
+          }
+        });
+      } else {
+        collectReturnedObjects(unistyle.value.body, targets, unsupported);
       }
-    }
-    if (t4.isObjectExpression(unistyle.value)) {
-      targets.push(unistyle.value);
-    }
-    if (t4.isMemberExpression(unistyle.value)) {
+    } else if (t4.isMemberExpression(unistyle.value)) {
       unistyle.value = t4.objectExpression([t4.spreadElement(unistyle.value)]);
       targets.push(unistyle.value);
+    } else {
+      collectReturnedObjects(unistyle.value, targets, unsupported);
+    }
+    if (unsupported.length > 0 || unsupportedReturns > 0) {
+      const reasons = unsupported.map((node) => `${node.type}${node.loc ? ` (line ${node.loc.start.line})` : ""}`).concat(
+        unsupportedReturns > 0 ? `${unsupportedReturns} return statement(s) inside switch, loop or try blocks` : []
+      );
+      const consequence = targets.length > 0 ? "the style may not update when these dependencies change, eg. when one of these values is returned first" : "the style won't update when these dependencies change";
+      debugMessage(uniqueDependencies, `they can't be attached to: ${reasons.join(", ")}, so ${consequence}`);
+    } else if (targets.length === 0) {
+      debugMessage(
+        uniqueDependencies,
+        "no returned object was found to attach them to, so the style won't update when these dependencies change"
+      );
+    } else {
+      debugMessage(uniqueDependencies);
     }
     if (targets.length > 0) {
       targets.forEach((target) => {
@@ -719,6 +785,7 @@ function addDependencies(state, styleName, unistyle, detectedDependencies) {
 
 // plugin/src/variants.ts
 var t5 = __toESM(require("@babel/types"));
+var scopedVariants = /* @__PURE__ */ new WeakMap();
 function extractVariants(path2, state) {
   const maybeVariants = path2.node.body.filter(
     (node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee)
@@ -745,22 +812,29 @@ function extractVariants(path2, state) {
     return;
   }
   const calleeName = callee.object.name;
-  const newUniqueName = path2.scope.generateUidIdentifier(calleeName);
-  const shadowDeclaration = t5.variableDeclaration("const", [
-    t5.variableDeclarator(newUniqueName, t5.identifier(calleeName))
-  ]);
+  const binding = path2.scope.getBinding(calleeName);
+  const existingShadowName = binding && t5.isVariableDeclarator(binding.path.node) ? scopedVariants.get(binding.path.node) : void 0;
+  const shadowName = existingShadowName ?? path2.scope.generateUidIdentifier(calleeName).name;
   const newCallExpression = t5.callExpression(
-    t5.memberExpression(t5.identifier(newUniqueName.name), t5.identifier("useVariants")),
+    t5.memberExpression(t5.identifier(shadowName), t5.identifier("useVariants")),
     node.arguments
   );
-  const finalDeclaration = t5.variableDeclaration("const", [
-    t5.variableDeclarator(t5.identifier(calleeName), newCallExpression)
-  ]);
+  const finalDeclarator = t5.variableDeclarator(t5.identifier(calleeName), newCallExpression);
+  const finalDeclaration = t5.variableDeclaration("const", [finalDeclarator]);
+  scopedVariants.set(finalDeclarator, shadowName);
   const pathIndex = path2.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
   const rest = path2.node.body.slice(pathIndex + 1);
   const statement = t5.blockStatement([finalDeclaration, ...rest]);
-  path2.node.body = [...path2.node.body.slice(0, pathIndex), shadowDeclaration, statement];
   state.file.hasVariants = true;
+  if (existingShadowName) {
+    path2.node.body = [...path2.node.body.slice(0, pathIndex), statement];
+    return;
+  }
+  const shadowDeclaration = t5.variableDeclaration("const", [
+    t5.variableDeclarator(t5.identifier(shadowName), t5.identifier(calleeName))
+  ]);
+  path2.node.body = [...path2.node.body.slice(0, pathIndex), shadowDeclaration, statement];
+  path2.scope.registerDeclaration(path2.get(`body.${pathIndex}`));
 }
 
 // plugin/src/index.ts
@@ -776,13 +850,18 @@ function index_default() {
     visitor: {
       Program: {
         enter(path2, state) {
-          if (!state.opts.root) {
+          if (!state.opts.isMetro && process.env[METRO_UPSTREAM_TRANSFORMER_ENV]) {
+            throw new Error(
+              "Unistyles \u{1F984}: react-native-unistyles/metro is enabled in metro.config.js, remove react-native-unistyles/plugin from babel.config.js"
+            );
+          }
+          if (!state.opts.root && !state.opts.isMetro) {
             throw new Error(
               "Unistyles \u{1F984}: Babel plugin requires `root` option to be set. Please check https://www.unistyl.es/v3/other/babel-plugin#extra-configuration"
             );
           }
-          const appRoot = toPlatformPath(import_node_path2.default.join(state.file.opts.root, state.opts.root));
-          if (state.file.opts.root === appRoot) {
+          const appRoot = toPlatformPath(import_node_path2.default.join(state.file.opts.root, state.opts.root ?? ""));
+          if (!state.opts.isMetro && state.file.opts.root === appRoot) {
             throw new Error(
               "Unistyles \u{1F984}: Root option can't resolve to project root as it will include node_modules folder. Please check https://www.unistyl.es/v3/other/babel-plugin#extra-configuration"
             );
@@ -797,7 +876,7 @@ function index_default() {
           state.file.styleSheetLocalName = "";
           state.file.reactNativeCommonJSName = "";
           state.reactNativeImports = {};
-          state.file.forceProcessing = state.filename?.includes(appRoot) ?? false;
+          state.file.forceProcessing = state.opts.isMetro || (state.filename?.includes(appRoot) ?? false);
           path2.traverse({
             BlockStatement(blockPath) {
               if (isInsideNodeModules(state)) {
@@ -808,7 +887,7 @@ function index_default() {
           });
         },
         exit(path2, state) {
-          if (isInsideNodeModules(state)) {
+          if (state.opts.isMetro || isInsideNodeModules(state)) {
             return;
           }
           if (state.file.addUnistylesRequire) {
@@ -851,7 +930,7 @@ function index_default() {
         });
       },
       ImportDeclaration(path2, state) {
-        const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find(
+        const exoticImport = state.opts.isMetro ? void 0 : REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find(
           (exotic) => state.filename?.includes(exotic.path)
         );
         if (exoticImport) {
@@ -869,6 +948,9 @@ function index_default() {
             }
           });
         }
+        if (state.opts.isMetro) {
+          return;
+        }
         if (importSource === "react-native") {
           path2.node.specifiers.forEach((specifier) => {
             if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && REACT_NATIVE_COMPONENT_NAMES.includes(specifier.imported.name)) {
@@ -892,7 +974,7 @@ function index_default() {
         }
       },
       MemberExpression(path2, state) {
-        if (isInsideNodeModules(state)) {
+        if (state.opts.isMetro || isInsideNodeModules(state)) {
           return;
         }
         if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.object)) {