@colorye/react-native-css 0.2.1

package/src/features/css-transform.js

@@ -0,0 +1,419 @@
+const UNSUPPORTED_PROPERTIES = ["outline"];
+const remOrEmUnitRe = /([\d.]+)(?:rem|em)\b/g;
+
+export default function CssTransform() {
+  this.transformUnsafeValue = (property, value) => {
+    if (!this.isPropertySupported(property, value)) {
+      console.info("UNSUPPORTED", property, value);
+      return [];
+    }
+
+    if (typeof value === "string") {
+      value = value.trim();
+      value = this.transformImportant(property, value);
+    }
+    value = this.transformPosition(property, value);
+    value = this.transformBorderRadius(property, value);
+    value = this.transformOpacity(property, value);
+
+    property = this.getAliasedPropertyName(property);
+
+    return [property, value];
+  };
+
+  this.transformUnsupportedUnit = (value) => {
+    if (value === undefined || typeof value !== "string") return value;
+    remOrEmUnitRe.lastIndex = 0;
+    return value.replace(remOrEmUnitRe, (_, rem) => {
+      return rem * 16;
+    });
+  };
+
+  this.transformViewportUnit = (value, { width, height } = {}) => {
+    if (value === undefined || typeof value !== "string") return value;
+    if (!width || !height) return value;
+
+    const viewportUnitRe = /([+-]?[0-9.]+)(vh|vw|vmin|vmax)\b/g;
+    const dimensionsMap = {
+      vw: width,
+      vh: height,
+    };
+    return value.replace(viewportUnitRe, (_, number, unit) => {
+      return (parseFloat(number) * dimensionsMap[unit]) / 100;
+    });
+  };
+
+  this.removeUnit = (value) => {
+    if (value === undefined || typeof value !== "string") return value;
+    return value.replace(/px/g, "");
+  };
+
+  this.isPropertySupported = (property, value) => {
+    if (UNSUPPORTED_PROPERTIES.includes(property)) return false;
+    if (value === undefined) return false;
+    if (!["number", "string"].includes(typeof value)) return false;
+    return true;
+  };
+
+  this.transformImportant = (property, value) => {
+    if (typeof value !== "string") return value;
+    return value.replace(/!important/g, "");
+  };
+
+  this.transformPosition = (property, value) => {
+    if (property === "position" && value === "fixed") {
+      return "absolute";
+    }
+    return value;
+  };
+
+  this.transformBorderRadius = (property, value) => {
+    if (property.toLowerCase().endsWith("radius") && typeof value === "string" && value.includes("%")) {
+      return 9999;
+    }
+    return value;
+  };
+
+  this.transformOpacity = (property, value) => {
+    if (property === "opacity" && typeof value === "string" && value.endsWith("%")) {
+      const num = parseFloat(value);
+      if (!isNaN(num)) {
+        return num / 100;
+      }
+    }
+    return value;
+  };
+
+  this.transformBorder = (property, value) => {
+    if (value === "none") {
+      return { [`${property}Width`]: 0 };
+    }
+
+    const borderRe = /(\S+)(?:\s+(solid|dashed|dotted)(?:\s+(\S+))?)?/g;
+    const [, width, style, color] = borderRe.exec(String(value)) || [];
+
+    const transformed = {};
+
+    if (width) {
+      transformed[`${property}Width`] = isNaN(width) ? width : Number(width);
+    } else {
+      transformed[`${property}Width`] = 0;
+    }
+
+    if (style) {
+      transformed[`${property}Style`] = style;
+    }
+
+    if (color) {
+      transformed[`${property}Color`] = color;
+    }
+
+    return transformed;
+  };
+
+  this.transformSpacing = (property, value) => {
+    const strValue = String(value).trim();
+    const parts = [];
+    let current = "";
+    let depth = 0;
+    for (let i = 0; i < strValue.length; i++) {
+      const char = strValue[i];
+      if (char === "(") {
+        depth++;
+        current += char;
+      } else if (char === ")") {
+        depth--;
+        current += char;
+      } else if (char === " " && depth === 0) {
+        if (current) {
+          parts.push(current);
+          current = "";
+        }
+      } else {
+        current += char;
+      }
+    }
+    if (current) {
+      parts.push(current);
+    }
+
+    const cleanedParts = parts.filter(Boolean);
+
+    const toNumberOrString = (val) => {
+      return isNaN(val) ? val : Number(val);
+    };
+
+    const transformed = {};
+
+    if (cleanedParts.length === 0) {
+      transformed[`${property}Top`] = 0;
+      transformed[`${property}Right`] = 0;
+      transformed[`${property}Bottom`] = 0;
+      transformed[`${property}Left`] = 0;
+    } else if (cleanedParts.length === 1) {
+      const top = cleanedParts[0];
+      transformed[`${property}Top`] = toNumberOrString(top);
+      transformed[`${property}Right`] = toNumberOrString(top);
+      transformed[`${property}Bottom`] = toNumberOrString(top);
+      transformed[`${property}Left`] = toNumberOrString(top);
+    } else if (cleanedParts.length === 2) {
+      const top = cleanedParts[0];
+      const right = cleanedParts[1];
+      transformed[`${property}Top`] = toNumberOrString(top);
+      transformed[`${property}Right`] = toNumberOrString(right);
+      transformed[`${property}Bottom`] = toNumberOrString(top);
+      transformed[`${property}Left`] = toNumberOrString(right);
+    } else if (cleanedParts.length === 3) {
+      const top = cleanedParts[0];
+      const right = cleanedParts[1];
+      const bottom = cleanedParts[2];
+      transformed[`${property}Top`] = toNumberOrString(top);
+      transformed[`${property}Right`] = toNumberOrString(right);
+      transformed[`${property}Bottom`] = toNumberOrString(bottom);
+      transformed[`${property}Left`] = toNumberOrString(right);
+    } else {
+      const top = cleanedParts[0];
+      const right = cleanedParts[1];
+      const bottom = cleanedParts[2];
+      const left = cleanedParts[3];
+      transformed[`${property}Top`] = toNumberOrString(top);
+      transformed[`${property}Right`] = toNumberOrString(right);
+      transformed[`${property}Bottom`] = toNumberOrString(bottom);
+      transformed[`${property}Left`] = toNumberOrString(left);
+    }
+
+    return transformed;
+  };
+
+  this.transformFontWeight = (property, value) => {
+    const fontWeightRe = /(normal|bold|100|200|300|400|500|600|700|800|900)/g;
+
+    if (!fontWeightRe.test(String(value))) return;
+    return {
+      [property]: String(value),
+    };
+  };
+
+  this.transformTransform = (property, value) => {
+    const transformRe =
+      /(perspective|rotate|rotateX|rotateY|scale|scaleX|scaleY|translate|translateX|translateY|skew|skewX|skewY)\s*\(\s*([^,)]+)[,\s]*([^)]+)?\)/g;
+
+    const transforms = [];
+    let match;
+    const strValue = String(value);
+    do {
+      match = transformRe.exec(strValue);
+      if (!match) break;
+
+      const [, token, val1, val2] = match;
+
+      if (["translate", "skew"].includes(token)) {
+        transforms.push({ [`${token}X`]: isNaN(val1) ? val1 : Number(val1) });
+        transforms.push({ [`${token}Y`]: isNaN(val2) ? val2 : Number(val2) });
+      } else {
+        transforms.push({ [token]: isNaN(val1) ? val1 : Number(val1) });
+      }
+    } while (match);
+
+    return {
+      [property]: transforms,
+    };
+  };
+
+  this.transformFontScaling = (property, value, { width, roundFn }) => {
+    if (!["fontSize", "lineHeight"].includes(property)) return value;
+
+    // Base width for design (iPhone 6/7/8)
+    const baseWidth = 375;
+
+    // Calculate scaling factor based on device width
+    const scaleFactor = width ? width / baseWidth : 1;
+    if (!isNaN(value)) {
+      return roundFn(Number(value) * scaleFactor);
+    }
+
+    return value;
+  };
+
+  this.transformLogicalProperty = (property, value) => {
+    const strValue = String(value).trim();
+    const parts = [];
+    let current = "";
+    let depth = 0;
+    for (let i = 0; i < strValue.length; i++) {
+      const char = strValue[i];
+      if (char === "(") {
+        depth++;
+        current += char;
+      } else if (char === ")") {
+        depth--;
+        current += char;
+      } else if (char === " " && depth === 0) {
+        if (current) {
+          parts.push(current);
+          current = "";
+        }
+      } else {
+        current += char;
+      }
+    }
+    if (current) {
+      parts.push(current);
+    }
+
+    const cleanedParts = parts.filter(Boolean);
+
+    const toNumberOrString = (val) => {
+      return isNaN(val) ? val : Number(val);
+    };
+
+    if (property === "paddingInlineStart") return { paddingStart: toNumberOrString(value) };
+    if (property === "paddingInlineEnd") return { paddingEnd: toNumberOrString(value) };
+    if (property === "marginInlineStart") return { marginStart: toNumberOrString(value) };
+    if (property === "marginInlineEnd") return { marginEnd: toNumberOrString(value) };
+    if (property === "insetInlineStart") return { start: toNumberOrString(value) };
+    if (property === "insetInlineEnd") return { end: toNumberOrString(value) };
+    if (property === "insetBlockStart") return { top: toNumberOrString(value) };
+    if (property === "insetBlockEnd") return { bottom: toNumberOrString(value) };
+
+    if (property === "paddingInline") {
+      if (cleanedParts.length === 1) {
+        return { paddingHorizontal: toNumberOrString(cleanedParts[0]) };
+      }
+      if (cleanedParts.length >= 2) {
+        return {
+          paddingStart: toNumberOrString(cleanedParts[0]),
+          paddingEnd: toNumberOrString(cleanedParts[1]),
+        };
+      }
+    }
+
+    if (property === "marginInline") {
+      if (cleanedParts.length === 1) {
+        return { marginHorizontal: toNumberOrString(cleanedParts[0]) };
+      }
+      if (cleanedParts.length >= 2) {
+        return {
+          marginStart: toNumberOrString(cleanedParts[0]),
+          marginEnd: toNumberOrString(cleanedParts[1]),
+        };
+      }
+    }
+
+    if (property === "paddingBlock") {
+      if (cleanedParts.length === 1) {
+        return { paddingVertical: toNumberOrString(cleanedParts[0]) };
+      }
+      if (cleanedParts.length >= 2) {
+        return {
+          paddingTop: toNumberOrString(cleanedParts[0]),
+          paddingBottom: toNumberOrString(cleanedParts[1]),
+        };
+      }
+    }
+
+    if (property === "marginBlock") {
+      if (cleanedParts.length === 1) {
+        return { marginVertical: toNumberOrString(cleanedParts[0]) };
+      }
+      if (cleanedParts.length >= 2) {
+        return {
+          marginTop: toNumberOrString(cleanedParts[0]),
+          marginBottom: toNumberOrString(cleanedParts[1]),
+        };
+      }
+    }
+
+    if (property === "insetInline") {
+      if (cleanedParts.length === 1) {
+        return {
+          left: toNumberOrString(cleanedParts[0]),
+          right: toNumberOrString(cleanedParts[0]),
+        };
+      }
+      if (cleanedParts.length >= 2) {
+        return {
+          start: toNumberOrString(cleanedParts[0]),
+          end: toNumberOrString(cleanedParts[1]),
+        };
+      }
+    }
+
+    if (property === "insetBlock") {
+      if (cleanedParts.length === 1) {
+        return {
+          top: toNumberOrString(cleanedParts[0]),
+          bottom: toNumberOrString(cleanedParts[0]),
+        };
+      }
+      if (cleanedParts.length >= 2) {
+        return {
+          top: toNumberOrString(cleanedParts[0]),
+          bottom: toNumberOrString(cleanedParts[1]),
+        };
+      }
+    }
+
+    return null;
+  };
+
+  this.transform = (property, value, { width, height }) => {
+    if (property.toLowerCase().endsWith("radius")) {
+      value = this.transformBorderRadius(property, value);
+    }
+
+    if (property === "opacity") {
+      value = this.transformOpacity(property, value);
+    }
+
+    if (
+      [
+        "paddingInline",
+        "marginInline",
+        "paddingBlock",
+        "marginBlock",
+        "paddingInlineStart",
+        "paddingInlineEnd",
+        "marginInlineStart",
+        "marginInlineEnd",
+        "insetInline",
+        "insetInlineStart",
+        "insetInlineEnd",
+        "insetBlock",
+        "insetBlockStart",
+        "insetBlockEnd",
+      ].includes(property)
+    ) {
+      return this.transformLogicalProperty(property, value);
+    }
+
+    if (["border", "borderTop", "borderBottom", "borderLeft", "borderRight"].includes(property)) {
+      return this.transformBorder(property, value);
+    }
+
+    if (["padding", "margin"].includes(property)) {
+      return this.transformSpacing(property, value);
+    }
+
+    if (["flex"].includes(property)) {
+      return { flex: parseInt(value) };
+    }
+
+    if (["fontWeight"].includes(property)) {
+      return this.transformFontWeight(property, value);
+    }
+
+    if (["transform"].includes(property)) {
+      return this.transformTransform(property, value);
+    }
+
+    return { [property]: isNaN(value) ? value : Number(value) };
+  };
+
+  this.getAliasedPropertyName = (property) => {
+    if (property === "background") property = "backgroundColor";
+    return property;
+  };
+
+  return this;
+}

