|
| 1 | +/* eslint-disable */ |
| 2 | +import { versions } from "node:process"; |
| 3 | + |
| 4 | +import type { MetroConfig } from "metro-config"; |
| 5 | + |
| 6 | +import { type CompilerOptions } from "../compiler"; |
| 7 | +import { nativeResolver, webResolver } from "./resolver"; |
| 8 | +import { setupTypeScript } from "./typescript"; |
| 9 | + |
| 10 | +export interface WithReactNativeCSSOptions extends CompilerOptions { |
| 11 | + /* Specify the path to the TypeScript environment file. Defaults types-env.d.ts */ |
| 12 | + typescriptEnvPath?: string; |
| 13 | + /* Disable generation of the types-env.d.ts file. Defaults false */ |
| 14 | + disableTypeScriptGeneration?: boolean; |
| 15 | + /** Add className to all React Native primitives. Defaults false */ |
| 16 | + globalClassNamePolyfill?: boolean; |
| 17 | + hexColors?: boolean; |
| 18 | +} |
| 19 | + |
| 20 | +const metroOverrideResolution = { |
| 21 | + type: "sourceFile", |
| 22 | + filePath: require.resolve("./override"), |
| 23 | +}; |
| 24 | + |
| 25 | +export function withReactNativeCSS< |
| 26 | + T extends MetroConfig | (() => Promise<MetroConfig>), |
| 27 | +>(config: T, options?: WithReactNativeCSSOptions): T { |
| 28 | + if (typeof config === "function") { |
| 29 | + return (async () => { |
| 30 | + return withReactNativeCSS(await config(), options); |
| 31 | + }) as T; |
| 32 | + } |
| 33 | + |
| 34 | + if (Number(versions.node.split(".")[0]) < 20) { |
| 35 | + throw new Error("react-native-css only supports NodeJS >20"); |
| 36 | + } |
| 37 | + |
| 38 | + console.log("asdf", (global as any).__REACT_NATIVE_METRO_CONFIG_LOADED); |
| 39 | + |
| 40 | + const { |
| 41 | + disableTypeScriptGeneration, |
| 42 | + typescriptEnvPath, |
| 43 | + globalClassNamePolyfill = false, |
| 44 | + } = options || {}; |
| 45 | + |
| 46 | + if (disableTypeScriptGeneration !== true) { |
| 47 | + setupTypeScript(typescriptEnvPath); |
| 48 | + } |
| 49 | + |
| 50 | + return { |
| 51 | + ...config, |
| 52 | + transformerPath: require.resolve("./metro-transformer"), |
| 53 | + transformer: { |
| 54 | + ...config.transformer, |
| 55 | + reactNativeCSS: { |
| 56 | + ...options, |
| 57 | + communityCLI: !!(global as any).__REACT_NATIVE_METRO_CONFIG_LOADED, |
| 58 | + }, |
| 59 | + }, |
| 60 | + resolver: { |
| 61 | + ...config.resolver, |
| 62 | + sourceExts: [...(config?.resolver?.sourceExts || []), "css"], |
| 63 | + resolveRequest: (context, moduleName, platform) => { |
| 64 | + if (moduleName.includes("react-native-css-metro-override")) { |
| 65 | + return metroOverrideResolution; |
| 66 | + } |
| 67 | + |
| 68 | + const parentResolver = |
| 69 | + config.resolver?.resolveRequest ?? context.resolveRequest; |
| 70 | + |
| 71 | + // Don't hijack the resolution of react-native imports |
| 72 | + if (!globalClassNamePolyfill) { |
| 73 | + return parentResolver(context, moduleName, platform); |
| 74 | + } |
| 75 | + |
| 76 | + const resolver = platform === "web" ? webResolver : nativeResolver; |
| 77 | + const resolved = resolver( |
| 78 | + parentResolver, |
| 79 | + context, |
| 80 | + moduleName, |
| 81 | + platform, |
| 82 | + ); |
| 83 | + |
| 84 | + return resolved; |
| 85 | + }, |
| 86 | + }, |
| 87 | + }; |
| 88 | +} |
0 commit comments