@colorye/react-native-css 0.3.0

package/src/index.js

@@ -0,0 +1,29 @@
+export {
+  GroupContext,
+  InheritContext,
+  cssInterop,
+  getGlobalStylesheet,
+  remapProps,
+  setGlobalStylesheet,
+} from "./interop.js";
+export { default as Runtime } from "./transformer-runtime.js";
+
+import {
+  GroupContext,
+  InheritContext,
+  cssInterop,
+  getGlobalStylesheet,
+  remapProps,
+  setGlobalStylesheet,
+} from "./interop.js";
+import Runtime from "./transformer-runtime.js";
+
+export default {
+  cssInterop,
+  remapProps,
+  setGlobalStylesheet,
+  getGlobalStylesheet,
+  GroupContext,
+  InheritContext,
+  Runtime,
+};

package/src/interop.js

@@ -0,0 +1,269 @@
+import React, { createContext, forwardRef, useContext } from "react";
+import Runtime from "./transformer-runtime.js";
+
+export const InheritContext = createContext(undefined);
+export const GroupContext = createContext({ pressed: false, hovered: false, focus: false });
+
+let globalStylesheet = {};
+
+try {
+  const raw = require("./exported-stylesheet.json");
+  let current = raw;
+  while (current?.default && typeof current.default === "object" && !current[":root"]) {
+    current = current.default;
+  }
+  globalStylesheet = current || {};
+} catch {
+  // Fallback to empty if not yet compiled
+}
+
+export function setGlobalStylesheet(sheet) {
+  if (sheet && typeof sheet === "object") {
+    let current = sheet;
+    while (current?.default && typeof current.default === "object" && !current[":root"]) {
+      current = current.default;
+    }
+    globalStylesheet = current;
+    Runtime.clearCache?.();
+  }
+}
+
+export function getGlobalStylesheet() {
+  return globalStylesheet;
+}
+
+/**
+ * cssInterop(Component, mapping)
+ *
+ * Wraps any React Native or third-party component to support className mapping.
+ *
+ * @example
+ * cssInterop(FlashList, {
+ *   className: "style",
+ *   contentContainerClassName: "contentContainerStyle",
+ * });
+ *
+ * @param {React.ComponentType} Component
+ * @param {Record<string, string>} mapping Mapping of class props to style props
+ * @returns {React.ForwardRefExoticComponent}
+ */
+export function cssInterop(Component, mapping = { className: "style" }) {
+  const InteropComponent = forwardRef((props, ref) => {
+    const parentInherit = useContext(InheritContext);
+    const parentGroup = useContext(GroupContext);
+    const inheritStyle = props.inheritStyle || parentInherit;
+    const [groupPressed, setGroupPressed] = React.useState(false);
+
+    const nextProps = { ...props };
+    if (ref) {
+      nextProps.ref = ref;
+    }
+
+    const sheet = getGlobalStylesheet();
+    let currentInherit = parentInherit;
+    let isGroupProvider = false;
+
+    // Check if this component acts as a group container
+    for (const classProp of Object.keys(mapping)) {
+      const val = props[classProp];
+      if (typeof val === "string" && (val === "group" || val.split(/\s+/).includes("group"))) {
+        isGroupProvider = true;
+        break;
+      }
+    }
+
+    if (isGroupProvider) {
+      const originalOnPressIn = props.onPressIn;
+      const originalOnPressOut = props.onPressOut;
+      nextProps.onPressIn = (e) => {
+        setGroupPressed(true);
+        originalOnPressIn?.(e);
+      };
+      nextProps.onPressOut = (e) => {
+        setGroupPressed(false);
+        originalOnPressOut?.(e);
+      };
+    }
+
+    for (const [classProp, styleProp] of Object.entries(mapping)) {
+      const classValue = props[classProp];
+      const hasClass = typeof classValue === "string" && classValue.length > 0;
+      const isPrimaryStyle = styleProp === "style";
+      const hasInherit = isPrimaryStyle && Boolean(inheritStyle);
+
+      if (hasClass) {
+        const hasActiveVariants = /(^|\s)(active|pressed):/.test(classValue);
+        const hasDisabledVariants = /(^|\s)disabled:/.test(classValue);
+        const hasGroupActiveVariants = /(^|\s)group-(active|pressed):/.test(classValue);
+
+        const isDisabled = Boolean(props.disabled || props.accessibilityState?.disabled);
+
+        if ((hasActiveVariants || hasDisabledVariants || hasGroupActiveVariants) && isPrimaryStyle) {
+          const classes = classValue.trim().split(/\s+/);
+          const normalClasses = [];
+          const activeClasses = [];
+          const disabledClasses = [];
+          const groupActiveClasses = [];
+
+          for (const cls of classes) {
+            if (cls.startsWith("active:") || cls.startsWith("pressed:")) {
+              const baseCls = cls.replace(/^(active|pressed):/, "");
+              activeClasses.push(baseCls);
+            } else if (cls.startsWith("disabled:")) {
+              const baseCls = cls.replace(/^disabled:/, "");
+              disabledClasses.push(baseCls);
+            } else if (cls.startsWith("group-active:") || cls.startsWith("group-pressed:")) {
+              const baseCls = cls.replace(/^group-(active|pressed):/, "");
+              groupActiveClasses.push(baseCls);
+            } else {
+              normalClasses.push(cls);
+            }
+          }
+
+          const normalStyle = Runtime.getStyle(sheet, [
+            hasInherit ? inheritStyle : undefined,
+            normalClasses.join(" "),
+            typeof props[styleProp] === "object" ? props[styleProp] : undefined,
+          ]);
+
+          const activeStyle = activeClasses.length > 0
+            ? Runtime.getStyle(sheet, [undefined, activeClasses.join(" "), undefined])
+            : undefined;
+
+          const disabledStyle = disabledClasses.length > 0
+            ? Runtime.getStyle(sheet, [undefined, disabledClasses.join(" "), undefined])
+            : undefined;
+
+          const groupActiveStyle = (hasGroupActiveVariants && parentGroup.pressed && groupActiveClasses.length > 0)
+            ? Runtime.getStyle(sheet, [undefined, groupActiveClasses.join(" "), undefined])
+            : undefined;
+
+          if (hasActiveVariants || typeof props[styleProp] === "function") {
+            nextProps[styleProp] = (state) => {
+              const isPressed = (state && state.pressed) || false;
+              const userStyle = typeof props[styleProp] === "function" ? props[styleProp](state) : null;
+              const currentStyles = [normalStyle, groupActiveStyle];
+
+              if (isPressed && !isDisabled && activeStyle) {
+                currentStyles.push(activeStyle);
+              }
+              if (isDisabled && disabledStyle) {
+                currentStyles.push(disabledStyle);
+              }
+              if (userStyle) {
+                currentStyles.push(userStyle);
+              }
+
+              return currentStyles.filter(Boolean);
+            };
+          } else {
+            const currentStyles = [
+              normalStyle,
+              groupActiveStyle,
+              isDisabled ? disabledStyle : undefined,
+              typeof props[styleProp] === "object" ? props[styleProp] : undefined,
+            ].filter(Boolean);
+            nextProps[styleProp] =
+              currentStyles.length === 1
+                ? currentStyles[0]
+                : currentStyles.length > 1
+                  ? currentStyles
+                  : undefined;
+          }
+
+          const inheritable = Runtime.getInheritStyle(normalStyle);
+          if (inheritable) {
+            currentInherit = parentInherit
+              ? { ...parentInherit, ...inheritable }
+              : inheritable;
+          }
+        } else {
+          // Dynamic className present - runtime resolution
+          const computedStyle = Runtime.getStyle(sheet, [
+            hasInherit ? inheritStyle : undefined,
+            classValue,
+            props[styleProp],
+          ]);
+
+          if (computedStyle !== undefined) {
+            nextProps[styleProp] = computedStyle;
+
+            if (isPrimaryStyle) {
+              const inheritable = Runtime.getInheritStyle(computedStyle);
+              if (inheritable) {
+                currentInherit = parentInherit
+                  ? { ...parentInherit, ...inheritable }
+                  : inheritable;
+              }
+            }
+          }
+        }
+        delete nextProps[classProp];
+      } else if (isPrimaryStyle) {
+        // Static inlined style or plain style prop with inheritance
+        const ownStyle = props[styleProp];
+
+        if (typeof ownStyle === "function") {
+          if (hasInherit) {
+            nextProps[styleProp] = (state) => {
+              const res = ownStyle(state);
+              return [inheritStyle, res];
+            };
+          } else {
+            nextProps[styleProp] = ownStyle;
+          }
+        } else {
+          const flatOwnStyle = ownStyle ? Runtime.getFlattenStyle(ownStyle) : undefined;
+
+          if (hasInherit) {
+            const merged = Runtime.mergeStyles(inheritStyle, flatOwnStyle, undefined);
+            if (merged !== undefined) {
+              nextProps[styleProp] = merged;
+            }
+          }
+
+          // Inheritable styles come from either the component's own style or inherited from parent
+          const combinedForInherit = hasInherit
+            ? Runtime.mergeStyles(inheritStyle, flatOwnStyle, undefined)
+            : flatOwnStyle;
+          const ownInheritable = Runtime.getInheritStyle(combinedForInherit);
+
+          if (ownInheritable) {
+            currentInherit = parentInherit
+              ? { ...parentInherit, ...ownInheritable }
+              : ownInheritable;
+          }
+        }
+      }
+    }
+
+    delete nextProps.inheritStyle;
+
+    let element = React.createElement(Component, nextProps);
+
+    if (isGroupProvider) {
+      element = React.createElement(
+        GroupContext.Provider,
+        { value: { ...parentGroup, pressed: groupPressed } },
+        element,
+      );
+    }
+
+    if (currentInherit && currentInherit !== parentInherit) {
+      return React.createElement(InheritContext.Provider, { value: currentInherit }, element);
+    }
+
+    return element;
+  });
+
+  const name = Component.displayName || Component.name || "Component";
+  InteropComponent.displayName = `CssInterop(${name})`;
+
+  return InteropComponent;
+}
+
+export function remapProps(Component, mapping) {
+  return cssInterop(Component, mapping);
+}
+
+export default cssInterop;

