@colorye/react-native-css 0.3.0

package/src/features/css-transform.js

@@ -0,0 +1,446 @@
+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) {
+      const wStr = String(width).trim();
+      transformed[`${property}Width`] = wStr !== "" && !isNaN(Number(wStr)) ? Number(wStr) : width;
+    } else {
+      transformed[`${property}Width`] = 0;
+    }
+
+    if (style) {
+      transformed.borderStyle = ["solid", "dotted", "dashed"].includes(style) ? style : "solid";
+    }
+
+    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) => {
+      if (typeof val === "string" && val.trim() !== "" && !isNaN(Number(val))) {
+        return Number(val);
+      }
+      return 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)) {
+        const v1 = String(val1).trim();
+        const v2 = String(val2).trim();
+        transforms.push({ [`${token}X`]: v1 !== "" && !isNaN(Number(v1)) ? Number(v1) : val1 });
+        transforms.push({ [`${token}Y`]: v2 !== "" && !isNaN(Number(v2)) ? Number(v2) : val2 });
+      } else {
+        const v1 = String(val1).trim();
+        transforms.push({ [token]: v1 !== "" && !isNaN(Number(v1)) ? Number(v1) : 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 (typeof value === "string" && value.trim() !== "" && !isNaN(Number(value))) {
+      return roundFn(Number(value) * scaleFactor);
+    } else if (typeof value === "number") {
+      return roundFn(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) => {
+      if (typeof val === "string" && val.trim() !== "" && !isNaN(Number(val))) {
+        return Number(val);
+      }
+      return 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 (["scale"].includes(property)) {
+      let scaleVal = value;
+      if (typeof scaleVal === "string") {
+        const first = scaleVal.trim().split(/\s+/)[0];
+        if (first.endsWith("%")) {
+          scaleVal = parseFloat(first) / 100;
+        } else {
+          scaleVal = parseFloat(first);
+        }
+      }
+      return {
+        transform: [{ scale: isNaN(scaleVal) ? 1 : Number(scaleVal) }],
+      };
+    }
+
+    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,138 @@
+import CssMedia from "./css-media";
+
+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 || typeof value !== "string") return value;
+
+    const variables = this.get(selector);
+
+    function resolveOnce(str) {
+      let result = "";
+      let i = 0;
+      let changed = false;
+
+      while (i < str.length) {
+        const varIndex = str.indexOf("var(", i);
+        if (varIndex === -1) {
+          result += str.slice(i);
+          break;
+        }
+
+        result += str.slice(i, varIndex);
+        let depth = 1;
+        let j = varIndex + 4;
+        let commaIndex = -1;
+
+        while (j < str.length && depth > 0) {
+          if (str[j] === "(") {
+            depth++;
+          } else if (str[j] === ")") {
+            depth--;
+          } else if (str[j] === "," && depth === 1 && commaIndex === -1) {
+            commaIndex = j;
+          }
+          j++;
+        }
+
+        if (depth !== 0) {
+          result += str.slice(varIndex);
+          break;
+        }
+
+        changed = true;
+        let varName, fallback;
+        if (commaIndex !== -1) {
+          varName = str.slice(varIndex + 4, commaIndex).trim();
+          fallback = str.slice(commaIndex + 1, j - 1).trim();
+        } else {
+          varName = str.slice(varIndex + 4, j - 1).trim();
+          fallback = undefined;
+        }
+
+        const val = variables[varName];
+        if (val !== undefined && val !== "initial" && val !== "") {
+          result += val;
+        } else if (fallback !== undefined) {
+          result += fallback;
+        } else {
+          result += "";
+        }
+
+        i = j;
+      }
+
+      return { result, changed };
+    }
+
+    let current = value;
+    let iterations = 0;
+    while (iterations < 10) {
+      const { result, changed } = resolveOnce(current);
+      if (!changed || result === current) break;
+      current = result;
+      iterations++;
+    }
+    return current;
+  };
+
+  return this;
+}

package/src/features/stylesheet.js

@@ -0,0 +1,29 @@
+import { precomputeDeclaration } from "./build-transform";
+
+export default function Stylesheet() {
+  this.rawStylesheet = {};
+  this.stylesheet = {};
+
+  this.setRawStylesheet = (raw) => {
+    this.rawStylesheet = raw;
+  };
+
+  this.finalize = () => {
+    for (const [selector, rawDecl] of Object.entries(this.rawStylesheet)) {
+      const { _static, _dynamic, _hasDynamic } = precomputeDeclaration(rawDecl);
+
+      if (_hasDynamic) {
+        this.stylesheet[selector] = { _static, _dynamic };
+      } else {
+        this.stylesheet[selector] = _static;
+      }
+    }
+  };
+
+  this.toJSON = () => {
+    this.finalize();
+    return JSON.stringify(this.stylesheet);
+  };
+
+  return this;
+}

package/src/index.d.ts

@@ -0,0 +1,89 @@
+import React from "react";
+import type { StyleProp, ViewStyle, TextStyle, ImageStyle } from "react-native";
+
+export interface StyleMapping {
+  className?: string;
+  contentContainerClassName?: string;
+  [key: string]: string | undefined;
+}
+
+export interface GroupState {
+  pressed: boolean;
+  hovered?: boolean;
+  focus?: boolean;
+}
+
+export const GroupContext: React.Context<GroupState>;
+export const InheritContext: React.Context<Record<string, any> | undefined>;
+
+export function setGlobalStylesheet(sheet: Record<string, any>): void;
+export function getGlobalStylesheet(): Record<string, any>;
+
+/**
+ * Wraps any React Native or third-party component to support className mapping.
+ *
+ * @example
+ * ```tsx
+ * import { FlashList } from "@shopify/flash-list";
+ * import { cssInterop } from "@colorye/react-native-css";
+ *
+ * const StyledFlashList = cssInterop(FlashList, {
+ *   className: "style",
+ *   contentContainerClassName: "contentContainerStyle",
+ * });
+ * ```
+ */
+export function cssInterop<P extends object>(
+  Component: React.ComponentType<P>,
+  mapping?: StyleMapping
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<P> & {
+    className?: string;
+    contentContainerClassName?: string;
+    inheritStyle?: any;
+  } & React.RefAttributes<any>
+>;
+
+/**
+ * Alias for cssInterop.
+ */
+export function remapProps<P extends object>(
+  Component: React.ComponentType<P>,
+  mapping: StyleMapping
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<P> & {
+    className?: string;
+    contentContainerClassName?: string;
+    inheritStyle?: any;
+  } & React.RefAttributes<any>
+>;
+
+export namespace Runtime {
+  export function getFlattenStyle(declarations: any): any;
+  export function getStyle(
+    stylesheet: any,
+    args: [inheritStyle?: any, className?: string, style?: any, elementName?: string]
+  ): any;
+  export function getInheritStyle(declarations: any): Record<string, any> | undefined;
+  export function mergeStyles(inheritStyle: any, staticStyles: any, inlineStyle: any): any;
+  export function clearCache(): void;
+}
+
+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;
+
+declare const _default: {
+  cssInterop: typeof cssInterop;
+  remapProps: typeof remapProps;
+  setGlobalStylesheet: typeof setGlobalStylesheet;
+  getGlobalStylesheet: typeof getGlobalStylesheet;
+  GroupContext: typeof GroupContext;
+  InheritContext: typeof InheritContext;
+  Runtime: typeof Runtime;
+  getStylesheet: typeof getStylesheet;
+  transform: typeof transform;
+  writeStylesheetJSON: typeof writeStylesheetJSON;
+};
+
+export default _default;