react-native-css 0.0.0-nightly.81d3fdb → 0.0.0-nightly.8a01f75

package/src/components/index.cts

@@ -0,0 +1,263 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+module.exports = {
+  get ActivityIndicator() {
+    return require("./ActivityIndicator").ActivityIndicator;
+  },
+  get Button() {
+    return require("./Button").Button;
+  },
+  get FlatList() {
+    return require("./FlatList").FlatList;
+  },
+  get Image() {
+    return require("./Image").Image;
+  },
+  get ImageBackground() {
+    return require("./ImageBackground").ImageBackground;
+  },
+  get KeyboardAvoidingView() {
+    return require("./KeyboardAvoidingView").KeyboardAvoidingView;
+  },
+  get Pressable() {
+    return require("./Pressable").Pressable;
+  },
+  get ScrollView() {
+    return require("./ScrollView").ScrollView;
+  },
+  get Switch() {
+    return require("./Switch").Switch;
+  },
+  get Text() {
+    return require("./Text").Text;
+  },
+  get TextInput() {
+    return require("./TextInput").TextInput;
+  },
+  get TouchableHighlight() {
+    return require("./TouchableHighlight").TouchableHighlight;
+  },
+  get TouchableOpacity() {
+    return require("./TouchableOpacity").TouchableOpacity;
+  },
+  get View() {
+    return require("./View").View;
+  },
+  get VirtualizedList() {
+    return require("./VirtualizedList").VirtualizedList;
+  },
+
+  /**
+   * We need to return
+   */
+  get DrawerLayoutAndroid() {
+    return require("react-native").DrawerLayoutAndroid;
+  },
+  get InputAccessoryView() {
+    return require("react-native").InputAccessoryView;
+  },
+  get experimental_LayoutConformance() {
+    return require("react-native").experimental_LayoutConformance;
+  },
+  get Modal() {
+    return require("react-native").Modal;
+  },
+  get ProgressBarAndroid() {
+    return require("react-native").ProgressBarAndroid;
+  },
+  get RefreshControl() {
+    return require("react-native").RefreshControl;
+  },
+  get SafeAreaView() {
+    return require("react-native").SafeAreaView;
+  },
+  get SectionList() {
+    return require("react-native").SectionList;
+  },
+  get StatusBar() {
+    return require("react-native").StatusBar;
+  },
+  get unstable_TextAncestorContext() {
+    return require("react-native").unstable_TextAncestorContext;
+  },
+  get Touchable() {
+    return require("react-native").Touchable;
+  },
+  get TouchableNativeFeedback() {
+    return require("react-native").TouchableNativeFeedback;
+  },
+  get TouchableWithoutFeedback() {
+    return require("react-native").TouchableWithoutFeedback;
+  },
+  get VirtualizedSectionList() {
+    return require("react-native").VirtualizedSectionList;
+  },
+  get unstable_VirtualView() {
+    return require("react-native").unstable_VirtualView;
+  },
+  get AccessibilityInfo() {
+    return require("react-native").AccessibilityInfo;
+  },
+  get ActionSheetIOS() {
+    return require("react-native").ActionSheetIOS;
+  },
+  get Alert() {
+    return require("react-native").Alert;
+  },
+  get Animated() {
+    return require("react-native").Animated;
+  },
+  get Appearance() {
+    return require("react-native").Appearance;
+  },
+  get AppRegistry() {
+    return require("react-native").AppRegistry;
+  },
+  get AppState() {
+    return require("react-native").AppState;
+  },
+  get BackHandler() {
+    return require("react-native").BackHandler;
+  },
+  get Clipboard() {
+    return require("react-native").Clipboard;
+  },
+  get codegenNativeCommands() {
+    return require("react-native").codegenNativeCommands;
+  },
+  get codegenNativeComponent() {
+    return require("react-native").codegenNativeComponent;
+  },
+  get DeviceEventEmitter() {
+    return require("react-native").DeviceEventEmitter;
+  },
+  get DeviceInfo() {
+    return require("react-native").DeviceInfo;
+  },
+  get DevMenu() {
+    return require("react-native").DevMenu;
+  },
+  get DevSettings() {
+    return require("react-native").DevSettings;
+  },
+  get Dimensions() {
+    return require("react-native").Dimensions;
+  },
+  get DynamicColorIOS() {
+    return require("react-native").DynamicColorIOS;
+  },
+  get Easing() {
+    return require("react-native").Easing;
+  },
+  get findNodeHandle() {
+    return require("react-native").findNodeHandle;
+  },
+  get I18nManager() {
+    return require("react-native").I18nManager;
+  },
+  get InteractionManager() {
+    return require("react-native").InteractionManager;
+  },
+  get Keyboard() {
+    return require("react-native").Keyboard;
+  },
+  get LayoutAnimation() {
+    return require("react-native").LayoutAnimation;
+  },
+  get Linking() {
+    return require("react-native").Linking;
+  },
+  get LogBox() {
+    return require("react-native").LogBox;
+  },
+  get NativeAppEventEmitter() {
+    return require("react-native").NativeAppEventEmitter;
+  },
+  get NativeDialogManagerAndroid() {
+    return require("react-native").NativeDialogManagerAndroid;
+  },
+  get NativeEventEmitter() {
+    return require("react-native").NativeEventEmitter;
+  },
+  get NativeModules() {
+    return require("react-native").NativeModules;
+  },
+  get Networking() {
+    return require("react-native").Networking;
+  },
+  get PanResponder() {
+    return require("react-native").PanResponder;
+  },
+  get PermissionsAndroid() {
+    return require("react-native").PermissionsAndroid;
+  },
+  get PixelRatio() {
+    return require("react-native").PixelRatio;
+  },
+  get Platform() {
+    return require("react-native").Platform;
+  },
+  get PlatformColor() {
+    return require("react-native").PlatformColor;
+  },
+  get PushNotificationIOS() {
+    return require("react-native").PushNotificationIOS;
+  },
+  get processColor() {
+    return require("react-native").processColor;
+  },
+  get registerCallableModule() {
+    return require("react-native").registerCallableModule;
+  },
+  get requireNativeComponent() {
+    return require("react-native").requireNativeComponent;
+  },
+  get RootTagContext() {
+    return require("react-native").RootTagContext;
+  },
+  get Settings() {
+    return require("react-native").Settings;
+  },
+  get Share() {
+    return require("react-native").Share;
+  },
+  get StyleSheet() {
+    return require("react-native").StyleSheet;
+  },
+  get Systrace() {
+    return require("react-native").Systrace;
+  },
+  get ToastAndroid() {
+    return require("react-native").ToastAndroid;
+  },
+  get TurboModuleRegistry() {
+    return require("react-native").TurboModuleRegistry;
+  },
+  get UIManager() {
+    return require("react-native").UIManager;
+  },
+  get unstable_batchedUpdates() {
+    return require("react-native").unstable_batchedUpdates;
+  },
+  get useAnimatedValue() {
+    return require("react-native").useAnimatedValue;
+  },
+  get useColorScheme() {
+    return require("react-native").useColorScheme;
+  },
+  get useWindowDimensions() {
+    return require("react-native").useWindowDimensions;
+  },
+  get UTFSequence() {
+    return require("react-native").UTFSequence;
+  },
+  get Vibration() {
+    return require("react-native").Vibration;
+  },
+  get VirtualViewMode() {
+    return require("react-native").VirtualViewMode;
+  },
+};

