@niibase/uniwind 1.6.4 → 1.8.0

package/dist/common/bundler/css-processor/rn.js

@@ -0,0 +1,356 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RN = void 0;
+var _consts = require("@/common/consts");
+var _utils = require("@/common/utils");
+var _utils2 = require("./utils");
+const transitions = {
+  overlay: '"overlayColor"'
+};
+const cssToRNMap = {
+  backgroundSize: value => {
+    return {
+      resizeMode: value
+    };
+  },
+  transitionProperty: value => {
+    const properties = value.replace(/"/g, "").split(",").filter(token => token !== "" && !token.startsWith("--")).map(token => transitions[token.trim()] ?? `"${(0, _utils2.toCamelCase)(token.trim())}"`);
+    if (properties.length === 1 && ['"allowDiscrete"', '"normal"'].includes(properties[0])) {
+      const behavior = properties[0] === '"allowDiscrete"' ? "allow-discrete" : "normal";
+      return {
+        transitionBehavior: `"${behavior}"`
+      };
+    }
+    return {
+      transitionProperty: properties
+    };
+  },
+  transitionDuration: value => {
+    return {
+      transitionDuration: value.includes('""') ? value.replace(/""/g, ",") : value
+    };
+  },
+  transitionTimingFunction: value => {
+    return {
+      transitionTimingFunction: value.includes('""') ? value.replace(/""/g, ",") : value
+    };
+  },
+  animation: value => {
+    if (Array.isArray(value)) {
+      const result = {};
+      for (const [key, val] of value) {
+        if (val === '"none"') {
+          continue;
+        }
+        const keyName = (0, _utils2.toCamelCase)(`animation-${key.replace(/^"|"$/g, "")}`);
+        if (key === "name") {
+          result[keyName] = typeof val === "string" ? val.split(",").map(v => v.startsWith('"') ? v : `"${v}"`) : val;
+        } else {
+          result[keyName] = val;
+        }
+      }
+      return result;
+    }
+    return {
+      animationName: value
+    };
+  },
+  flex: value => {
+    if (typeof value === "object") {
+      return value;
+    }
+    return {
+      flex: value
+    };
+  },
+  overflow: value => {
+    if (typeof value === "object") {
+      return value;
+    }
+    return {
+      overflow: value
+    };
+  },
+  backdropFilter: () => ({}),
+  filter: value => ({
+    filter: value
+  }),
+  backgroundImage: value => ({
+    experimental_backgroundImage: value
+  }),
+  borderSpacing: () => ({}),
+  translate: value => {
+    if (typeof value === "object" && "x" in value && "y" in value) {
+      return {
+        translateX: value.x,
+        translateY: value.y
+      };
+    }
+    if (typeof value === "string") {
+      const [x, y] = value.split(" ");
+      return {
+        translateX: x,
+        translateY: y ?? x
+      };
+    }
+    return {};
+  },
+  rotate: value => {
+    if (typeof value === "object") {
+      return value;
+    }
+    return {
+      rotate: value
+    };
+  },
+  scale: value => {
+    if (typeof value === "object") {
+      return {
+        scaleX: value.x,
+        scaleY: value.y,
+        scaleZ: value.z
+      };
+    }
+    if (typeof value === "string") {
+      const [x, y, z] = value.split(" ");
+      return {
+        scaleX: x,
+        scaleY: y,
+        scaleZ: z
+      };
+    }
+    return {};
+  },
+  transform: value => {
+    if (typeof value === "string" || Array.isArray(value)) {
+      return {
+        transform: value
+      };
+    }
+    if (typeof value === "object") {
+      return Object.keys(value).length === 0 ? {
+        transform: []
+      } : value;
+    }
+    return {};
+  },
+  fontSize: value => {
+    return {
+      fontSize: value,
+      "--uniwind-em": value
+    };
+  },
+  borderInlineWidth: value => {
+    const borderWidth = typeof value === "object" ? Object.values(value)[0] : value;
+    return {
+      borderLeftWidth: borderWidth,
+      borderRightWidth: borderWidth
+    };
+  },
+  borderBlockWidth: value => {
+    const borderWidth = typeof value === "object" ? Object.values(value)[0] : value;
+    return {
+      borderTopWidth: borderWidth,
+      borderBottomWidth: borderWidth
+    };
+  },
+  borderInlineStyle: value => {
+    return {
+      borderStyle: value
+    };
+  },
+  borderBlockStyle: value => {
+    return {
+      borderStyle: value
+    };
+  },
+  borderStyle: value => {
+    const borderStyle = typeof value === "object" ? Object.values(value)[0] : value;
+    return {
+      borderStyle
+    };
+  },
+  transformOrigin: value => {
+    if (typeof value === "object") {
+      return {
+        transformOrigin: `${value.x} ${value.y}`
+      };
+    }
+    return {
+      transformOrigin: value
+    };
+  },
+  fontVariantNumeric: value => ({
+    fontVariant: value
+  }),
+  display: value => {
+    if (value === '"box"') {
+      return {
+        display: '"flex"'
+      };
+    }
+    return {
+      display: value
+    };
+  }
+};
+const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
+const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
+const BORDER_RADIUS_KEYS = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
+const COMPONENT_RESPONSIVE_PROPS = /* @__PURE__ */new Set(["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingHorizontal", "paddingVertical", "paddingStart", "paddingEnd", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginHorizontal", "marginVertical", "marginStart", "marginEnd", "top", "right", "bottom", "left", "gap", "rowGap", "columnGap", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStartWidth", "borderEndWidth", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopStartRadius", "borderTopEndRadius", "borderBottomStartRadius", "borderBottomEndRadius", "flexBasis", "translateX", "translateY"]);
+class RN {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  cssToRN(property, value) {
+    const transformedProperty = property.startsWith("--") ? property : (0, _utils2.pipe)(property)(_utils2.toCamelCase, x => {
+      if (x.includes("padding") || x.includes("margin")) {
+        return x.replace("InlineStart", "Start").replace("InlineEnd", "End").replace("Inline", "Horizontal").replace("Block", "Vertical");
+      }
+      if (x.includes("border")) {
+        return x.replace("InlineStart", "Start").replace("InlineEnd", "End");
+      }
+      return x;
+    });
+    const rn = this.transformProperty(transformedProperty, typeof value === "string" ? (0, _utils2.addMissingSpaces)(value) : value);
+    const joinedStyles = this.joinStyles(rn);
+    return Object.entries(joinedStyles).filter(([, value2]) => (0, _utils.isDefined)(value2)).map(([prop, val]) => [prop, this.makeResponsive(prop, val)]);
+  }
+  makeResponsive(property, value) {
+    const mode = this.Processor.bundlerConfig.polyfills?.responsive;
+    if (!mode) {
+      return value;
+    }
+    if (typeof value === "string") {
+      const rawValue = value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value;
+      if (rawValue.endsWith("%")) {
+        const numValue = parseFloat(rawValue);
+        if (!isNaN(numValue)) {
+          return `rt.makeResponsive(${numValue}, 100, true)`;
+        }
+      }
+    }
+    if (typeof value !== "number") {
+      return value;
+    }
+    const isTextMode = mode === true || mode === "text";
+    const isComponentMode = mode === true || mode === "components";
+    if (isTextMode && (property === "fontSize" || property === "--uniwind-em")) {
+      return `rt.makeResponsive(${value}, ${_consts.DEFAULT_SCREEN_HEIGHT}, true)`;
+    }
+    if (isComponentMode && COMPONENT_RESPONSIVE_PROPS.has(property)) {
+      return `rt.makeResponsive(${value}, ${_consts.DEFAULT_SCREEN_WIDTH})`;
+    }
+    return value;
+  }
+  transformProperty(property, value) {
+    if (property in cssToRNMap) {
+      return cssToRNMap[property](value);
+    }
+    if (typeof value === "object") {
+      const transformed = this.transformObjectProperty(property, value);
+      if (transformed) {
+        return transformed;
+      }
+    }
+    return {
+      [property]: value
+    };
+  }
+  transformObjectProperty(property, value) {
+    const properties = Object.keys(value);
+    const propertyEnd = property.includes("border") ? property.split("border").at(-1) ?? "" : "";
+    const transformedProperty = property.replace(propertyEnd, "");
+    const isSpacing = property.includes("margin") || property.includes("padding");
+    const wrapProperty = prop => `${transformedProperty}${prop}${propertyEnd}`;
+    if (properties.every(property2 => ["row", "column"].includes(property2))) {
+      return {
+        rowGap: value.row,
+        columnGap: value.column
+      };
+    }
+    if (properties.every(property2 => ["start", "end"].includes(property2))) {
+      if (isSpacing && property.includes("Horizontal")) {
+        return {
+          [`${property.replace("Horizontal", "Left")}`]: value.start,
+          [`${property.replace("Horizontal", "Right")}`]: value.end
+        };
+      }
+      if (isSpacing && property.includes("Vertical")) {
+        return {
+          [`${property.replace("Vertical", "Top")}`]: value.start,
+          [`${property.replace("Vertical", "Bottom")}`]: value.end
+        };
+      }
+      return {
+        [wrapProperty("Start")]: value.start,
+        [wrapProperty("End")]: value.end
+      };
+    }
+    if (properties.every(property2 => ["top", "right", "bottom", "left"].includes(property2))) {
+      if (transformedProperty === "inset") {
+        const isEverySideSame = properties.every(property2 => value[property2] === value.top);
+        return isEverySideSame ? {
+          inset: value.top
+        } : value;
+      }
+      return {
+        [wrapProperty("Top")]: value.top,
+        [wrapProperty("Right")]: value.right,
+        [wrapProperty("Bottom")]: value.bottom,
+        [wrapProperty("Left")]: value.left
+      };
+    }
+    if (properties.every(property2 => ["topLeft", "topRight", "bottomRight", "bottomLeft"].includes(property2))) {
+      return {
+        [wrapProperty("TopLeft")]: value.topLeft,
+        [wrapProperty("TopRight")]: value.topRight,
+        [wrapProperty("BottomRight")]: value.bottomRight,
+        [wrapProperty("BottomLeft")]: value.bottomLeft
+      };
+    }
+    if (properties.every(property2 => ["style", "width", "color"].includes(property2))) {
+      return {
+        [wrapProperty("Style")]: value.style,
+        [wrapProperty("Width")]: value.width,
+        [wrapProperty("Color")]: value.color
+      };
+    }
+  }
+  // Used when they're multiple styles with the same value that could be joined
+  joinStyles(styles) {
+    const keys = Object.keys(styles);
+    if (BORDER_WIDTH_KEYS.every(key => keys.includes(key))) {
+      const borderWidth = styles.borderTopWidth;
+      if (BORDER_WIDTH_KEYS.every(key => styles[key] === borderWidth)) {
+        return {
+          ...(0, _utils2.removeKeys)(styles, BORDER_WIDTH_KEYS),
+          borderWidth
+        };
+      }
+    }
+    if (BORDER_COLOR_KEYS.every(key => keys.includes(key))) {
+      const borderColor = styles.borderTopColor;
+      if (BORDER_COLOR_KEYS.every(key => styles[key] === borderColor)) {
+        return {
+          ...(0, _utils2.removeKeys)(styles, BORDER_COLOR_KEYS),
+          borderColor
+        };
+      }
+    }
+    if (BORDER_RADIUS_KEYS.every(key => keys.includes(key))) {
+      const borderRadius = styles.borderTopLeftRadius;
+      if (BORDER_RADIUS_KEYS.every(key => styles[key] === borderRadius)) {
+        return {
+          ...(0, _utils2.removeKeys)(styles, BORDER_RADIUS_KEYS),
+          borderRadius
+        };
+      }
+    }
+    return styles;
+  }
+}
+exports.RN = RN;

package/dist/common/bundler/css-processor/serialize.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializeJSObject = exports.serialize = void 0;
+var _logger = require("@/bundler/logger");
+var _utils = require("./utils");
+const parseStringValue = value => {
+  if ((0, _utils.isValidJSValue)(value)) {
+    return value;
+  }
+  if (value.startsWith("function")) {
+    return value;
+  }
+  const tokens = (0, _utils.smartSplit)((0, _utils.addMissingSpaces)(value));
+  const parsedTokens = tokens.map(token => {
+    if (token.startsWith('"')) {
+      return token.replace(/"/g, "");
+    }
+    if (/^[a-z]+$/i.test(token.replace(/,/g, ""))) {
+      return token;
+    }
+    if ((0, _utils.isNumber)(token)) {
+      return token;
+    }
+    const endsWithComma = token.endsWith(",");
+    const expr = endsWithComma ? token.slice(0, -1) : token;
+    if (!(0, _utils.isValidJSValue)(expr)) {
+      return token;
+    }
+    return ["${", expr, "}", endsWithComma ? "," : ""].join("");
+  });
+  return ["`", parsedTokens.join(" "), "`"].join("");
+};
+const serialize = value => {
+  const typeOfValue = typeof value;
+  switch (typeOfValue) {
+    case "string":
+      return parseStringValue(value);
+    case "symbol":
+      return String(value);
+    case "number":
+    case "bigint":
+      return String((0, _utils.roundToPrecision)(value, 2));
+    case "boolean":
+      return value.toString();
+    case "object":
+      if (value === null) {
+        return "null";
+      }
+      if (Array.isArray(value)) {
+        return ["[", value.map(serialize).join(", "), "]"].join("");
+      }
+      return ["{", Object.entries(value).map(([key, val]) => {
+        const serializedKey = (0, _utils.isNumber)(key) ? key : `"${key}"`;
+        return `${serializedKey}: ${serialize(val)}`;
+      }).join(", "), "}"].join("");
+    case "undefined":
+      return "undefined";
+    case "function":
+      return "";
+    default:
+      typeOfValue;
+      return "";
+  }
+};
+exports.serialize = serialize;
+const serializeJSObject = (obj, serializer) => {
+  const serializedObject = (0, _utils.pipe)(obj)(Object.entries, entries => entries.map(([key, value]) => serializer(key, serialize(value))), serializedValues => serializedValues.filter(serializedValue => {
+    try {
+      new Function(`function validateJS() { const obj = ({ ${serializedValue} }) }`);
+      return true;
+    } catch {
+      _logger.Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`);
+      return false;
+    }
+  }), entries => entries.join(","), result => {
+    if (result === "") {
+      return "";
+    }
+    return `${result},`;
+  });
+  return serializedObject;
+};
+exports.serializeJSObject = serializeJSObject;

package/dist/common/bundler/css-processor/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/common/bundler/css-processor/units.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Units = void 0;
+var _logger = require("../logger");
+class Units {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  logger = new _logger.Logger("Units");
+  processLength(length) {
+    if (typeof length === "number") {
+      return length;
+    }
+    if ("unit" in length) {
+      switch (length.unit) {
+        case "px":
+          return this.replaceInfinity(length.value);
+        case "vw":
+          return `rt.screen.width * ${length.value / 100}`;
+        case "vh":
+          return `rt.screen.height * ${length.value / 100}`;
+        case "rem":
+          return length.value * this.Processor.vars["--uniwind-em"];
+        case "em":
+          return `vars["--uniwind-em"]?.(vars) * ${length.value}`;
+        default:
+          this.logger.warn(`Unsupported unit - ${length.unit}`);
+          return length.value;
+      }
+    }
+    return this.Processor.CSS.processValue(length);
+  }
+  processAnyLength(length) {
+    if ("type" in length) {
+      switch (length.type) {
+        case "value":
+        case "dimension":
+          return this.processLength(length.value);
+        case "percentage":
+          return `${length.value * 100}%`;
+        default:
+          this.logger.warn(`Unsupported length type - ${length.type}`);
+          return length.value;
+      }
+    }
+    return this.processLength(length);
+  }
+  replaceInfinity(value) {
+    return value === Infinity ? 99999 : value;
+  }
+}
+exports.Units = Units;

package/dist/common/bundler/css-processor/utils.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toCamelCase = exports.smartSplit = exports.shouldBeSerialized = exports.roundToPrecision = exports.removeKeys = exports.pipe = exports.isValidJSValue = exports.isNumber = exports.deepEqual = exports.addMissingSpaces = void 0;
+const toCamelCase = str => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+exports.toCamelCase = toCamelCase;
+const pipe = data => (...fns) => fns.reduce((acc, fn) => fn(acc), data);
+exports.pipe = pipe;
+const isNumber = data => {
+  if (typeof data === "number") {
+    return true;
+  }
+  if (typeof data === "string" && data !== "") {
+    return !isNaN(Number(data));
+  }
+  return false;
+};
+exports.isNumber = isNumber;
+const smartSplit = (str, separator = " ") => {
+  const escaper = "&&&";
+  return pipe(str)(x => x.replace(/\s\?\?\s/g, `${escaper}??${escaper}`), x => x.replace(/\s([+\-*/])\s/g, `${escaper}$1${escaper}`), x => x.split(separator), x => x.map(token => token.replace(new RegExp(escaper, "g"), " ")));
+};
+exports.smartSplit = smartSplit;
+const addMissingSpaces = str => pipe(str)(x => x.trim(), x => x.replace(/\](?=\d)/g, "] "), x => x.replace(/\](?=")/g, "] "), x => x.replace(/\)(?=[^\s,])/g, ") "), x => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" '));
+exports.addMissingSpaces = addMissingSpaces;
+const isValidJSValue = jsValueString => {
+  try {
+    new Function(`const test = ${jsValueString}`);
+    return true;
+  } catch {
+    return false;
+  }
+};
+exports.isValidJSValue = isValidJSValue;
+const shouldBeSerialized = value => {
+  if (value.includes("-")) {
+    return value.split("-").some(shouldBeSerialized);
+  }
+  return [isNumber(value), value.startsWith("vars["), value.startsWith("rt."), /[*/+-]/.test(value), value.includes('"'), value.includes(" "), value === "(", value === ")"].some(Boolean);
+};
+exports.shouldBeSerialized = shouldBeSerialized;
+const roundToPrecision = (value, precision) => parseFloat(value.toFixed(precision));
+exports.roundToPrecision = roundToPrecision;
+const deepEqual = (a, b) => {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) {
+    return false;
+  }
+  return keysA.every(key => deepEqual(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key));
+};
+exports.deepEqual = deepEqual;
+const removeKeys = (obj, keysToRemove) => Object.fromEntries(Object.entries(obj).filter(([key]) => !keysToRemove.includes(key)));
+exports.removeKeys = removeKeys;

package/dist/common/bundler/css-processor/var.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Var = void 0;
+class Var {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  processVar(variable) {
+    const value = `vars[${JSON.stringify(variable.name.ident)}]?.(vars)`;
+    if (!variable.fallback || variable.fallback.length === 0) {
+      return value;
+    }
+    const fallback = this.Processor.CSS.processValue(variable.fallback);
+    return `${value} ?? ${fallback}`;
+  }
+}
+exports.Var = Var;

package/dist/common/{css-visitor → bundler/css-visitor}/rule-visitor.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RuleVisitor = void 0;
 class RuleVisitor {
-  constructor(themes) {
-    this.themes = themes;
+  constructor(bundlerConfig) {
+    this.bundlerConfig = bundlerConfig;
   }
   processedClassNames = /* @__PURE__ */new Set();
   processedVariables = /* @__PURE__ */new Set();
@@ -63,7 +63,7 @@ class RuleVisitor {
     if (whereSelector?.type !== "class") {
       return styleRule;
     }
-    const selectedVariant = this.themes.find(theme => whereSelector.name === theme);
+    const selectedVariant = this.bundlerConfig.themes.find(theme => whereSelector.name === theme);
     if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
       return styleRule;
     }
@@ -82,12 +82,12 @@ class RuleVisitor {
     };
   }
   processClassStyle(styleRule, firstSelector) {
-    const selectedVariant = this.themes.find(theme => firstSelector.name.includes(`${theme}:`));
+    const selectedVariant = this.bundlerConfig.themes.find(theme => firstSelector.name.includes(`${theme}:`));
     if (selectedVariant === void 0 || this.processedClassNames.has(firstSelector.name)) {
       return;
     }
     this.processedClassNames.add(firstSelector.name);
-    return {
+    return this.removeNulls({
       type: "scope",
       value: {
         loc: styleRule.value.loc,
@@ -96,12 +96,12 @@ class RuleVisitor {
           type: "class",
           name: selectedVariant
         }]],
-        scopeEnd: this.themes.filter(theme => theme !== selectedVariant).map(theme => [{
+        scopeEnd: this.bundlerConfig.themes.filter(theme => theme !== selectedVariant).map(theme => [{
           type: "class",
           name: theme
         }])
       }
-    };
+    });
   }
   // Fixes lightningcss serialization bug
   removeNulls(value) {

package/dist/common/{css-visitor → bundler/css-visitor}/visitor.js

@@ -7,17 +7,16 @@ exports.UniwindCSSVisitor = void 0;
 var _functionVisitor = require("./function-visitor");
 var _ruleVisitor = require("./rule-visitor");
 class UniwindCSSVisitor {
-  constructor(themes) {
-    this.themes = themes;
-    const ruleVisitor = new _ruleVisitor.RuleVisitor(this.themes);
+  Function;
+  Rule;
+  StyleSheet;
+  constructor(bundlerConfig) {
+    const ruleVisitor = new _ruleVisitor.RuleVisitor(bundlerConfig);
     this.Function = new _functionVisitor.FunctionVisitor();
     this.Rule = ruleVisitor;
     this.StyleSheet = () => {
       ruleVisitor.cleanup();
     };
   }
-  Function;
-  Rule;
-  StyleSheet;
 }
 exports.UniwindCSSVisitor = UniwindCSSVisitor;