@colorye/react-native-css 0.3.0 → 0.3.2

package/src/babel.js

@@ -1,26 +1,21 @@
 import fs from "fs";
 import nodePath from "path";
-import {
-  getInheritStyleExpression,
-  getRootInheritStyleExpression,
-  getStaticMergeExpression,
-  getStyleExpression,
-  inlineStaticAttributes,
-  isFragmentElement,
-  isImportOrRequire,
-  isRootLevelJSXElement,
-  tryGetStaticStyleInfo,
-} from "./utils/babel.js";
+import { parseSync } from "@babel/core";
 
-const libRoot = nodePath.dirname(__filename);
+let native = null;
+try {
+  native = require("./native");
+} catch {
+  try {
+    native = require("../crates/transformer");
+  } catch {}
+}
 
-// Cache for loaded stylesheets
+const libRoot = nodePath.dirname(__filename);
 const stylesheetCache = new Map();
 
-/**
- * Load pre-computed stylesheet JSON (generated by Metro transformer)
- */
 function loadStylesheet(cssPath, fileDir) {
+  if (!cssPath) return "{}";
   if (stylesheetCache.has(cssPath)) {
     return stylesheetCache.get(cssPath);
   }
@@ -29,242 +24,94 @@ function loadStylesheet(cssPath, fileDir) {
     const cwd = process.cwd();
     const cleanPath = cssPath.replace(/^@\//, "");
 
-    // 1. Try project root relative paths
-    const projectRootJson = nodePath.resolve(cwd, cleanPath.endsWith(".json") ? cleanPath : `${cleanPath}.json`);
-    if (fs.existsSync(projectRootJson)) {
-      const content = fs.readFileSync(projectRootJson, "utf-8");
-      const stylesheet = JSON.parse(content);
-      stylesheetCache.set(cssPath, stylesheet);
-      return stylesheet;
-    }
-
-    const defaultIndexJson = nodePath.resolve(cwd, "index.css.json");
-    if (fs.existsSync(defaultIndexJson)) {
-      const content = fs.readFileSync(defaultIndexJson, "utf-8");
-      const stylesheet = JSON.parse(content);
-      stylesheetCache.set(cssPath, stylesheet);
-      return stylesheet;
-    }
-
-    // 2. Try fileDir if provided
-    if (fileDir) {
-      const localJson = nodePath.resolve(fileDir, cssPath);
-      if (fs.existsSync(localJson)) {
-        const content = fs.readFileSync(localJson, "utf-8");
-        const stylesheet = JSON.parse(content);
-        stylesheetCache.set(cssPath, stylesheet);
-        return stylesheet;
-      }
-    }
-
-    // 3. Try resolving the module if it's a module specifier like @colorye/react-native-css/exported-stylesheet.json
-    try {
-      const resolvedModule = require.resolve(cssPath, { paths: [cwd, libRoot] });
-      if (fs.existsSync(resolvedModule)) {
-        const content = fs.readFileSync(resolvedModule, "utf-8");
-        const stylesheet = JSON.parse(content);
-        stylesheetCache.set(cssPath, stylesheet);
-        return stylesheet;
+    const candidates = [
+      nodePath.resolve(cwd, cleanPath),
+      nodePath.resolve(cwd, cleanPath.endsWith(".json") ? cleanPath : `${cleanPath}.json`),
+      fileDir ? nodePath.resolve(fileDir, cssPath) : null,
+      nodePath.resolve(cwd, "index.css.json"),
+      nodePath.resolve(cwd, "index.css"),
+      nodePath.join(libRoot, "exported-stylesheet.json"),
+    ].filter(Boolean);
+
+    for (const p of candidates) {
+      if (fs.existsSync(p)) {
+        const content = fs.readFileSync(p, "utf-8");
+        let sheetJson = content;
+        if (p.endsWith(".css") && native && native.compileCss) {
+          sheetJson = native.compileCss(content);
+        }
+        stylesheetCache.set(cssPath, sheetJson);
+        return sheetJson;
       }
-    } catch {}
-
-    // 4. Try the exported-stylesheet.json from lib directory
-    const exportedPath = nodePath.join(libRoot, "exported-stylesheet.json");
-    if (fs.existsSync(exportedPath)) {
-      const content = fs.readFileSync(exportedPath, "utf-8");
-      const stylesheet = JSON.parse(content);
-      stylesheetCache.set(cssPath, stylesheet);
-      return stylesheet;
     }
+  } catch {}
 
-    // 5. Try .json next to the CSS file
-    const cssJsonPath = `${cssPath}.json`;
-    if (fs.existsSync(cssJsonPath)) {
-      const content = fs.readFileSync(cssJsonPath, "utf-8");
-      const stylesheet = JSON.parse(content);
-      stylesheetCache.set(cssPath, stylesheet);
-      return stylesheet;
-    }
-
-    return null;
-  } catch {
-    return null;
-  }
+  return "{}";
 }
 
-export default function ({ types: t }) {
+export default function () {
   return {
     name: "@colorye/react-native-css",
     visitor: {
       Program: {
         enter(path, state) {
-          if (!this.opts.css) {
-            console.warn("No css file provided");
-            return;
-          }
-
           const { filename } = state.file.opts;
+          if (!filename || filename.includes("node_modules")) return;
+
           const options = {
-            paths: this.opts.paths || [],
-            excludes: this.opts.excludes || [],
-            css: this.opts.css,
+            paths: this.opts?.paths || [],
+            excludes: this.opts?.excludes || [],
+            css: this.opts?.css,
           };
 
-          // Normalize filename for cross-platform regex matching
           const normalizedFilename = filename.replace(/\\/g, "/");
           const regex = options.paths.map((p) => new RegExp(p));
           const excludesRegex = options.excludes.map((p) => new RegExp(p));
+
           if (
-            !regex.some((re) => normalizedFilename.match(re) || filename.match(re)) ||
-            excludesRegex.some((re) => normalizedFilename.match(re) || filename.match(re))
+            options.paths.length > 0 &&
+            !regex.some((re) => normalizedFilename.match(re) || filename.match(re))
           ) {
             return;
           }
+          if (excludesRegex.some((re) => normalizedFilename.match(re) || filename.match(re))) {
+            return;
+          }
 
-          state.enabled = true;
+          if (!native || !native.transformJsx) return;
 
-          // Load pre-computed stylesheet for static inlining
-          state.stylesheetData = loadStylesheet(
+          const stylesheetJson = loadStylesheet(
             options.css,
             filename ? nodePath.dirname(filename) : null,
           );
-
-          // Track which runtime helpers we need
-          state.needsGetStyle = false;
-          state.needsGetInheritStyle = false;
-          state.needsMergeStyles = false;
-
-          // Prepare runtime helper declarations
-          state.stylesheetId = path.scope.generateUidIdentifier();
-          state.stylesheet = t.variableDeclaration("var", [
-            t.variableDeclarator(
-              state.stylesheetId,
-              t.callExpression(t.identifier("require"), [t.stringLiteral(options.css)]),
-            ),
-          ]);
-
-          state.getStyleId = path.scope.generateUidIdentifier();
-          state.getStyle = t.variableDeclaration("var", [
-            t.variableDeclarator(
-              state.getStyleId,
-              t.memberExpression(
-                t.memberExpression(
-                  t.callExpression(t.identifier("require"), [
-                    t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime"),
-                  ]),
-                  t.identifier("default"),
-                ),
-                t.identifier("getStyle"),
-              ),
-            ),
-          ]);
-
-          state.getInheritStyleId = path.scope.generateUidIdentifier();
-          state.getInheritStyle = t.variableDeclaration("var", [
-            t.variableDeclarator(
-              state.getInheritStyleId,
-              t.memberExpression(
-                t.memberExpression(
-                  t.callExpression(t.identifier("require"), [
-                    t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime"),
-                  ]),
-                  t.identifier("default"),
-                ),
-                t.identifier("getInheritStyle"),
-              ),
-            ),
-          ]);
-
-          state.mergeStylesId = path.scope.generateUidIdentifier();
-          state.mergeStyles = t.variableDeclaration("var", [
-            t.variableDeclarator(
-              state.mergeStylesId,
-              t.memberExpression(
-                t.memberExpression(
-                  t.callExpression(t.identifier("require"), [
-                    t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime"),
-                  ]),
-                  t.identifier("default"),
-                ),
-                t.identifier("mergeStyles"),
-              ),
-            ),
-          ]);
-        },
-        exit(path, state) {
-          if (!state.enabled) return;
-
-          const helpers = [];
-
-          // Only inject helpers that are actually used
-          if (state.needsGetStyle) {
-            helpers.push(state.stylesheet);
-            helpers.push(state.getStyle);
-          }
-          if (state.needsGetInheritStyle) {
-            helpers.push(state.getInheritStyle);
-          }
-          if (state.needsMergeStyles) {
-            helpers.push(state.mergeStyles);
-          }
-
-          if (helpers.length === 0) return;
-
-          const lastImport = path
-            .get("body")
-            .filter((p) => isImportOrRequire(p))
-            .pop();
-
-          helpers
-            .reverse()
-            .forEach((node) =>
-              lastImport ? lastImport.insertAfter(node) : path.unshiftContainer("body", node),
-            );
-        },
-      },
-      JSXElement(path, state) {
-        if (!state.enabled) return;
-        if (isFragmentElement(t, path.node.openingElement.name)) return;
-
-        // Perform zero-runtime static style inlining for static classes
-        inlineStaticAttributes(path, state, t);
-
-        const openingElement = path.node.openingElement;
-        const isRootLevel = isRootLevelJSXElement(path);
-
-        const shouldCombineStyles = openingElement.attributes.some(
-          (attr) => attr.name?.name === "__combinedStyles",
-        );
-
-        if (shouldCombineStyles) {
-          let styleExpressions;
-
-          // Try static inlining first (if stylesheet loaded and class is static)
-          if (state.stylesheetData) {
-            const staticInfo = tryGetStaticStyleInfo(path, state, t);
-
-            if (staticInfo) {
-              // Static class! Use lightweight mergeStyles
-              styleExpressions = getStaticMergeExpression(path, state, t, staticInfo);
-              state.needsMergeStyles = true;
+          const rawCode = state.file.code;
+
+          try {
+            const res = native.transformJsx(rawCode, {
+              filename,
+              stylesheetJson,
+              sourceMaps: false,
+            });
+
+            if (res && res.code && res.code !== rawCode) {
+              const newAst = parseSync(res.code, {
+                filename,
+                parserOpts: {
+                  plugins: ["jsx", "typescript"],
+                },
+                configFile: false,
+                babelrc: false,
+              });
+
+              if (newAst && newAst.program) {
+                path.replaceWith(newAst.program);
+                path.stop();
+              }
             }
+          } catch {
+            // Silently fall back if native transformation fails
           }
-
-          if (!styleExpressions) {
-            // Fall back to full runtime getStyle
-            state.needsGetStyle = true;
-            styleExpressions = getStyleExpression(path, state, t);
-          }
-
-          const style = openingElement.attributes.find((attr) => attr.name?.name === "style");
-          if (style) {
-            style.value = t.jsxExpressionContainer(styleExpressions);
-          } else {
-            openingElement.attributes.push(
-              t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(styleExpressions)),
-            );
-          }
-        }
+        },
       },
     },
   };

package/src/index.d.ts

@@ -13,8 +13,20 @@ export interface GroupState {
   focus?: boolean;
 }
 
+export interface InheritedStyles {
+  color?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string;
+  letterSpacing?: number;
+  lineHeight?: number;
+  textAlign?: string;
+  textTransform?: string;
+  [key: string]: any;
+}
+
 export const GroupContext: React.Context<GroupState>;
-export const InheritContext: React.Context<Record<string, any> | undefined>;
+export const InheritContext: React.Context<InheritedStyles | undefined>;
 
 export function setGlobalStylesheet(sheet: Record<string, any>): void;
 export function getGlobalStylesheet(): Record<string, any>;
@@ -33,7 +45,7 @@ export function getGlobalStylesheet(): Record<string, any>;
  * });
  * ```
  */
-export function cssInterop<P extends object>(
+export function cssInterop<T = any, P extends object = any>(
   Component: React.ComponentType<P>,
   mapping?: StyleMapping
 ): React.ForwardRefExoticComponent<
@@ -41,13 +53,13 @@ export function cssInterop<P extends object>(
     className?: string;
     contentContainerClassName?: string;
     inheritStyle?: any;
-  } & React.RefAttributes<any>
+  } & React.RefAttributes<T>
 >;
 
 /**
  * Alias for cssInterop.
  */
-export function remapProps<P extends object>(
+export function remapProps<T = any, P extends object = any>(
   Component: React.ComponentType<P>,
   mapping: StyleMapping
 ): React.ForwardRefExoticComponent<
@@ -55,7 +67,7 @@ export function remapProps<P extends object>(
     className?: string;
     contentContainerClassName?: string;
     inheritStyle?: any;
-  } & React.RefAttributes<any>
+  } & React.RefAttributes<T>
 >;
 
 export namespace Runtime {
@@ -73,6 +85,11 @@ export function getStylesheet(css: string, filename?: string): string;
 export function writeStylesheetJSON(content: string, filename?: string): void;
 export function transform(args: { src: string; filename: string; options?: any }): any;
 
+/**
+ * Plug-and-play zero-configuration helper for Expo and React Native Metro bundler.
+ */
+export function withReactNativeCss<T = any>(metroConfig: T, options?: { input?: string }): T;
+
 declare const _default: {
   cssInterop: typeof cssInterop;
   remapProps: typeof remapProps;
@@ -81,9 +98,6 @@ declare const _default: {
   GroupContext: typeof GroupContext;
   InheritContext: typeof InheritContext;
   Runtime: typeof Runtime;
-  getStylesheet: typeof getStylesheet;
-  transform: typeof transform;
-  writeStylesheetJSON: typeof writeStylesheetJSON;
 };
 
 export default _default;

package/src/interop.js

@@ -1,6 +1,18 @@
 import React, { createContext, forwardRef, useContext } from "react";
 import Runtime from "./transformer-runtime.js";
 
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const k of keysA) {
+    if (a[k] !== b[k]) return false;
+  }
+  return true;
+}
+
 export const InheritContext = createContext(undefined);
 export const GroupContext = createContext({ pressed: false, hovered: false, focus: false });
 
@@ -249,7 +261,7 @@ export function cssInterop(Component, mapping = { className: "style" }) {
       );
     }
 
-    if (currentInherit && currentInherit !== parentInherit) {
+    if (currentInherit && !shallowEqual(currentInherit, parentInherit)) {
       return React.createElement(InheritContext.Provider, { value: currentInherit }, element);
     }
 

package/src/metro.js

@@ -0,0 +1,42 @@
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * withReactNativeCss
+ *
+ * Plug-and-play zero-configuration helper for Expo and React Native Metro bundler.
+ *
+ * Automatically:
+ * 1. Configures Metro to handle .css files via @colorye/react-native-css/transformer.
+ * 2. Connects the high-performance Rust SWC native transformer for JSX/TSX.
+ * 3. Adds 'css' to sourceExts.
+ * 4. In-process caches and synchronizes stylesheet JSON without manual setup.
+ *
+ * @param {import('metro-config').MetroConfig} metroConfig
+ * @param {Object} [options]
+ * @param {string} [options.input] - Input CSS path relative to project root (default: 'src/assets/styles/index.css' or 'index.css')
+ * @returns {import('metro-config').MetroConfig}
+ */
+function withReactNativeCss(metroConfig, options = {}) {
+  const config = { ...metroConfig };
+
+  // Ensure resolver & transformer objects exist
+  config.resolver = config.resolver || {};
+  config.transformer = config.transformer || {};
+
+  // 1. Add 'css' to sourceExts if missing
+  const currentSourceExts = config.resolver.sourceExts || [];
+  if (!currentSourceExts.includes("css")) {
+    config.resolver.sourceExts = [...currentSourceExts, "css"];
+  }
+
+  // 2. Wrap or assign babelTransformerPath
+  const defaultTransformerPath = config.transformer.babelTransformerPath || require.resolve("./transformer");
+  config.transformer.babelTransformerPath = defaultTransformerPath;
+
+  return config;
+}
+
+module.exports = {
+  withReactNativeCss,
+};