@colorye/react-native-css 0.3.1 → 0.3.2

package/src/features/css-transform.js

@@ -1,446 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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;
-}