package/src/features/css-vars.js

@@ -0,0 +1,93 @@
+import CssMedia from "./css-media";
+
+const DEFAULT_VARIABLE_VALUE = 0;
+
+export default function CssVars() {
+  this.global = {};
+  this.data = {};
+
+  const media = new CssMedia();
+
+  this.setGlobal = (declarations, { width, height } = {}) => {
+    for (const property in declarations) {
+      const value = declarations[property];
+
+      const [isMedia, matchedMedia] = media.match(property, { width, height });
+      if (isMedia) {
+        if (matchedMedia) {
+          this.setGlobal(value);
+        }
+
+        continue;
+      }
+
+      if (this.isVar(property)) {
+        this.global[property] = value;
+      }
+    }
+  };
+
+  this.getGlobal = () => {
+    return this.global;
+  };
+
+  this.set = (selector, declarations, { width, height } = {}) => {
+    for (const property in declarations) {
+      const value = declarations[property];
+
+      const [isMedia, matchedMedia] = media.match(property, { width, height });
+      if (isMedia) {
+        if (matchedMedia) {
+          this.set(selector, value);
+        }
+
+        continue;
+      }
+
+      if (this.isVar(property)) {
+        if (!this.data[selector]) this.data[selector] = {};
+        this.data[selector][property] = value;
+      }
+    }
+  };
+
+  this.get = (selector) => {
+    return {
+      ...this.global,
+      ...(this.data[selector] || {}),
+    };
+  };
+
+  this.isVar = (property) => {
+    return /^--[\w-]+/.test(property);
+  };
+
+  this.injectVar = (selector, value) => {
+    if (value === undefined) return value;
+
+    const variables = this.get(selector);
+    const resolve = (val, seen = new Set()) => {
+      if (typeof val !== "string") return val;
+
+      return val.replace(
+        /var\((--[^,)]+)(?:,\s*([^)]*))?\)/g,
+        function (match, variableName, defaultValue) {
+          if (seen.has(variableName)) {
+            return defaultValue !== undefined ? defaultValue : DEFAULT_VARIABLE_VALUE;
+          }
+          seen.add(variableName);
+          const resolvedVal = variables[variableName];
+          if (resolvedVal === undefined || resolvedVal === "initial") {
+            return defaultValue !== undefined ? defaultValue : DEFAULT_VARIABLE_VALUE;
+          }
+          return resolve(resolvedVal, seen);
+        },
+      );
+    };
+
+    const resolved = resolve(value);
+    return resolved;
+  };
+
+  return this;
+}

