feat: metro resolver

marklawlor · marklawlor · commit c491dbe527d8 · 2025-07-18T23:20:26.000+10:00
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -9,8 +9,8 @@ module.exports = function (api) {
 
   return getConfig(
     {
-      presets: ["babel-preset-expo", `module:${root}/dist/commonjs/babel`],
-      // presets: ["babel-preset-expo"],
+      // presets: ["babel-preset-expo", `module:${root}/dist/commonjs/babel`],
+      presets: ["babel-preset-expo"],
     },
     { root, pkg },
   );
diff --git a/example/global.css b/example/global.css
@@ -5,5 +5,5 @@
 }
 
 .text-red-500 {
-  color: red;
+  color: red
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -3,9 +3,10 @@ import { Text, View } from "react-native";
 import "../global.css";
 
 export default function App() {
+  console.log("App component rendered");
   return (
     <View className="container">
-      <Text className="text-red-500">Hello World</Text>
+      <Text className="text-red-500">Hello World </Text>
     </View>
   );
 }
diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx
diff --git a/src/components/SafeAreaProvider/index.tsx b/src/components/SafeAreaProvider/index.tsx
diff --git a/src/components/SafeAreaProvider/index.web.tsx b/src/components/SafeAreaProvider/index.web.tsx
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
@@ -13,3 +13,5 @@ const mapping = {
 export function Text(props: StyledProps<TextProps, typeof mapping>) {
   return useCssElement(RNText, props, mapping);
 }
+
+export default Text;
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
diff --git a/src/components/View.tsx b/src/components/View.tsx
@@ -13,3 +13,5 @@ const mapping = {
 export function View(props: StyledProps<ViewProps, typeof mapping>) {
   return useCssElement(RNView, props, mapping);
 }
+
+export default View;
diff --git a/src/index.ts b/src/index.ts
@@ -1 +1,3 @@
 export * from "./runtime";
+
+export * from "./poison.pill";
diff --git a/src/metro/index.ts b/src/metro/index.ts
@@ -8,13 +8,15 @@ import type { MetroConfig } from "metro-config";
 import { compile } from "../compiler/compiler";
 import { setupTypeScript } from "./typescript";
 import { getInjectionCode } from "./injection-code";
+import { nativeResolver, webResolver } from "./resolver";
 
 export interface WithReactNativeCSSOptions {
-  browserslist?: string | null;
-  browserslistEnv?: string | null;
-  libName?: string;
+  /* Specify the path to the TypeScript environment file. Defaults types-env.d.ts */
   typescriptEnvPath?: string;
+  /* Disable generation of the types-env.d.ts file. Defaults false */
   disableTypeScriptGeneration?: boolean;
+  /** Add className to all React Native primitives. Defaults false */
+  globalClassNamePolyfill?: boolean;
 }
 
 export function withReactNativeCSS<
@@ -26,23 +28,53 @@ export function withReactNativeCSS<
     }) as T;
   }
 
