react-native-css 3.0.0-preview.3 → 3.0.0-preview.5

package/src/metro/index.ts

@@ -1,16 +1,9 @@
 /* eslint-disable */
-import { dirname, relative, sep } from "node:path";
 import { versions } from "node:process";
 
-import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
-import {
-  compile,
-  type CompilerOptions,
-  type ReactNativeCssStyleSheet,
-} from "../compiler";
-import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
+import { type CompilerOptions } from "../compiler";
 import { nativeResolver, webResolver } from "./resolver";
 import { setupTypeScript } from "./typescript";
 
@@ -24,7 +17,10 @@ export interface WithReactNativeCSSOptions extends CompilerOptions {
   hexColors?: boolean;
 }
 
-const defaultLogger = debug("react-native-css:metro");
+const metroOverrideResolution = {
+  type: "sourceFile",
+  filePath: require.resolve("./override"),
+};
 
 export function withReactNativeCSS<
   T extends MetroConfig | (() => Promise<MetroConfig>),
@@ -43,11 +39,8 @@ export function withReactNativeCSS<
     disableTypeScriptGeneration,
     typescriptEnvPath,
     globalClassNamePolyfill = false,
-    logger = defaultLogger,
   } = options || {};
 
-  const loggerEnabled = "enabled" in logger ? logger.enabled : true;
-
   if (disableTypeScriptGeneration !== true) {
     setupTypeScript(typescriptEnvPath);
   }
@@ -63,8 +56,8 @@ export function withReactNativeCSS<
       ...config.resolver,
       sourceExts: [...(config?.resolver?.sourceExts || []), "css"],
       resolveRequest: (context, moduleName, platform) => {
-        if (moduleName.includes("poison.pill")) {
-          return { type: "empty" };
+        if (moduleName.includes("react-native-css-metro-override")) {
+          return metroOverrideResolution;
         }
 
         const parentResolver =
@@ -86,156 +79,5 @@ export function withReactNativeCSS<
         return resolved;
       },
     },
-    server: {
-      ...config.server,
-      enhanceMiddleware(metroMiddleware, metroServer) {
-        const bundler: any = metroServer.getBundler().getBundler();
-
-        if (!bundler.__react_native_css__patched) {
-          bundler.__react_native_css__patched = true;
-
-          const nativeCSSFiles = new Map<
-            string,
-            [string, ReactNativeCssStyleSheet]
-          >();
-          const webCSSFiles = new Set<string>();
-
-          const nativeInjectionPath = require.resolve("../native/metro");
-          const nativeInjectionFilepaths = [
-            // CommonJS
-            nativeInjectionPath,
-            // ES Module
-            nativeInjectionPath.replace(
-              `dist${sep}commonjs`,
-              `dist${sep}module`,
-            ),
-            // TypeScript
-            nativeInjectionPath
-              .replace(`dist${sep}commonjs`, `src`)
-              .replace(".js", ".ts"),
-          ];
-
-          const webInjectionPath = require.resolve("../web/metro");
-          const webInjectionFilepaths = [
-            // CommonJS
-            webInjectionPath,
-            // ES Module
-            webInjectionPath.replace(`dist${sep}commonjs`, `dist${sep}module`),
-            // TypeScript
-            webInjectionPath
-              .replace(`dist${sep}commonjs`, `src`)
-              .replace(".js", ".ts"),
-          ];
-
-          // Keep the original
-          const transformFile = bundler.transformFile.bind(bundler);
-
-          const watcher = bundler.getWatcher();
-
-          // Patch with our functionality
-          bundler.transformFile = async function (
-            filePath: string,
-            transformOptions: any,
-            fileBuffer?: Buffer,
-          ) {
-            const isCss = /\.(s?css|sass)$/.test(filePath);
-
-            if (transformOptions.platform === "web") {
-              if (isCss) {
-                webCSSFiles.add(filePath);
-              } else if (webInjectionFilepaths.includes(filePath)) {
-                fileBuffer = getWebInjectionCode(Array.from(webCSSFiles));
-              }
-
-              return transformFile(filePath, transformOptions, fileBuffer);
-            } else {
-              // Handle CSS files on native platforms
-              if (isCss) {
-                const webTransform = await transformFile(
-                  filePath,
-                  {
-                    ...transformOptions,
-                    // Force the platform to web for CSS files
-                    platform: "web",
-                    // Let the transformer know that we will handle compilation
-                    customTransformOptions: {
-                      ...transformOptions.customTransformOptions,
-                      reactNativeCSS: options,
-                    },
-                  },
-                  fileBuffer,
-                );
-
-                const lastTransform = nativeCSSFiles.get(filePath);
-                const last = lastTransform?.[0];
-                const next = webTransform.output[0].data.css.code.toString();
-
-                // The CSS file has changed, we need to recompile the injection file
-                if (next !== last) {
-                  nativeCSSFiles.set(filePath, [
-                    next,
-                    compile(next, {
-                      hexColors: options?.hexColors,
-                    }).stylesheet(),
-                  ]);
-
-                  watcher.emit("change", {
-                    eventsQueue: nativeInjectionFilepaths.map((filePath) => ({
-                      filePath,
-                      metadata: {
-                        modifiedTime: Date.now(),
-                        size: 1, // Can be anything
-                        type: "virtual", // Can be anything
-                      },
-                      type: "change",
-                    })),
-                  });
-                }
-
-                const nativeTransform = await transformFile(
-                  filePath,
-                  transformOptions,
-                  fileBuffer,
-                );
-
-                // Tell Expo to skip caching this file
-                nativeTransform.output[0].data.css = {
-                  skipCache: true,
-                  // Expo requires a `code` property
-                  code: "",
-                };
-
-                return nativeTransform;
-              } else if (nativeInjectionFilepaths.includes(filePath)) {
-                // If this is the injection file, we to swap its content with the
-                // compiled CSS files
-                fileBuffer = getNativeInjectionCode(
-                  Array.from(nativeCSSFiles.keys()).map((key) =>
-                    relative(dirname(filePath), key),
-                  ),
-                  Array.from(nativeCSSFiles.values()).map(([, value]) => value),
-                );
-
-                if (loggerEnabled && fileBuffer) {
-                  logger(`Transformed ${filePath}`);
-                  logger(fileBuffer?.toString());
-                }
-              }
-
-              return transformFile(filePath, transformOptions, fileBuffer);
-            }
-          };
-        }
-
-        /**
-         * We don't modify the middleware, we just use this function to get the metroServer
-         * So simply return the existing middleware
-         */
-        return (
-          config.server?.enhanceMiddleware?.(metroMiddleware, metroServer) ??
-          metroMiddleware
-        );
-      },
-    },
   };
 }

