@niibase/uniwind 1.6.4 → 1.7.0

package/dist/module/bundler/css-processor/css.js

@@ -0,0 +1,566 @@
+import { isDefined } from "@/common/utils";
+import { Logger } from "../logger.js";
+import { getProcessedAnimation, getProcessedVarAnimation } from "./animation.js";
+import { deepEqual, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from "./utils.js";
+export class CSS {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  logger = new Logger("CSS");
+  processValue(declarationValue, declarationProperty) {
+    const processedValue = this.getProcessedValue(declarationValue, declarationProperty);
+    if (typeof processedValue === "string") {
+      return this.makeSafeForSerialization(processedValue);
+    }
+    if (Array.isArray(processedValue)) {
+      return processedValue.map((value) => {
+        if (typeof value === "string") {
+          return this.makeSafeForSerialization(value);
+        }
+        return value;
+      });
+    }
+    if (typeof processedValue === "object" && processedValue !== null) {
+      return Object.fromEntries(
+        Object.entries(processedValue).map(([key, value]) => {
+          if (typeof value === "string") {
+            return [
+              key,
+              this.makeSafeForSerialization(value)
+            ];
+          }
+          return [
+            key,
+            value
+          ];
+        })
+      );
+    }
+    return processedValue;
+  }
+  processAnimation(declarationValue) {
+    if (declarationValue.length === 0) {
+      return [];
+    }
+    if (declarationValue.length === 1) {
+      const token = declarationValue[0];
+      if (token.type === "var") {
+        return this.Processor.Var.processVar(token.value);
+      }
+      return Object.entries(token).map(([key, value]) => [toCamelCase(key), this.processValue(value)]);
+    }
+    return getProcessedAnimation(
+      declarationValue,
+      this.getProcessedValue.bind(this)
+    );
+  }
+  processAnimationVar(declarationValue, styles, updateVar) {
+    getProcessedVarAnimation(declarationValue, styles, updateVar);
+  }
+  processFilters(filters) {
+    const filterStrings = filters.map((filter) => {
+      if (filter.type === "hue-rotate") {
+        return `hue-rotate(${filter.value.value}${filter.value.type})`;
+      }
+      if (filter.type === "url") {
+        return `url(${filter.value.url})`;
+      }
+      if (filter.type === "drop-shadow") {
+        const parts = [
+          this.processValue(filter.value.xOffset),
+          this.processValue(filter.value.yOffset),
+          this.processValue(filter.value.blur),
+          this.processValue(filter.value.color)
+        ].filter(isDefined);
+        return `drop-shadow(${parts.join(" ")})`;
+      }
+      const value = this.processValue(filter.value);
+      return `${filter.type}(${value})`;
+    });
+    return filterStrings.join(" ");
+  }
+  getProcessedValue(declarationValue, declarationProperty) {
+    if (typeof declarationValue !== "object") {
+      return declarationValue;
+    }
+    if ("type" in declarationValue) {
+      switch (declarationValue.type) {
+        case "function":
+          return this.Processor.Functions.processFunction(declarationValue.value);
+        case "var":
+          return this.Processor.Var.processVar(declarationValue.value);
+        case "number":
+        case "integer":
+          return declarationValue.value;
+        case "token":
+          return this.processValue(declarationValue.value);
+        case "length":
+          return this.Processor.Units.processAnyLength(declarationValue.value);
+        case "color":
+          return this.Processor.Color.processColor(declarationValue.value);
+        case "comma":
+          return ", ";
+        case "dimension":
+        case "value":
+        case "length-percentage":
+          return this.Processor.Units.processLength(declarationValue.value);
+        case "translate": {
+          const [translateX, translateY] = declarationValue.value.map((x) => this.processValue(x));
+          return [
+            {
+              translateX
+            },
+            {
+              translateY
+            }
+          ];
+        }
+        case "translateX":
+          return {
+            translateX: this.Processor.Units.processLength(declarationValue.value)
+          };
+        case "translateY":
+          return {
+            translateY: this.Processor.Units.processLength(declarationValue.value)
+          };
+        case "translateZ": {
+          return {
+            translateZ: this.processValue(declarationValue.value)
+          };
+        }
+        case "translate3d": {
+          const [translateX, translateY] = declarationValue.value.map((x) => this.processValue(x));
+          return [
+            { translateX },
+            { translateY }
+          ];
+        }
+        case "rotate":
+          return {
+            rotate: `${declarationValue.value.value}${declarationValue.value.type}`
+          };
+        case "rotateX":
+          return {
+            rotateX: `${declarationValue.value.value}${declarationValue.value.type}`
+          };
+        case "rotateY":
+          return {
+            rotateY: `${declarationValue.value.value}${declarationValue.value.type}`
+          };
+        case "rotateZ":
+          return {
+            rotateZ: `${declarationValue.value.value}${declarationValue.value.type}`
+          };
+        case "rotate3d": {
+          const [x, y, z, angle] = declarationValue.value;
+          const v = angle.value;
+          const t = angle.type;
+          return {
+            rotateX: `${x * v}${t}`,
+            rotateY: `${y * v}${t}`,
+            rotateZ: `${z * v}${t}`
+          };
+        }
+        case "scale": {
+          const [scaleX, scaleY] = declarationValue.value.map((x) => this.processValue(x));
+          if (scaleX === scaleY) {
+            return {
+              scale: scaleX
+            };
+          }
+          return [
+            {
+              scaleX
+            },
+            {
+              scaleY
+            }
+          ];
+        }
+        case "scaleX":
+          return {
+            scaleX: this.processValue(declarationValue.value)
+          };
+        case "scaleY":
+          return {
+            scaleY: this.processValue(declarationValue.value)
+          };
+        case "scaleZ":
+          return {
+            scaleZ: this.processValue(declarationValue.value)
+          };
+        case "scale3d": {
+          const [scaleX, scaleY] = declarationValue.value.map((x) => this.processValue(x));
+          return [
+            { scaleX },
+            { scaleY }
+          ];
+        }
+        case "skew": {
+          const [skewX, skewY] = declarationValue.value.map((x) => `"${x.value}${x.type}"`);
+          return [
+            { skewX },
+            { skewY }
+          ];
+        }
+        case "filters":
+          return this.processFilters(declarationValue.value);
+        case "percentage":
+          return `${declarationValue.value * 100}%`;
+        case "token-list":
+          return declarationValue.value.reduce((acc, token) => {
+            const tokenValue = this.processValue(token);
+            return acc + tokenValue;
+          }, "");
+        case "rgb":
+        case "oklab":
+        case "oklch":
+        case "hsl":
+        case "hwb":
+        case "lab":
+        case "lch":
+        case "srgb":
+          return this.Processor.Color.processColor(declarationValue);
+        case "delim":
+          if (declarationValue.value === ".") {
+            return ".";
+          }
+          if (declarationValue.value === "|") {
+            return "|";
+          }
+          return ` ${declarationValue.value} `;
+        case "ident":
+          if (this.Processor.Color.isColor(declarationValue.value)) {
+            return this.Processor.Color.processColor(declarationValue.value);
+          }
+          if (declarationValue.value === "currentcolor") {
+            return 'this["currentColor"]';
+          }
+          return declarationValue.value;
+        case "env":
+          if (declarationValue.value.name.type === "ua" && declarationValue.value.name.value.startsWith("safe-area-inset-")) {
+            const inset = declarationValue.value.name.value.replace("safe-area-inset-", "");
+            return `rt.insets.${inset}`;
+          }
+          this.logUnsupported(`Unsupported env value - ${JSON.stringify(declarationValue.value)}`);
+          return void 0;
+        case "time": {
+          const unit = declarationValue.value.type === "milliseconds" ? "ms" : "s";
+          return `${declarationValue.value.value}${unit}`;
+        }
+        case "cubic-bezier": {
+          const bezier = [
+            declarationValue.x1,
+            declarationValue.y1,
+            declarationValue.x2,
+            declarationValue.y2
+          ];
+          return `rt.cubicBezier(${bezier.join(",")})`;
+        }
+        case "steps": {
+          const steps = [
+            declarationValue.count,
+            declarationValue.position ? `"${declarationValue.position.type}"` : void 0
+          ];
+          return `rt.steps(${steps.join(",")})`;
+        }
+        case "seconds":
+          return `${declarationValue.value}s`;
+        case "milliseconds":
+          return `${declarationValue.value}ms`;
+        case "pair":
+          return declarationValue.inside.type;
+        case "currentcolor":
+          return 'this["currentColor"]';
+        case "calc":
+          return this.Processor.Functions.processCalc(declarationValue.value);
+        case "min":
+        case "max":
+        case "abs":
+          return this.Processor.Functions.processMathFunction(declarationValue.type, declarationValue.value);
+        case "keyword":
+          if ("value" in declarationValue) {
+            return declarationValue.value;
+          }
+          this.logUnsupported(`Unsupported keyword value - ${JSON.stringify(declarationValue)}`);
+          return void 0;
+        case "min-max":
+        case "track-breadth":
+          return declarationValue.type;
+        case "explicit":
+          return `${this.processValue(declarationValue.width)} ${this.processValue(declarationValue.height)}`;
+        case "angle":
+          return `${declarationValue.value.value}${declarationValue.value.type}`;
+        case "gradient":
+          if (declarationValue.value.type === "linear") {
+            const direction = String(this.processValue(declarationValue.value.direction));
+            return [
+              direction.includes("deg") ? direction : `to ${direction}`,
+              ...declarationValue.value.items.map((item) => this.processValue(item))
+            ].join(", ");
+          }
+          return void 0;
+        case "color-stop":
+          return [
+            this.Processor.Color.processColor(declarationValue.color),
+            declarationValue.position ? this.processValue(declarationValue.position) : null
+          ].filter(isDefined).join(" ");
+        case "side":
+          return declarationValue.side;
+        case "absolute":
+          if ("value" in declarationValue) {
+            return typeof declarationValue.value === "string" ? declarationValue.value : this.processValue(declarationValue.value);
+          }
+          return declarationValue.type;
+        case "hash":
+          return `#${declarationValue.value}`;
+        case "parenthesis-block":
+          return "(";
+        case "close-parenthesis":
+          return ")";
+        case "light-dark":
+          return `rt.lightDark( ${this.processValue(declarationValue.light)}, ${this.processValue(declarationValue.dark)} )`;
+        case "unresolved-color":
+          return this.getProcessedValue(declarationValue.value);
+        case "track-list":
+        case "sticky":
+        case "fit-content":
+        case "shape":
+          return void 0;
+        case "weight":
+        case "horizontal":
+        case "vertical":
+        case "white-space":
+        case "string":
+        case "self-position":
+        case "content-distribution":
+        case "content-position":
+        case "line-style":
+          return declarationValue.value;
+        case "baseline-position":
+          return "baseline";
+        default:
+          if (Object.keys(declarationValue).length === 1) {
+            return declarationValue.type;
+          }
+          this.logUnsupported(`Unsupported value type - ${JSON.stringify(declarationValue.type)}`);
+          return void 0;
+      }
+    }
+    if ("top" in declarationValue) {
+      return {
+        top: this.processValue(declarationValue.top),
+        right: this.processValue(declarationValue.right),
+        bottom: this.processValue(declarationValue.bottom),
+        left: this.processValue(declarationValue.left)
+      };
+    }
+    if ("topLeft" in declarationValue) {
+      return {
+        topLeft: this.processValue(declarationValue.topLeft),
+        topRight: this.processValue(declarationValue.topRight),
+        bottomLeft: this.processValue(declarationValue.bottomLeft),
+        bottomRight: this.processValue(declarationValue.bottomRight)
+      };
+    }
+    if ("grow" in declarationValue) {
+      const parsedFlex = {
+        flexGrow: declarationValue.grow,
+        flexShrink: declarationValue.shrink,
+        flexBasis: this.processValue(declarationValue.basis)
+      };
+      if (declarationProperty === "flex" && parsedFlex.flexGrow === 1 && parsedFlex.flexShrink === 1 && parsedFlex.flexBasis === '"0%"') {
+        return {
+          flex: 1
+        };
+      }
+      return parsedFlex;
+    }
+    if (Array.isArray(declarationValue)) {
+      if (declarationValue.length === 1) {
+        return this.processValue(declarationValue[0]);
+      }
+      if (this.isTransformArray(declarationValue)) {
+        return declarationValue.flatMap((value) => {
+          const result = this.processValue(value);
+          return Array.isArray(result) ? result : [result];
+        });
+      }
+      return this.addComaBetweenTokens(declarationValue).reduce((acc, value, index, array) => {
+        if (typeof value === "object") {
+          const nextValue = array.at(index + 1);
+          if (deepEqual(value, nextValue)) {
+            return acc;
+          }
+          const result = this.processValue(value);
+          return acc === "" && typeof result === "number" ? result : acc + result;
+        }
+        return acc + value;
+      }, "");
+    }
+    if ("property" in declarationValue) {
+      const property = typeof declarationValue.property === "string" ? declarationValue.property : declarationValue.property.property;
+      return `${property},`;
+    }
+    if ("case" in declarationValue) {
+      return declarationValue.case;
+    }
+    if ("angle" in declarationValue) {
+      const angles = pipe([
+        ["rotateX", declarationValue.x * declarationValue.angle.value],
+        ["rotateY", declarationValue.y * declarationValue.angle.value],
+        ["rotateZ", declarationValue.z * declarationValue.angle.value]
+      ])(
+        (x) => x.filter(([, value]) => value !== 0),
+        (x) => x.map(([key, value]) => [key, `${value}${declarationValue.angle.type}`]),
+        Object.fromEntries
+      );
+      return angles;
+    }
+    if (this.isOverflow(declarationValue)) {
+      if (declarationValue.x === declarationValue.y) {
+        return {
+          overflow: declarationValue.x
+        };
+      }
+      return {
+        overflowX: declarationValue.x,
+        overflowY: declarationValue.y
+      };
+    }
+    if ("auto" in declarationValue) {
+      return declarationValue.ratio ? `${declarationValue.ratio[0]}/${declarationValue.ratio[1]}` : "auto";
+    }
+    if ("x" in declarationValue && "y" in declarationValue) {
+      return {
+        x: this.processValue(declarationValue.x),
+        y: this.processValue(declarationValue.y)
+      };
+    }
+    if ("xOffset" in declarationValue) {
+      return [
+        "inset" in declarationValue && declarationValue.inset ? "inset" : void 0,
+        this.processValue(declarationValue.xOffset),
+        this.processValue(declarationValue.yOffset),
+        this.processValue(declarationValue.blur),
+        this.processValue(declarationValue.spread),
+        this.processValue(declarationValue.color)
+      ].filter(isDefined).join(" ");
+    }
+    if ("blockStart" in declarationValue) {
+      const startValue = this.processValue(declarationValue.blockStart);
+      const endValue = this.processValue(declarationValue.blockEnd);
+      return {
+        start: startValue,
+        end: endValue
+      };
+    }
+    if ("inlineStart" in declarationValue) {
+      const startValue = this.processValue(declarationValue.inlineStart);
+      const endValue = this.processValue(declarationValue.inlineEnd);
+      return {
+        start: startValue,
+        end: endValue
+      };
+    }
+    if ("start" in declarationValue) {
+      const startValue = this.processValue(declarationValue.start);
+      const endValue = this.processValue(declarationValue.end);
+      return {
+        start: startValue,
+        end: endValue
+      };
+    }
+    if ("row" in declarationValue) {
+      return {
+        row: this.processValue(declarationValue.row),
+        column: this.processValue(declarationValue.column)
+      };
+    }
+    if ("keyword" in declarationValue) {
+      return declarationValue.keyword === "auto" || declarationValue.keyword === "pointer" ? declarationValue.keyword : "auto";
+    }
+    if ("style" in declarationValue && "width" in declarationValue) {
+      return {
+        style: this.processValue(declarationValue.style),
+        width: declarationValue.width.type === "length" ? this.processValue(declarationValue.width.value) : void 0,
+        color: this.Processor.Color.processColor(declarationValue.color)
+      };
+    }
+    if ("duration" in declarationValue) {
+      return Object.entries(declarationValue).map(([key, value]) => [toCamelCase(key), this.processValue(value)]);
+    }
+    this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
+    return void 0;
+  }
+  static TRANSFORM_TYPES = /* @__PURE__ */ new Set([
+    "translate",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "rotate",
+    "rotateX",
+    "rotateY",
+    "rotateZ",
+    "scale",
+    "scaleX",
+    "scaleY",
+    "scaleZ",
+    "skew",
+    "skewX",
+    "skewY",
+    "matrix",
+    "perspective"
+  ]);
+  isTransformArray(values) {
+    return values.every(
+      (value) => typeof value === "object" && value !== null && "type" in value && CSS.TRANSFORM_TYPES.has(value.type)
+    );
+  }
+  isOverflow(value) {
+    return typeof value === "object" && "x" in value && ["hidden", "visible"].includes(value.x);
+  }
+  /**
+   * Between some tokens there isn't a comma but it should be.
+   * For example this applies to Array of shadows
+   */
+  addComaBetweenTokens(values) {
+    return values.reduce((acc, value, index, array) => {
+      const next = array.at(index + 1);
+      acc.push(value);
+      if (next === void 0) {
+        return acc;
+      }
+      if (typeof next === "object" && "type" in next && next.type === "token" && next.value.type === "comma") {
+        return acc;
+      }
+      if (!(typeof value === "object" && "xOffset" in value && "blur" in value)) {
+        return acc;
+      }
+      acc.push({
+        type: "token",
+        value: {
+          type: "comma"
+        }
+      });
+      return acc;
+    }, []);
+  }
+  logUnsupported(message) {
+    this.logger.warn(
+      [
+        message,
+        this.Processor.meta.className !== void 0 ? `for className ${this.Processor.meta.className}` : null
+      ].filter(Boolean).join(" ")
+    );
+  }
+  makeSafeForSerialization(value) {
+    if (shouldBeSerialized(value)) {
+      return value;
+    }
+    if (value.endsWith("%")) {
+      return `"${roundToPrecision(parseFloat(value), 2)}%"`;
+    }
+    return `"${value}"`;
+  }
+}

package/dist/module/bundler/css-processor/functions.d.ts

@@ -0,0 +1,12 @@
+import type { CalcFor_DimensionPercentageFor_LengthValue, CalcFor_Length, Function as FunctionType } from 'lightningcss';
+import type { ProcessorBuilder } from './processor';
+export declare class Functions {
+    private readonly Processor;
+    private readonly logger;
+    constructor(Processor: ProcessorBuilder);
+    processCalc(calc: CalcFor_DimensionPercentageFor_LengthValue | CalcFor_Length): string;
+    processFunction(fn: string | FunctionType): any;
+    processMathFunction(name: string, value: Array<CalcFor_DimensionPercentageFor_LengthValue> | Array<CalcFor_Length> | CalcFor_DimensionPercentageFor_LengthValue | CalcFor_Length): string;
+    private tryEval;
+    private processColorMix;
+}