-  if (Number(versions.node.split(".")[0]) < 18) {
-    throw new Error("react-native-css only supports NodeJS >18");
+  if (Number(versions.node.split(".")[0]) < 20) {
+    throw new Error("react-native-css only supports NodeJS >20");
   }
 
-  if (options?.disableTypeScriptGeneration !== true) {
-    setupTypeScript(options?.typescriptEnvPath, options?.libName);
+  const {
+    disableTypeScriptGeneration,
+    typescriptEnvPath,
+    globalClassNamePolyfill = false,
+  } = options || {};
+
+  if (disableTypeScriptGeneration !== true) {
+    setupTypeScript(typescriptEnvPath);
   }
 
   const originalMiddleware = config.server?.enhanceMiddleware;
+  const originalResolver = config.resolver?.resolveRequest;
+
+  const poisonPillPath = "./poison.pill";
 
   return {
     ...config,
     transformerPath: require.resolve("./metro-transformer"),
-    transformer: {
-      ...config.transformer,
-      browserslist: options?.browserslist,
-      browserslistEnv: options?.browserslistEnv,
+    resolver: {
+      ...config.resolver,
+      sourceExts: [...(config?.resolver?.sourceExts || []), "css"],
+      resolveRequest: (context, moduleName, platform) => {
+        if (moduleName === poisonPillPath) {
+          return { type: "empty" };
+        }
+
+        // Don't hijack the resolution of react-native imports
+        if (!globalClassNamePolyfill) {
+          const parentResolver = originalResolver ?? context.resolveRequest;
+          return parentResolver(context, moduleName, platform);
+        }
+
+        const parentResolver = originalResolver ?? context.resolveRequest;
+        const resolver = platform === "web" ? webResolver : nativeResolver;
+        const resolved = resolver(
+          parentResolver,
+          context,
+          moduleName,
+          platform,
+        );
+
+        return resolved;
+      },
     },
     server: {
       ...config.server,
diff --git a/src/metro/resolver.ts b/src/metro/resolver.ts
@@ -0,0 +1,88 @@
+import type {
+  Resolution,
+  CustomResolutionContext,
+  CustomResolver,
+} from "metro-resolver";
+import { basename, resolve, sep } from "node:path";
+import { allowedModules } from "../babel/allowedModules";
+
+const thisModuleDist = resolve(__dirname, "../../../dist");
+const thisModuleSrc = resolve(__dirname, "../../../src");
+
+function isFromThisModule(filename: string): boolean {
+  return (
+    filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc)
+  );
+}
+
+export function nativeResolver(
+  resolver: CustomResolver,
+  context: CustomResolutionContext,
+  moduleName: string,
+  platform: string | null,
+): Resolution {
+  const resolution = resolver(context, moduleName, platform);
+
+  if (
+    // Don't include our internal files
+    isFromThisModule(context.originModulePath) ||
+    // Only operate on source files
+    resolution.type !== "sourceFile" ||
+    // Skip the React Native barrel file to prevent infinite recursion
+    context.originModulePath.endsWith("react-native/index.js") ||
+    // Skip anything that isn't importing a React Native component
+    !(
+      moduleName.startsWith("react-native") ||
+      moduleName.startsWith("react-native/") ||
+      resolution.filePath.includes("react-native/Libraries/Components/View/")
+    )
+  ) {
+    return resolution;
+  }
+
+  if (moduleName === "react-native") {
+    return resolver(context, `react-native-css/components`, platform);
+  }
+
+  // We only care about `react-native/Library/Components/<module>.js` components
+  const segments = resolution.filePath.split(sep);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const module = basename(segments.at(-1)!).split(".")[0];
+
+  if (!module || !allowedModules.has(module)) {
+    return resolution;
+  }
+
+  return resolver(context, `react-native-css/components/${module}`, platform);
+}
+
+export function webResolver(
+  resolver: CustomResolver,
+  context: CustomResolutionContext,
+  moduleName: string,
+  platform: string | null,
+): Resolution {
+  const resolution = resolver(context, moduleName, platform);
+
+  if (
+    // Don't include our internal files
+    isFromThisModule(context.originModulePath) ||
+    // Only operate on source files
+    resolution.type !== "sourceFile" ||
+    // Skip anything that isn't importing from `react-native-web`
+    !resolution.filePath.includes(`${sep}react-native-web${sep}`)
+  ) {
+    return resolution;
+  }
+
+  // We only care about `react-native-web/<segment>/<segment>/<module>/index.js` components
+  const segments = resolution.filePath.split(sep);
+  const isIndex = segments.at(-1)?.startsWith("index.");
+  const module = segments.at(-2);
+
+  if (!isIndex || !module || !allowedModules.has(module)) {
+    return resolution;
+  }
+
+  return resolver(context, `react-native-css/components/${module}`, platform);
+}
diff --git a/src/poison.pill.ts b/src/poison.pill.ts
@@ -0,0 +1,32 @@
+throw new Error(`react-native-css has encountered a setup error. 
+
+┌─────-─┐
+| Metro | 
+└─────-─┘
+
+Either your metro.config.js is missing the 'withReactNativeCSS' wrapper OR
+the resolver.resolveRequest function of your config is being overridden, and not calling the parent resolver.
+
+When using 3rd party libraries, please use withReactNativeCSS as the innermost function when composing Metro configs.
+
+\`\`\`ts
+const config = getDefaultConfig(__dirname);
+module.exports = with3rdPartyPlugin(
+  withReactNativeCSS(config)
+)
+\`\`\`
+
+┌─────------─┐
+| NativeWind | 
+└─────------─┘
+
+If you are using NativeWind with the 'withNativeWind' function, follow the Metro instructions above, but use 'withNativeWind' instead of 'withReactNativeCSS'.
+
+┌─────----------─┐
+| Other bundlers | 
+└─────----------─┘
+
+If you are using another bundler (Vite, Webpack, etc), or non-Metro framework (Next.js, Remix, etc), please ensure you have included 'react-native-css/babel' as a babel preset.
+`);
+
+export {};
diff --git a/src/runtime/native/__tests__/env.test.ios.tsx b/src/runtime/native/__tests__/env.test.ios.tsx
@@ -1,4 +1,4 @@
-import { SafeAreaProvider } from "react-native-css/components/SafeAreaProvider";
+// import { SafeAreaProvider } from "react-native-css/components/SafeAreaProvider";
 import { View } from "react-native-css/components/View";
 import { registerCSS, render, screen, testID } from "react-native-css/jest";
 
@@ -10,6 +10,9 @@ test("safe-area-inset-*", () => {
     margin-right: env(safe-area-inset-right);
   }`);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const SafeAreaProvider = View as any;
+
   render(
     <SafeAreaProvider
       initialMetrics={{

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,5 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.text-red-500 {`
`8`		`- color: red;`
	`8`	`+ color: red`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,3 +13,5 @@ const mapping = {`
`13`	`13`	`export function Text(props: StyledProps<TextProps, typeof mapping>) {`
`14`	`14`	`return useCssElement(RNText, props, mapping);`
`15`	`15`	`}`
	`16`	`+`
	`17`	`+export default Text;`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
`1`	`1`	`export * from "./runtime";`
	`2`	`+`
	`3`	`+export * from "./poison.pill";`