package/src/metro/metro-transformer.ts

@@ -44,5 +44,19 @@ export async function transform(
 
   data = Buffer.from(getNativeInjectionCode([], [productionJS]));
 
-  return worker.transform(config, projectRoot, `${filePath}.js`, data, options);
+  const transform = await worker.transform(
+    config,
+    projectRoot,
+    `${filePath}.js`,
+    data,
+    options,
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+  (transform as any).output[0].data.css = {
+    skipCache: true,
+    code: "",
+  };
+
+  return transform;
 }

package/src/metro/override.ts

@@ -0,0 +1 @@
+export {};

package/src/metro/resolver.ts

@@ -24,45 +24,39 @@ export function nativeResolver(
   platform: string | null,
 ): Resolution {
   const resolution = resolver(context, moduleName, platform);
+  const isInternal = isFromThisModule(context.originModulePath);
+  const isReactNativeIndex = context.originModulePath.endsWith(
+    `react-native${sep}index.js`,
+  );
 
-  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/")
-    )
-  ) {
+  if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
     return resolution;
   }
 
   if (moduleName === "react-native") {
     return resolver(context, `react-native-css/components`, platform);
-  }
-
-  if (moduleName === "react-native-safe-area-context") {
+  } else if (moduleName === "react-native-safe-area-context") {
     return resolver(
       context,
       `react-native-css/components/react-native-safe-area-context`,
       platform,
     );
+  } else if (
+    resolution.filePath.includes(`${sep}react-native${sep}Libraries${sep}`)
+  ) {
+    const filename = basename(resolution.filePath.split(sep).at(-1) ?? "");
+    const module = filename.split(".").at(0);
+
+    if (module && allowedModules.has(module)) {
+      return resolver(
+        context,
+        `react-native-css/components/${module}`,
+        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);
+  return resolution;
 }
 
 export function webResolver(

package/src/native/index.ts

@@ -1,4 +1,3 @@
-export * from "./metro";
-
 export * from "./api";
 export type * from "../runtime.types";
+export * from "./react-native-css-metro-override";

package/src/native/styles/calculate-props.ts

@@ -129,7 +129,7 @@ export function applyDeclarations(
         const final = rest.pop();
 
         if (final) {
-          if (first !== "*") {
+          if (first !== "&") {
             topLevelTarget[first] ??= {};
             target = topLevelTarget[first];
           }

package/src/native/styles/resolve.ts

@@ -38,7 +38,6 @@ export type StyleResolver = (
 const functionResolvers = {
   ...shorthands,
   ...functions,
-  animationName: shorthands.animation,
   lineHeight,
   em,
   rem,

package/src/native/styles/shorthands/animation.ts

@@ -76,8 +76,6 @@ export const animation: StyleFunctionResolver = (
     return;
   }
 
-  animationShortHandTuples.pop();
-
   const nameTuple = animationShortHandTuples.find(
     (tuple) => tuple[1] === "animationName",
   );
@@ -121,3 +119,13 @@ export const animation: StyleFunctionResolver = (
 
   return applyShorthand(animationShortHandTuples);
 };
+
+export const animationName: StyleFunctionResolver = (
+  resolveValue,
+  value,
+  get,
+  options,
+) => {
+  const shorthand: any = animation(resolveValue, value, get, options);
+  return shorthand.animationName;
+};

package/dist/commonjs/poison.pill.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["canWarn","process","env","NODE_ENV","Error"],"sourceRoot":"../../src","sources":["poison.pill.ts"],"mappings":";;;;;AAAA,MAAMA,OAAO,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM;AAE/C,IAAIH,OAAO,EAAE;EACX,MAAM,IAAII,KAAK,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF","ignoreList":[]}

package/dist/commonjs/runtime/native/injection.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=injection.js.map

package/dist/commonjs/runtime/native/injection.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["runtime/native/injection.ts"],"mappings":"","ignoreList":[]}

package/dist/module/native/metro.js

@@ -1,5 +0,0 @@
-"use strict";
-
-// This file will be overwritten by Metro
-export {};
-//# sourceMappingURL=metro.js.map

package/dist/module/poison.pill.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["canWarn","process","env","NODE_ENV","Error"],"sourceRoot":"../../src","sources":["poison.pill.ts"],"mappings":";;AAAA,MAAMA,OAAO,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM;AAE/C,IAAIH,OAAO,EAAE;EACX,MAAM,IAAII,KAAK,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF;AAEA","ignoreList":[]}

package/dist/module/runtime/native/injection.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=injection.js.map

package/dist/module/runtime/native/injection.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["runtime/native/injection.ts"],"mappings":"","ignoreList":[]}

package/dist/typescript/commonjs/src/native/metro.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=metro.d.ts.map

package/dist/typescript/commonjs/src/native/metro.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"metro.d.ts","sourceRoot":"","sources":["../../../../../src/native/metro.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}

package/dist/typescript/commonjs/src/poison.pill.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=poison.pill.d.ts.map

package/dist/typescript/commonjs/src/poison.pill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"poison.pill.d.ts","sourceRoot":"","sources":["../../../../src/poison.pill.ts"],"names":[],"mappings":"AAmCA,OAAO,EAAE,CAAC"}

package/dist/typescript/commonjs/src/runtime/native/injection.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=injection.d.ts.map

package/dist/typescript/commonjs/src/runtime/native/injection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"injection.d.ts","sourceRoot":"","sources":["../../../../../../src/runtime/native/injection.ts"],"names":[],"mappings":""}

package/dist/typescript/module/src/native/metro.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=metro.d.ts.map

package/dist/typescript/module/src/native/metro.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"metro.d.ts","sourceRoot":"","sources":["../../../../../src/native/metro.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}

package/dist/typescript/module/src/poison.pill.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=poison.pill.d.ts.map

package/dist/typescript/module/src/poison.pill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"poison.pill.d.ts","sourceRoot":"","sources":["../../../../src/poison.pill.ts"],"names":[],"mappings":"AAmCA,OAAO,EAAE,CAAC"}

package/dist/typescript/module/src/runtime/native/injection.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=injection.d.ts.map

package/dist/typescript/module/src/runtime/native/injection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"injection.d.ts","sourceRoot":"","sources":["../../../../../../src/runtime/native/injection.ts"],"names":[],"mappings":""}

package/src/components/index.tsx

@@ -1,10 +0,0 @@
-export * from "react-native";
-
-export { ActivityIndicator } from "./ActivityIndicator";
-export { Button } from "./Button";
-export { FlatList } from "./FlatList";
-export { Image } from "./Image";
-export { Switch } from "./Switch";
-export { Text } from "./Text";
-export { TextInput } from "./TextInput";
-export { View } from "./View";

package/src/native/metro.ts

@@ -1,2 +0,0 @@
-// This file will be overwritten by Metro
-export {};