package/src/features/stylesheet.js

@@ -0,0 +1,82 @@
+import { camelize } from "../utils/helper";
+import { precomputeDeclaration } from "./build-transform";
+
+const SUPPORTED_RULE_TYPES = ["rule", "media"];
+
+// Regex for CSS variable detection
+const cssVarRe = /^--[\w-]+/;
+
+export default function Stylesheet() {
+  // Store raw declarations (before pre-computation)
+  this.rawStylesheet = {};
+  // Store pre-computed declarations
+  this.stylesheet = {};
+
+  const _getSelectorName = (selector) => {
+    if (selector === ":root") return selector;
+    return selector.replace(/^\./, "").replace(/\\/g, ""); // remove escape backslash
+  };
+
+  const isVar = (property) => {
+    return cssVarRe.test(property);
+  };
+
+  this.isRuleTypeSupported = (type) => {
+    return SUPPORTED_RULE_TYPES.includes(type);
+  };
+
+  this.isSelectorSupported = (selector) => {
+    if (selector === ":root") return true;
+    if (selector.includes(" ")) return false;
+    if (!selector.startsWith(".")) return false;
+    return true;
+  };
+
+  this.simplifyDeclarations = (declarations) => {
+    return (declarations || []).reduce((res, declaration) => {
+      if (declaration.type !== "declaration") return res;
+
+      const { property, value } = declaration;
+      if (isVar(property)) {
+        res[property] = value;
+      } else {
+        res[camelize(property)] = value;
+      }
+
+      return res;
+    }, {});
+  };
+
+  this.upsert = (selector, declarations) => {
+    const selectorName = _getSelectorName(selector);
+
+    // Merge raw declarations
+    this.rawStylesheet[selectorName] = {
+      ...this.rawStylesheet[selectorName],
+      ...declarations,
+    };
+  };
+
+  this.finalize = () => {
+    // Pre-compute all declarations at the end
+    for (const [selector, rawDecl] of Object.entries(this.rawStylesheet)) {
+      const { _static, _dynamic, _hasDynamic } = precomputeDeclaration(rawDecl);
+
+      if (_hasDynamic) {
+        // Has dynamic properties - store both static and dynamic
+        this.stylesheet[selector] = { _static, _dynamic };
+      } else {
+        // Fully static - just store the static object directly
+        this.stylesheet[selector] = _static;
+      }
+    }
+  };
+
+  this.toJSON = () => {
+    // Finalize pre-computation before serializing
+    this.finalize();
+    return JSON.stringify(this.stylesheet);
+  };
+
+  return this;
+}