package/src/transformer-runtime.js

@@ -0,0 +1,241 @@
+let RN = {};
+try {
+  RN = require("react-native");
+} catch {
+  // Safe in Node/Babel build environment
+}
+
+const Appearance = RN.Appearance || { getColorScheme: () => "light" };
+const Dimensions = RN.Dimensions || { get: () => ({ width: 375, height: 812 }) };
+
+// ============================================================================
+// Constants
+// ============================================================================
+const INHERIT_PROPERTIES = [
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "fontVariant",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textTransform",
+];
+
+// ============================================================================
+// Cached Dimensions and Appearance
+// ============================================================================
+let cachedDimensions = null;
+let cachedColorScheme = null;
+let TRANSFORM_CACHE = {};
+let currentCacheKey = null;
+
+function getDimensions() {
+  if (!cachedDimensions) {
+    try {
+      cachedDimensions = Dimensions?.get?.("window") || { width: 375, height: 812 };
+    } catch {
+      cachedDimensions = { width: 375, height: 812 };
+    }
+  }
+  return cachedDimensions;
+}
+
+function getColorScheme() {
+  if (cachedColorScheme === null) {
+    try {
+      cachedColorScheme = Appearance?.getColorScheme?.() || "light";
+    } catch {
+      cachedColorScheme = "light";
+    }
+  }
+  return cachedColorScheme;
+}
+
+function getCacheKey() {
+  const { width, height } = getDimensions();
+  const colorScheme = getColorScheme();
+  return `${width}x${height}:${colorScheme}`;
+}
+
+function invalidateCache() {
+  cachedDimensions = null;
+  cachedColorScheme = null;
+  TRANSFORM_CACHE = {};
+  currentCacheKey = null;
+}
+
+function clearCache() {
+  TRANSFORM_CACHE = {};
+  currentCacheKey = null;
+}
+
+try {
+  Dimensions?.addEventListener?.("change", invalidateCache);
+  Appearance?.addChangeListener?.(invalidateCache);
+} catch {}
+
+// ============================================================================
+// Flatten Style
+// ============================================================================
+function getFlattenStyle(declarations) {
+  if (!Array.isArray(declarations)) {
+    return declarations;
+  }
+
+  const result = {};
+
+  function merge(item) {
+    if (!item) return;
+    if (Array.isArray(item)) {
+      for (let i = 0; i < item.length; i++) {
+        merge(item[i]);
+      }
+    } else {
+      Object.assign(result, item);
+    }
+  }
+
+  for (let i = 0; i < declarations.length; i++) {
+    merge(declarations[i]);
+  }
+
+  const borderStyles = ["borderBottomStyle", "borderTopStyle", "borderLeftStyle", "borderRightStyle"];
+  for (const bs of borderStyles) {
+    if (result[bs] !== undefined) {
+      if (result.borderStyle === undefined) {
+        result.borderStyle = ["solid", "dotted", "dashed"].includes(result[bs]) ? result[bs] : "solid";
+      }
+      delete result[bs];
+    }
+  }
+  if (result.borderStyle !== undefined) {
+    if (typeof result.borderStyle !== "string" || !["solid", "dotted", "dashed"].includes(result.borderStyle)) {
+      delete result.borderStyle;
+    }
+  }
+
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+// ============================================================================
+// Main Native Rust Stylesheet Transform
+// ============================================================================
+function transformStyles(stylesheet, classNames) {
+  if (!stylesheet || !classNames) return undefined;
+  if (stylesheet.default && typeof stylesheet.default === "object" && !stylesheet[":root"]) {
+    stylesheet = stylesheet.default;
+  }
+
+  const { width, height } = getDimensions();
+  const colorScheme = getColorScheme();
+
+  const cacheKey = getCacheKey();
+  if (cacheKey !== currentCacheKey) {
+    TRANSFORM_CACHE = {};
+    currentCacheKey = cacheKey;
+  }
+
+  if (TRANSFORM_CACHE[classNames] !== undefined) {
+    return TRANSFORM_CACHE[classNames];
+  }
+
+  const classes = classNames.trim().split(/\s+/);
+  const resolved = {};
+
+  for (const cls of classes) {
+    if (!cls) continue;
+    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);
+    }
+  }
+
+  const result = Object.keys(resolved).length > 0 ? resolved : undefined;
+  TRANSFORM_CACHE[classNames] = result;
+  return result;
+}
+
+// ============================================================================
+// Inherit Style
+// ============================================================================
+function getInheritStyle(declarations) {
+  if (!declarations) return undefined;
+
+  const inheritDeclarations = {};
+  for (const key of INHERIT_PROPERTIES) {
+    if (declarations[key] !== undefined) {
+      inheritDeclarations[key] = declarations[key];
+    }
+  }
+
+  return Object.keys(inheritDeclarations).length > 0 ? inheritDeclarations : undefined;
+}
+
+// ============================================================================
+// Main Entry Point
+// ============================================================================
+function getStyle(stylesheet, [inheritStyle, className, style]) {
+  const inherited = getInheritStyle(getFlattenStyle(inheritStyle));
+  const transformed = transformStyles(stylesheet, className);
+  const result = getFlattenStyle([inherited, transformed, style]);
+  return result;
+}
+
+// ============================================================================
+// Lightweight Merge for Static Styles
+// ============================================================================
+function mergeStyles(inheritStyle, staticStyles, inlineStyle) {
+  if (!inheritStyle && !inlineStyle) {
+    return staticStyles;
+  }
+
+  let inherited;
+  if (inheritStyle) {
+    const flatInherit = getFlattenStyle(inheritStyle);
+    if (flatInherit) {
+      inherited = {};
+      for (const key of INHERIT_PROPERTIES) {
+        if (flatInherit[key] !== undefined) {
+          inherited[key] = flatInherit[key];
+        }
+      }
+      if (Object.keys(inherited).length === 0) {
+        inherited = undefined;
+      }
+    }
+  }
+
+  if (!inherited && !inlineStyle) {
+    return staticStyles;
+  }
+
+  const result = {};
+  if (inherited) Object.assign(result, inherited);
+  if (staticStyles) {
+    for (const key in staticStyles) {
+      if (!key.startsWith("--")) {
+        result[key] = staticStyles[key];
+      }
+    }
+  }
+  if (inlineStyle) Object.assign(result, inlineStyle);
+
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+export default {
+  getFlattenStyle,
+  getStyle,
+  getInheritStyle,
+  mergeStyles,
+  clearCache,
+};

package/src/transformer.js

@@ -0,0 +1,87 @@
+import fs from "fs";
+import path from "path";
+import Stylesheet from "./features/stylesheet";
+import { parseStylesheetWithLightning } from "./utils/css";
+
+export function getStylesheet(css, filename) {
+  const rawStylesheet = parseStylesheetWithLightning(css);
+  const stylesheet = new Stylesheet();
+  stylesheet.setRawStylesheet(rawStylesheet);
+
+  const jsonContent = stylesheet.toJSON();
+  writeStylesheetJSON(jsonContent, filename);
+
+  return jsonContent;
+}
+
+export function writeStylesheetJSON(content, filename) {
+  try {
+    const distPath = path.join(__dirname, "exported-stylesheet.json");
+    fs.writeFileSync(distPath, content, { mode: 0o755 });
+
+    const srcPath = path.resolve(__dirname, "../src/exported-stylesheet.json");
+    if (fs.existsSync(path.dirname(srcPath))) {
+      fs.writeFileSync(srcPath, content, { mode: 0o755 });
+    }
+
+    if (filename) {
+      fs.writeFileSync(`${filename}.json`, content, { mode: 0o755 });
+    }
+  } catch {
+    // Silently fail - Babel will fall back to runtime
+  }
+}
+
+export function transform({ src, filename, options }) {
+  const projectRoot = options && options.projectRoot ? options.projectRoot : process.cwd();
+
+  const resolveTransformer = (() => {
+    try {
+      return require("@expo/metro-config/babel-transformer");
+    } catch {
+      try {
+        return require("@react-native/metro-babel-transformer");
+      } catch {
+        try {
+          return require("metro-react-native-babel-transformer");
+        } catch {
+          const resolveOptions = { paths: [projectRoot] };
+          try {
+            const resolved = require.resolve("@expo/metro-config/babel-transformer", resolveOptions);
+            return eval("require")(resolved);
+          } catch {
+            try {
+              const resolved = require.resolve("@react-native/metro-babel-transformer", resolveOptions);
+              return eval("require")(resolved);
+            } catch {
+              try {
+                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.",
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  })();
+
+  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,
+    });
+  }
+  return resolveTransformer.transform({ src, filename, options });
+}
+
+export default {
+  transform,
+  getStylesheet,
+  writeStylesheetJSON,
+};