package/src/components/{index.tsx → index.ts}

@@ -1,5 +1,4 @@
 export * from "react-native";
-
 export { ActivityIndicator } from "./ActivityIndicator";
 export { Button } from "./Button";
 export { FlatList } from "./FlatList";

package/src/jest/index.ts

@@ -27,7 +27,8 @@ beforeEach(() => {
 
 const debugDefault = Boolean(
   process.env.REACT_NATIVE_CSS_TEST_DEBUG &&
-    process.env.NODE_OPTIONS?.includes("--inspect"),
+    typeof process.env.NODE_OPTIONS === "string" &&
+    process.env.NODE_OPTIONS.includes("--inspect"),
 );
 
 export function registerCSS(

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,18 +39,15 @@ export function withReactNativeCSS<
     disableTypeScriptGeneration,
     typescriptEnvPath,
     globalClassNamePolyfill = false,
-    logger = defaultLogger,
   } = options || {};
 
-  const loggerEnabled = "enabled" in logger ? logger.enabled : true;
-
   if (disableTypeScriptGeneration !== true) {
     setupTypeScript(typescriptEnvPath);
   }
 
   return {
     ...config,
-    // transformerPath: require.resolve("./metro-transformer"),
+    transformerPath: require.resolve("./metro-transformer"),
     transformer: {
       ...config.transformer,
       reactNativeCSS: options,
@@ -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(
+    `${sep}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(
@@ -79,7 +73,9 @@ export function webResolver(
     // 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}`)
+    !resolution.filePath.includes(`${sep}react-native-web${sep}`) ||
+    // Skip internal react-native-web files
+    resolution.filePath.includes(`${sep}react-native-web${sep}dist${sep}vendor`)
   ) {
     return resolution;
   }
@@ -89,7 +85,12 @@ export function webResolver(
   const isIndex = segments.at(-1)?.startsWith("index.");
   const module = segments.at(-2);
 
-  if (!isIndex || !module || !allowedModules.has(module)) {
+  if (
+    !isIndex ||
+    !module ||
+    !allowedModules.has(module) ||
+    module === "VirtualizedList"
+  ) {
     return resolution;
   }
 

package/src/native/api.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable  */
-import { useContext, useState } from "react";
+import { useContext, useState, type ComponentType } from "react";
 import { Appearance } from "react-native";
 
 import type { StyleDescriptor } from "react-native-css/compiler";
@@ -30,6 +30,10 @@ export {
 
 export { useNativeCss };
 
+const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
+  className: "style",
+};
+
 /**
  * Generates a new Higher-Order component the wraps the base component and applies the styles.
  * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function
@@ -41,7 +45,7 @@ export const styled = <
   const M extends StyledConfiguration<C>,
 >(
   baseComponent: C,
-  mapping: M,
+  mapping: M = defaultMapping as M,
   options?: StyledOptions,
 ) => {
   let component: any;

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/react/useNativeCss.ts

@@ -172,29 +172,36 @@ export function useNativeCss(
 export function mappingToConfig(mapping: StyledConfiguration<any>) {
   return Object.entries(mapping).flatMap(([key, value]): Config => {
     if (value === true) {
-      return { source: key, target: key };
+      return {
+        source: key,
+        target: key,
+      };
     } else if (value === false) {
       return { source: key, target: false };
     } else if (typeof value === "string") {
       return { source: key, target: value.split(".") };
     } else if (typeof value === "object") {
+      const nativeStyleMapping = value.nativeStyleMapping as
+        | Record<string, string>
+        | undefined;
+
       if (Array.isArray(value)) {
-        return { source: key, target: value };
+        return { source: key, target: value, nativeStyleMapping };
       }
 
       if ("target" in value) {
         if (value.target === false) {
-          return { source: key, target: false };
+          return { source: key, target: false, nativeStyleMapping };
         } else if (typeof value.target === "string") {
           const target = value.target.split(".");
 
           if (target.length === 1) {
-            return { source: key, target: target[0]! };
+            return { source: key, target: target[0]!, nativeStyleMapping };
           } else {
-            return { source: key, target };
+            return { source: key, target, nativeStyleMapping };
           }
         } else if (Array.isArray(value.target)) {
-          return { source: key, target: value.target };
+          return { source: key, target: value.target, nativeStyleMapping };
         }
       }
     }