package/src/index.js

@@ -0,0 +1,123 @@
+import fs from "fs";
+import path from "path";
+import { parse as cssParse } from "css";
+import Stylesheet from "./features/stylesheet";
+import { preprocessTailwindCss } from "./utils/css";
+
+function getStylesheet(css, filename) {
+  // 1. Run Tailwind CSS v4 preprocessing (supports oklch, @layer flattening, etc.)
+  const preprocessedCss = preprocessTailwindCss(css);
+  const ast = cssParse(preprocessedCss);
+  const stylesheet = new Stylesheet();
+
+  // Process regular rules
+  for (const rule of ast.stylesheet.rules || []) {
+    if (!stylesheet.isRuleTypeSupported(rule.type)) continue;
+    if (rule.type === "rule") {
+      const declarations = stylesheet.simplifyDeclarations(rule.declarations);
+
+      rule.selectors.forEach((selector) => {
+        if (!stylesheet.isSelectorSupported(selector)) return;
+        stylesheet.upsert(selector, declarations);
+      });
+    }
+  }
+
+  // Process @media rules (injected at the end)
+  for (const rule of ast.stylesheet.rules || []) {
+    if (!stylesheet.isRuleTypeSupported(rule.type)) continue;
+    if (rule.type === "media") {
+      for (const mediaRule of rule.rules || []) {
+        if (!stylesheet.isRuleTypeSupported(mediaRule.type)) continue;
+        if (mediaRule.type === "rule") {
+          const declarations = stylesheet.simplifyDeclarations(mediaRule.declarations);
+
+          mediaRule.selectors.forEach((selector) => {
+            if (!stylesheet.isSelectorSupported(selector)) return;
+            stylesheet.upsert(selector, { [`@media ${rule.media}`]: declarations });
+          });
+        }
+      }
+    }
+  }
+
+  const jsonContent = stylesheet.toJSON();
+
+  // Always write the pre-computed stylesheet for Babel to read
+  writeStylesheetJSON(jsonContent, filename);
+
+  return jsonContent;
+}
+
+function writeStylesheetJSON(content, filename) {
+  try {
+    // Write to lib directory (where dist will be)
+    const libDir = path.join(__dirname);
+    fs.writeFileSync(path.join(libDir, "exported-stylesheet.json"), content, { mode: 0o755 });
+
+    // Also write next to the source CSS file for easier debugging
+    if (filename) {
+      fs.writeFileSync(`${filename}.json`, content, { mode: 0o755 });
+    }
+  } catch {
+    // Silently fail - Babel will fall back to runtime
+  }
+}
+
+module.exports.transform = function ({ src, filename, options }) {
+  const projectRoot =
+    options && options.projectRoot ? options.projectRoot : process.cwd();
+
+  const resolveTransformer = (() => {
+    const resolveOptions = { paths: [projectRoot] };
+    try {
+      return require(
+        require.resolve("@expo/metro-config/babel-transformer", resolveOptions),
+      );
+    } catch (error) {
+      try {
+        return require(
+          require.resolve(
+            "@react-native/metro-babel-transformer",
+            resolveOptions,
+          ),
+        );
+      } catch (error2) {
+        try {
+          return require(
+            require.resolve(
+              "metro-react-native-babel-transformer",
+              resolveOptions,
+            ),
+          );
+        } catch (err) {
+          // Fallback to normal require in case of non-standard setups
+          try {
+            return require("@expo/metro-config/babel-transformer");
+          } catch (e) {
+            try {
+              return require("@react-native/metro-babel-transformer");
+            } catch (e2) {
+              try {
+                return require("metro-react-native-babel-transformer");
+              } catch (e3) {
+                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")) {
+    return resolveTransformer.transform({
+      src: `module.exports = ${getStylesheet(src, filename)}`,
+      filename,
+      options,
+    });
+  }
+  return resolveTransformer.transform({ src, filename, options });
+};