@niibase/uniwind 1.6.4 → 1.8.0

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

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addMetaToStylesTemplate = void 0;
+var _consts = require("@/common/consts");
+var _utils = require("@/common/utils");
+var _serialize = require("./serialize");
+var _utils2 = require("./utils");
+const extractVarsFromString = value => {
+  const varsIndexes = [...value.matchAll(/vars\[/g)].map(m => m.index);
+  return varsIndexes.map(index => {
+    const afterIndex = value.slice(index + 5);
+    const closingIndex = afterIndex.indexOf("]");
+    const varName = afterIndex.slice(0, closingIndex);
+    return varName.replace(/[`"\\]/g, "");
+  });
+};
+const makeSafeForSerialization = value => {
+  if (value === null) {
+    return null;
+  }
+  if (typeof value === "string") {
+    return `"${value}"`;
+  }
+  return value;
+};
+const hasThemedVarDependency = (varName, Processor, visited = /* @__PURE__ */new Set()) => {
+  if (visited.has(varName)) {
+    return false;
+  }
+  visited.add(varName);
+  const isScopedVar = Object.values(Processor.scopedVars).some(scopedVars => varName in scopedVars);
+  if (isScopedVar) {
+    return true;
+  }
+  const globalVarValue = Processor.vars[varName];
+  if (typeof globalVarValue !== "string") {
+    return false;
+  }
+  return extractVarsFromString(globalVarValue).some(usedVarName => {
+    return hasThemedVarDependency(usedVarName, Processor, visited);
+  });
+};
+const addMetaToStylesTemplate = (Processor, currentPlatform) => {
+  const stylesheetsEntries = Object.entries(Processor.stylesheets).map(([className, stylesPerMediaQuery]) => {
+    const styles = stylesPerMediaQuery.map((style, index) => {
+      const {
+        platform,
+        rtl,
+        theme,
+        orientation,
+        minWidth,
+        maxWidth,
+        colorScheme,
+        important: _,
+        importantProperties,
+        active,
+        focus,
+        disabled,
+        dataAttributes,
+        ...rest
+      } = style;
+      const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function(vars) { return ${(0, _serialize.serialize)(value)} }`]);
+      if (platform) {
+        const isTV = currentPlatform === _consts.Platform.AndroidTV || currentPlatform === _consts.Platform.AppleTV;
+        const commonPlatform = isTV ? _consts.Platform.TV : _consts.Platform.Native;
+        if (platform !== commonPlatform && platform !== currentPlatform) {
+          return null;
+        }
+      }
+      if (entries.length === 0) {
+        return null;
+      }
+      const dependencies = [];
+      const stringifiedEntries = JSON.stringify(entries);
+      const usedVars = extractVarsFromString(stringifiedEntries);
+      const isUsingThemedVar = usedVars.some(usedVarName => hasThemedVarDependency(usedVarName, Processor));
+      if (usedVars.length > 0) {
+        dependencies.push(_consts.StyleDependency.Variables);
+      }
+      if (theme !== null || isUsingThemedVar || stringifiedEntries.includes("rt.lightDark")) {
+        dependencies.push(_consts.StyleDependency.Theme);
+      }
+      if (orientation !== null) {
+        dependencies.push(_consts.StyleDependency.Orientation);
+      }
+      if (rtl !== null) {
+        dependencies.push(_consts.StyleDependency.Rtl);
+      }
+      if (Number(minWidth) !== 0 || Number(maxWidth) !== Number.MAX_VALUE || stringifiedEntries.includes("rt.makeResponsive") || stringifiedEntries.includes("rt.screen")) {
+        dependencies.push(_consts.StyleDependency.Dimensions);
+      }
+      if (stringifiedEntries.includes("rt.insets")) {
+        dependencies.push(_consts.StyleDependency.Insets);
+      }
+      if (stringifiedEntries.includes("rt.fontScale")) {
+        dependencies.push(_consts.StyleDependency.FontScale);
+      }
+      return {
+        entries,
+        minWidth,
+        maxWidth,
+        theme: makeSafeForSerialization(theme),
+        orientation: makeSafeForSerialization(orientation),
+        rtl,
+        colorScheme: makeSafeForSerialization(colorScheme),
+        native: platform !== null,
+        dependencies: dependencies.length > 0 ? dependencies : null,
+        index,
+        className: makeSafeForSerialization(className),
+        active,
+        focus,
+        disabled,
+        importantProperties: importantProperties?.map(property => property.startsWith("--") ? property : (0, _utils2.toCamelCase)(property)).map(makeSafeForSerialization) ?? [],
+        dataAttributes,
+        complexity: [minWidth !== 0, theme !== null, orientation !== null, rtl !== null, platform !== null, active !== null, focus !== null, disabled !== null, dataAttributes !== null].filter(Boolean).length
+      };
+    });
+    const filteredStyles = styles.filter(_utils.isDefined);
+    if (filteredStyles.length === 0) {
+      return null;
+    }
+    return [className, filteredStyles];
+  }).filter(_utils.isDefined);
+  const stylesheets = Object.fromEntries(stylesheetsEntries);
+  return stylesheets;
+};
+exports.addMetaToStylesTemplate = addMetaToStylesTemplate;

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getProcessedVarAnimation = exports.getProcessedAnimation = void 0;
+var _utils = require("./utils");
+const STATIC_TIMING_FUNCTIONS = /* @__PURE__ */new Set(["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"]);
+const DIRECTION_VALUES = /* @__PURE__ */new Set(["normal", "reverse", "alternate", "alternate-reverse"]);
+const FILL_MODE_VALUES = /* @__PURE__ */new Set(["none", "forwards", "backwards", "both"]);
+const PLAY_STATE_VALUES = /* @__PURE__ */new Set(["running", "paused"]);
+const isTimeString = x => {
+  if (typeof x === "number") return true;
+  return typeof x === "string" && /^-?\d*(?:\.\d+)?(?:e[+-]?\d+)?(ms|s)$/.test(x.trim());
+};
+const isTimingFunctionCustom = x => {
+  if (typeof x !== "string") return false;
+  return x.startsWith("rt.cubicBezier(") || x.startsWith("rt.steps(") || x.startsWith("rt.linear(");
+};
+const getProcessedVarAnimation = (declarationValue, styles, updateVar) => {
+  const tokens = declarationValue.replace(/\)/g, ") ").split(" ");
+  let duration = false;
+  for (const unprocessedToken of tokens) {
+    const token = unprocessedToken.replace(/^"|"$/g, "");
+    if (isTimeString(token) && !duration) {
+      styles["animation-duration"] = unprocessedToken;
+      duration = true;
+    } else if (isTimeString(token) && duration) {
+      styles["animation-delay"] = unprocessedToken;
+    } else if (STATIC_TIMING_FUNCTIONS.has(token)) {
+      styles["animation-timing-function"] = unprocessedToken;
+    } else if (isTimingFunctionCustom(token)) {
+      styles["animation-timing-function"] = unprocessedToken;
+    } else if (token === "infinite" || /^\d+$/.test(token)) {
+      styles["animation-iteration-count"] = unprocessedToken;
+    } else if (DIRECTION_VALUES.has(token)) {
+      styles["animation-direction"] = unprocessedToken;
+    } else if (FILL_MODE_VALUES.has(token)) {
+      styles["animation-fill-mode"] = unprocessedToken;
+    } else if (PLAY_STATE_VALUES.has(token)) {
+      styles["animation-play-state"] = unprocessedToken;
+    } else {
+      updateVar(`"${token}"`);
+    }
+  }
+};
+exports.getProcessedVarAnimation = getProcessedVarAnimation;
+const parseValues = (tokens, getProcessedValue) => {
+  const groups = [];
+  let group = [];
+  for (const token of tokens) {
+    if (token.type === "token" && token.value.type === "delim" && token.value.value === "|") {
+      if (group.length > 0) {
+        groups.push(group);
+        group = [];
+      }
+      continue;
+    }
+    group.push(token);
+  }
+  if (group.length > 0) {
+    groups.push(group);
+  }
+  const values = groups.map(groupTokens => tokensToText(groupTokens, getProcessedValue));
+  return values.length > 1 ? values : values[0];
+};
+const tokensToText = (tokens, getProcessedValue) => {
+  return tokens.map(token => {
+    const value = getProcessedValue(token);
+    if (typeof value === "string") {
+      return /^"[^"]+"$/.test(value) ? value : `"${value}"`;
+    }
+    return value;
+  }).join(" ").trim();
+};
+const getProcessedAnimation = (declarationValue, getProcessedValue) => {
+  const segments = [];
+  const result = [];
+  let current = [];
+  for (const token of declarationValue) {
+    if (token.type === "var") {
+      return getProcessedValue(token);
+    }
+    if (token.type === "token" && token.value.type === "comma") {
+      if (current.length > 0) {
+        segments.push(current);
+        current = [];
+      }
+      continue;
+    }
+    current.push(token);
+  }
+  if (current.length > 0) {
+    segments.push(current);
+  }
+  for (const segment of segments) {
+    const colonIndex = segment.findIndex(token => token.type === "token" && token.value.type === "colon");
+    if (colonIndex === -1) {
+      const nameValue = parseValues(segment, getProcessedValue);
+      result.push(["name", Array.isArray(nameValue) ? nameValue : [nameValue]]);
+      continue;
+    }
+    const keyTokens = segment.slice(0, colonIndex);
+    const valueTokens = segment.slice(colonIndex + 1);
+    const rawKey = tokensToText(keyTokens, getProcessedValue);
+    const value = parseValues(valueTokens, getProcessedValue);
+    const key = (0, _utils.toCamelCase)(rawKey);
+    result.push([key, value]);
+  }
+  return result;
+};
+exports.getProcessedAnimation = getProcessedAnimation;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Color = void 0;
+var _culori = require("culori");
+var _logger = require("../logger");
+var _utils = require("./utils");
+class Color {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  toRgb = (0, _culori.converter)("rgb");
+  black = "#000000";
+  logger = new _logger.Logger("Color");
+  processColor(color) {
+    if (typeof color === "string") {
+      const parsed = (0, _culori.parse)(color);
+      if (parsed === void 0) {
+        const colorFunction = color.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/)?.[1];
+        if (colorFunction === void 0) {
+          this.logger.error(`Failed to convert color ${color}`);
+          return this.black;
+        }
+        const colorValue = color.replace(colorFunction, "").slice(1, -1);
+        return `rt.parseColor("${colorFunction}", ${colorValue})`;
+      }
+      return this.format(parsed);
+    }
+    try {
+      if (color.type === "currentcolor") {
+        return 'vars["currentColor"]?.(vars)';
+      }
+      if (color.type === "rgb" || color.type === "srgb") {
+        const alpha = typeof color.alpha === "number" ? color.alpha : (0, _utils.pipe)(color.alpha)(x => this.Processor.CSS.processValue(x), Number, x => isNaN(x) ? 1 : x);
+        return this.format({
+          r: color.r / 255,
+          g: color.g / 255,
+          b: color.b / 255,
+          alpha,
+          mode: "rgb"
+        });
+      }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
+      const result = this.toRgb({
+        mode: colorType,
+        ...color
+      });
+      return this.format(result);
+    } catch {
+      this.logger.error(`Failed to convert color ${JSON.stringify(color)}`);
+      return this.black;
+    }
+  }
+  isColor(value) {
+    return typeof value === "string" && (0, _culori.parse)(value) !== void 0;
+  }
+  format(color) {
+    if (color.alpha === 1 || color.alpha === void 0) {
+      return (0, _culori.formatHex)(color);
+    }
+    return (0, _culori.formatHex8)(color);
+  }
+}
+exports.Color = Color;