@colorye/react-native-css 0.3.1 → 0.3.2

package/src/transformer-runtime.js

@@ -7,6 +7,7 @@ try {
 
 const Appearance = RN.Appearance || { getColorScheme: () => "light" };
 const Dimensions = RN.Dimensions || { get: () => ({ width: 375, height: 812 }) };
+const Platform = RN.Platform || { OS: "ios" };
 
 // ============================================================================
 // Constants
@@ -57,7 +58,8 @@ function getColorScheme() {
 function getCacheKey() {
   const { width, height } = getDimensions();
   const colorScheme = getColorScheme();
-  return `${width}x${height}:${colorScheme}`;
+  const os = Platform?.OS || "ios";
+  return `${width}x${height}:${colorScheme}:${os}`;
 }
 
 function invalidateCache() {
@@ -120,6 +122,110 @@ function getFlattenStyle(declarations) {
   return Object.keys(result).length > 0 ? result : undefined;
 }
 
+function resolveCssVars(val, rootVars, localVars) {
+  if (typeof val !== "string" || !val.includes("var(")) return val;
+  let res = val;
+  let iterations = 0;
+  while (res.includes("var(") && iterations < 5) {
+    iterations++;
+    res = res.replace(/var\(\s*(--[a-zA-Z0-9_-]+)(?:\s*,\s*([^)]+))?\s*\)/g, (_, name, fb) => {
+      if (localVars && localVars[name] !== undefined) return localVars[name];
+      return rootVars[name] !== undefined ? rootVars[name] : (fb || "");
+    });
+  }
+  return res;
+}
+
+function resolveCssValue(prop, val, rootVars, localVars) {
+  if (typeof val !== "string") return val;
+  let v = resolveCssVars(val, rootVars, localVars).trim();
+
+  if (prop === "boxShadow") {
+    const parts = v
+      .split(/,(?![^(]*\))/)
+      .map((p) => p.trim())
+      .filter((p) => p && !p.includes("0 0 #0000") && !p.includes("0 0 #000") && !p.includes("0 0 0 0"));
+    if (parts.length === 0) return undefined;
+    v = parts.join(", ");
+  }
+
+  if (v.startsWith("calc(") && v.endsWith(")")) {
+    let inner = v.slice(5, -1).trim();
+    inner = inner.replace(/([\d.]+)rem/g, (_, n) => parseFloat(n) * 16 + "px");
+    inner = inner.replace(/px/g, "");
+    try {
+      v = Function('"use strict"; return (' + inner + ')')();
+    } catch {}
+  }
+
+  if (typeof v === "string" && v.endsWith("rem")) {
+    v = parseFloat(v) * 16;
+  } else if (typeof v === "string" && v.endsWith("px")) {
+    v = parseFloat(v);
+  } else if (typeof v === "string" && (v.endsWith("vh") || v.endsWith("vw"))) {
+    v = parseFloat(v) + "%";
+  }
+
+  if (prop.toLowerCase().endsWith("radius") && (v === "50%" || v === "9999px" || v === 9999)) {
+    return 9999;
+  }
+  if (prop === "fontWeight") {
+    return String(v).replace("px", "").replace("rem", "");
+  }
+  if (
+    typeof v === "string" &&
+    !isNaN(Number(v)) &&
+    !["color", "fontFamily", "fontWeight"].includes(prop) &&
+    !prop.endsWith("Color")
+  ) {
+    v = Number(v);
+  }
+  return v;
+}
+
+function applyResolvedEntry(resolved, entry, rootVars) {
+  if (!entry) return;
+
+  const localVars = {};
+  if (entry._static) {
+    for (const [k, v] of Object.entries(entry._static)) {
+      if (k.startsWith("--") && typeof v === "string") {
+        localVars[k] = v;
+      }
+    }
+  }
+
+  if (entry._static) {
+    for (const [k, v] of Object.entries(entry._static)) {
+      if (k.startsWith("--")) continue;
+      const val = resolveCssValue(k, v, rootVars, localVars);
+      if (val !== undefined && val !== null) {
+        resolved[k] = val;
+      }
+    }
+  }
+
+  if (entry._dynamic) {
+    for (const [k, v] of Object.entries(entry._dynamic)) {
+      if (k.startsWith("--")) continue;
+      const val = resolveCssValue(k, v, rootVars, localVars);
+      if (val !== undefined && val !== null) {
+        resolved[k] = val;
+      }
+    }
+  }
+
+  if (!entry._static && !entry._dynamic) {
+    for (const [k, v] of Object.entries(entry)) {
+      if (k.startsWith("--")) continue;
+      const val = resolveCssValue(k, v, rootVars, localVars);
+      if (val !== undefined && val !== null) {
+        resolved[k] = val;
+      }
+    }
+  }
+}
+
 // ============================================================================
 // Main Native Rust Stylesheet Transform
 // ============================================================================
@@ -129,6 +235,7 @@ function transformStyles(stylesheet, classNames) {
     stylesheet = stylesheet.default;
   }
 
+  const rootVars = stylesheet[":root"] || {};
   const { width, height } = getDimensions();
   const colorScheme = getColorScheme();
 
@@ -145,18 +252,54 @@ function transformStyles(stylesheet, classNames) {
   const classes = classNames.trim().split(/\s+/);
   const resolved = {};
 
-  for (const cls of classes) {
+  const os = Platform?.OS || "ios";
+
+  for (let cls of classes) {
     if (!cls) continue;
+
+    // Platform variants: ios:, android:, web:
+    if (cls.startsWith("ios:")) {
+      if (os !== "ios") continue;
+      cls = cls.slice(4);
+    } else if (cls.startsWith("android:")) {
+      if (os !== "android") continue;
+      cls = cls.slice(8);
+    } else if (cls.startsWith("web:")) {
+      if (os !== "web") continue;
+      cls = cls.slice(4);
+    }
+
+    // Media query variants: sm:, md:, lg:, xl:, 2xl:
+    if (cls.startsWith("sm:")) {
+      if (width < 640) continue;
+      cls = cls.slice(3);
+    } else if (cls.startsWith("md:")) {
+      if (width < 768) continue;
+      cls = cls.slice(3);
+    } else if (cls.startsWith("lg:")) {
+      if (width < 1024) continue;
+      cls = cls.slice(3);
+    } else if (cls.startsWith("xl:")) {
+      if (width < 1280) continue;
+      cls = cls.slice(3);
+    } else if (cls.startsWith("2xl:")) {
+      if (width < 1536) continue;
+      cls = cls.slice(4);
+    }
+
+    // Dark / Light variants
+    if (cls.startsWith("dark:")) {
+      if (colorScheme !== "dark") continue;
+      cls = cls.slice(5);
+    } else if (cls.startsWith("light:")) {
+      if (colorScheme !== "light") continue;
+      cls = cls.slice(6);
+    }
+
     const entry = stylesheet[cls];
     if (!entry) continue;
 
-    if (entry._static) {
-      Object.assign(resolved, entry._static);
-    } else if (entry._dynamic) {
-      Object.assign(resolved, entry._dynamic);
-    } else if (typeof entry === "object") {
-      Object.assign(resolved, entry);
-    }
+    applyResolvedEntry(resolved, entry, rootVars);
   }
 
   const result = Object.keys(resolved).length > 0 ? resolved : undefined;
@@ -170,10 +313,13 @@ function transformStyles(stylesheet, classNames) {
 function getInheritStyle(declarations) {
   if (!declarations) return undefined;
 
+  const flat = Array.isArray(declarations) ? getFlattenStyle(declarations) : declarations;
+  if (!flat || typeof flat !== "object") return undefined;
+
   const inheritDeclarations = {};
   for (const key of INHERIT_PROPERTIES) {
-    if (declarations[key] !== undefined) {
-      inheritDeclarations[key] = declarations[key];
+    if (flat[key] !== undefined) {
+      inheritDeclarations[key] = flat[key];
     }
   }
 
@@ -221,13 +367,21 @@ function mergeStyles(inheritStyle, staticStyles, inlineStyle) {
   const result = {};
   if (inherited) Object.assign(result, inherited);
   if (staticStyles) {
-    for (const key in staticStyles) {
-      if (!key.startsWith("--")) {
-        result[key] = staticStyles[key];
+    const flatStatic = Array.isArray(staticStyles) ? getFlattenStyle(staticStyles) : staticStyles;
+    if (flatStatic && typeof flatStatic === "object") {
+      for (const key in flatStatic) {
+        if (!key.startsWith("--")) {
+          result[key] = flatStatic[key];
+        }
       }
     }
   }
-  if (inlineStyle) Object.assign(result, inlineStyle);
+  if (inlineStyle) {
+    const flatInline = Array.isArray(inlineStyle) ? getFlattenStyle(inlineStyle) : inlineStyle;
+    if (flatInline && typeof flatInline === "object") {
+      Object.assign(result, flatInline);
+    }
+  }
 
   return Object.keys(result).length > 0 ? result : undefined;
 }

package/src/transformer.js

@@ -1,14 +1,46 @@
 import fs from "fs";
 import path from "path";
-import Stylesheet from "./features/stylesheet";
-import { parseStylesheetWithLightning } from "./utils/css";
+
+let native = null;
+try {
+  native = require("./native");
+} catch {
+  try {
+    native = require("../crates/transformer");
+  } catch {}
+}
+
+let cachedStylesheet = null;
+
+function getCachedStylesheetJson(projectRoot) {
+  if (cachedStylesheet) return cachedStylesheet;
+  try {
+    const root = projectRoot || process.cwd();
+    const candidates = [
+      path.resolve(root, "index.css.json"),
+      path.resolve(root, "src/assets/styles/index.css.json"),
+      path.join(__dirname, "exported-stylesheet.json"),
+      path.resolve(__dirname, "../src/exported-stylesheet.json"),
+    ];
+    for (const p of candidates) {
+      if (fs.existsSync(p)) {
+        cachedStylesheet = fs.readFileSync(p, "utf-8");
+        return cachedStylesheet;
+      }
+    }
+  } catch {}
+  return "{}";
+}
 
 export function getStylesheet(css, filename) {
-  const rawStylesheet = parseStylesheetWithLightning(css);
-  const stylesheet = new Stylesheet();
-  stylesheet.setRawStylesheet(rawStylesheet);
+  if (!native || !native.compileCss) {
+    throw new Error(
+      "[@colorye/react-native-css] Native Rust transformer binding is not loaded. Cannot compile CSS.",
+    );
+  }
 
-  const jsonContent = stylesheet.toJSON();
+  const jsonContent = native.compileCss(css);
+  cachedStylesheet = jsonContent;
   writeStylesheetJSON(jsonContent, filename);
 
   return jsonContent;
@@ -58,9 +90,7 @@ export function transform({ src, filename, options }) {
                 const resolved = require.resolve("metro-react-native-babel-transformer", resolveOptions);
                 return eval("require")(resolved);
               } catch {
-                throw new Error(
-                  "Failed to load any upstream babel-transformer. Please ensure either '@expo/metro-config', '@react-native/metro-babel-transformer', or 'metro-react-native-babel-transformer' is installed.",
-                );
+                return null;
               }
             }
           }
@@ -71,13 +101,43 @@ export function transform({ src, filename, options }) {
 
   if (filename.endsWith(".css")) {
     const jsonContent = getStylesheet(src, filename);
-    return resolveTransformer.transform({
-      src: `const sheet = ${jsonContent};\nmodule.exports = sheet;\nmodule.exports.default = sheet;\nmodule.exports.__esModule = true;`,
-      filename,
-      options,
-    });
+    const cssCode = `const sheet = ${jsonContent};\nmodule.exports = sheet;\nmodule.exports.default = sheet;\nmodule.exports.__esModule = true;`;
+    if (resolveTransformer && resolveTransformer.transform) {
+      return resolveTransformer.transform({
+        src: cssCode,
+        filename,
+        options,
+      });
+    }
+    return { code: cssCode, map: null };
+  }
+
+  // Fast native Rust SWC transformer for JSX/TSX
+  if (
+    native &&
+    native.transformJsx &&
+    (filename.endsWith(".tsx") || filename.endsWith(".jsx")) &&
+    !filename.includes("node_modules")
+  ) {
+    try {
+      const stylesheetJson = options?.stylesheetJson || getCachedStylesheetJson(projectRoot);
+      const res = native.transformJsx(src, {
+        filename,
+        stylesheetJson,
+        sourceMaps: true,
+      });
+      if (res && res.code) {
+        src = res.code;
+      }
+    } catch {
+      // Graceful fallback to Babel if native transform hits unexpected syntax
+    }
+  }
+
+  if (resolveTransformer && resolveTransformer.transform) {
+    return resolveTransformer.transform({ src, filename, options });
   }
-  return resolveTransformer.transform({ src, filename, options });
+  return { code: src, map: null };
 }
 
 export default {