@symbo.ls/scratch 2.33.14 → 2.33.20

package/dist/cjs/transforms/index.js

@@ -311,7 +311,6 @@ var require_cjs = __commonJS({
 // src/transforms/index.js
 var transforms_exports = {};
 __export(transforms_exports, {
-  checkIfBoxSize: () => checkIfBoxSize,
   splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
@@ -386,19 +385,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var merge = (element, obj, excludeFrom = []) => {
-  for (const e in obj) {
-    const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
-    if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
-      continue;
-    const elementProp = element[e];
-    const objProp = obj[e];
-    if (elementProp === void 0) {
-      element[e] = objProp;
-    }
-  }
-  return element;
-};
 var deepMerge = (element, extend, excludeFrom = [], level = Infinity) => {
   for (const e in extend) {
     const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
@@ -704,6 +690,58 @@ var getActiveConfig = (def) => {
 var isScalingUnit = (unit) => {
   return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
 };
+var CSS_UNITS = [
+  // Absolute
+  "px",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+  // Font-relative
+  "em",
+  "rem",
+  "ex",
+  "cap",
+  "ch",
+  "ic",
+  "lh",
+  "rlh",
+  // Viewport-relative
+  "%",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "svw",
+  "svh",
+  "lvw",
+  "lvh",
+  "dvw",
+  "dvh",
+  // Container query units
+  "cqw",
+  "cqh",
+  "cqi",
+  "cqb",
+  "cqmin",
+  "cqmax",
+  // Angle
+  "deg",
+  "rad",
+  "grad",
+  "turn",
+  // Time
+  "s",
+  "ms",
+  // Resolution
+  "dpi",
+  "dpcm",
+  "dppx",
+  // Grid fractional
+  "fr",
+  "auto"
+];
 
 // src/utils/color.js
 var colorStringToRgbaArray = (color) => {
@@ -835,6 +873,12 @@ var setSequenceValue = (props, sequenceProps) => {
   sequenceProps.scales[key] = scaling;
   sequenceProps.vars[variable] = scaling + sequenceProps.unit;
 };
+var getFnPrefixAndValue = (val) => {
+  if (!val.includes("(")) return val;
+  const prefix = val.split("(")[0];
+  const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
+  return [prefix, value];
+};
 var setScalingVar = (key, sequenceProps) => {
   const { base, type, unit } = sequenceProps;
   const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
@@ -866,9 +910,6 @@ var getSubratioDifference = (base, ratio) => {
   const middle = (first + second) / 2;
   return [first, middle, second];
 };
-var getSubratio = (base, ratio) => {
-  return getSubratioDifference(base, ratio).map((v) => v / base);
-};
 var generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props;
   const next = value * ratio;
@@ -930,13 +971,26 @@ var generateSequence = (sequenceProps) => {
 var getSequenceValue = (value = "A", sequenceProps) => {
   const CONFIG2 = getActiveConfig();
   const { UNIT: UNIT2 } = CONFIG2;
-  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
-  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
+  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
   const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
-  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || value.includes("var") || !startsWithDashOrLetter)
-    return value;
+  const hasUnits = CSS_UNITS.some((unit2) => value.includes(unit2));
+  if (hasUnits || !startsWithDashOrLetter) return value;
+  const skipArr = [
+    "none",
+    "auto",
+    "max-content",
+    "min-content",
+    "fit-content",
+    "inherit",
+    "initial",
+    "unset",
+    "revert",
+    "revert-layer"
+  ];
+  if (skipArr.includes(value)) return value;
+  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -978,55 +1032,38 @@ var getSequenceValue = (value = "A", sequenceProps) => {
   }
   return isNegative + sequenceItem.scaling + unit;
 };
-var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+var getSequenceValueBySymbols = (value, sequenceProps) => {
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (!mathArr.length) return value;
+  return mathArr.map((symbol) => {
+    const valuesArr = value.split(symbol + " ").map((v) => v.trim());
+    const transformedValues = valuesArr.map((v) => {
+      return getSequenceValue(v, sequenceProps);
+    });
+    return transformedValues.join(symbol + " ");
+  }).join("");
+};
+var getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
   if (typeof value !== "string") {
     const CONFIG2 = getActiveConfig();
     if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
     return { [propertyName]: value };
   }
   if (value === "-" || value === "") return {};
-  return { [propertyName]: getSequenceValue(value, sequenceProps) };
-};
-
-// src/utils/var.js
-var applySequenceGlobalVars = (vars, obj, options) => {
-  const CONFIG2 = getActiveConfig();
-  const { UNIT: UNIT2 } = CONFIG2;
-  const unit = obj.unit || UNIT2.default;
-  const { base, ratio, type } = obj;
-  const prefix = "--" + (type && type.replace(".", "-"));
-  vars[`${prefix}-base`] = base;
-  vars[`${prefix}-unit`] = unit;
-  const ratioVar = `${prefix}-ratio`;
-  vars[ratioVar] = ratio;
-  const [first, middle, second] = getSubratio(base, ratio);
-  vars[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
-  vars[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
-  vars[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
-};
-var applySequenceVars = (FACTORY2, options = {}) => {
-  const CONFIG2 = getActiveConfig();
-  const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
-  const unit = FACTORY2.unit || UNIT2.default;
-  const { mediaRegenerate, sequence, scales } = FACTORY2;
-  if (!mediaRegenerate) {
-    applySequenceGlobalVars(CSS_VARS2, FACTORY2, options);
-  }
-  for (const key in sequence) {
-    const item = sequence[key];
-    const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
-    if (!mediaRegenerate) {
-      CSS_VARS2[item.variable + "_default"] = value;
-      CSS_VARS2[item.variable] = item.scalingVariable;
-      continue;
-    }
-    if (options.useDefault === false) {
-      CSS_VARS2[item.variable] = value;
-    } else {
-      CSS_VARS2[item.variable + "_default"] = value;
-      CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
-    }
+  if (!fnPrefix && value.includes("(")) {
+    const fnArr = getFnPrefixAndValue(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
   }
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (mathArr.length) {
+    value = getSequenceValueBySymbols(value, sequenceProps);
+  } else value = getSequenceValue(value, sequenceProps);
+  return { [propertyName]: fnPrefix ? `${fnPrefix}(${value})` : value };
 };
 
 // src/utils/sprite.js
@@ -1099,6 +1136,12 @@ var import_utils11 = __toESM(require_cjs(), 1);
 
 // src/system/spacing.js
 var import_utils15 = __toESM(require_cjs(), 1);
+var checkIfBoxSize = (propertyName) => {
+  const prop = propertyName.toLowerCase();
+  const includesWidth = prop.includes("width") || prop.includes("height");
+  const includesBorder = prop.includes("border") || prop.includes("outline");
+  return includesWidth && !includesBorder;
+};
 var getSequence = (sequenceProps) => {
   const CONFIG2 = getActiveConfig();
   const { SPACING: SPACING2 } = CONFIG2;
@@ -1106,12 +1149,16 @@ var getSequence = (sequenceProps) => {
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
 };
-var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
+var getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
   const sequence = getSequence(sequenceProps);
-  if (isString(value) && (value.includes("calc") || value.includes("var"))) {
-    return { [propertyName]: value };
+  if (isString(value)) {
+    if (!fnPrefix && value.includes("(")) {
+      const fnArray = getFnPrefixAndValue(value);
+      fnPrefix = fnArray[0];
+      value = fnArray[1];
+    }
   }
-  const stack = (0, import_utils15.arrayzeValue)(value);
+  const stack = fnPrefix ? [value] : (0, import_utils15.arrayzeValue)(value);
   if (!isArray(stack)) return;
   if (stack.length > 1) {
     let suffix = "";
@@ -1127,45 +1174,40 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
     const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
       stack[i],
       propertyName + direction + suffix,
-      sequence
+      sequence,
+      fnPrefix
+    );
+    return directions[stack.length].map(
+      (dir, key) => wrapSequenceValueByDirection(dir, key)
     );
-    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
   }
-  return getSequenceValuePropertyPair(
-    value,
-    propertyName,
-    sequence
-  );
+  return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix);
 };
-var getSpacingBasedOnRatio = (props, propertyName, val) => {
+var getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
   const CONFIG2 = getActiveConfig();
   const { SPACING: SPACING2 } = CONFIG2;
-  const { spacingRatio, unit } = props;
-  const value = val || props[propertyName];
-  if (spacingRatio) {
-    let sequenceProps = SPACING2[spacingRatio];
-    if (!sequenceProps) {
-      const { type, base, range, subSequence } = SPACING2;
-      sequenceProps = SPACING2[spacingRatio] = merge({
-        ratio: spacingRatio,
-        type: type + "-" + spacingRatio,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      }, {
-        base,
-        range,
-        subSequence,
-        ratio: SPACING2.ratio,
-        unit: SPACING2.unit
-      });
-    }
-    applySequenceVars(sequenceProps, { useDefault: false });
-    return getSpacingByKey(value, propertyName, sequenceProps);
+  let value = val || props[propertyName];
+  if (!fnPrefix && isString(value) && value.includes("(")) {
+    const fnArr = getFnPrefixAndValue(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
+  }
+  if (props.spacingRatio) {
+    const sequenceProps = applyCustomSequence(props);
+    return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix);
   }
-  return getSpacingByKey(value, propertyName);
+  return getSpacingByKey(value, propertyName, SPACING2, fnPrefix);
+};
+var splitSpacedValue = (val) => {
+  const addDefault = (v) => {
+    const isSymbol = ["+", "-", "*", "/"].includes(v);
+    const hasUnits = CSS_UNITS.some((unit) => val.includes(unit));
+    if (isSymbol || hasUnits) return v;
+    const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
+    if (isSingleLetter) return v + "_default";
+    return v;
+  };
+  return val.split(",").map((v) => v.trim()).map(addDefault).join(",").split(" ").map(addDefault).join(" ");
 };
 
 // src/system/shadow.js
@@ -1313,30 +1355,23 @@ var splitTransition = (transition) => {
   if (!arr.length) return;
   return arr.map(transformTransition).join(",");
 };
-var checkIfBoxSize = (propertyName) => {
-  const prop = propertyName.toLowerCase();
-  return (prop.includes("width") || prop.includes("height")) && !prop.includes("border");
-};
 var transformSize = (propertyName, val, props = {}, opts = {}) => {
   let value = val || props[propertyName];
   if (isUndefined(value) && isNull(value)) return;
-  const shouldScaleBoxSize = props.scaleBoxSize;
-  const isBoxSize = checkIfBoxSize(propertyName);
-  if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
-    value = value.split(" ").map((v) => {
-      const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
-      const hasUnits = ["%", "vw", "vh", "ch"].some(
-        (unit) => value.includes(unit)
-      );
-      if (isSingleLetter && !hasUnits) return v + "_default";
-      return v;
-    }).join(" ");
-  }
-  if (opts.ratio) {
-    return getSpacingBasedOnRatio(props, propertyName, value);
-  } else {
-    return getSpacingByKey(value, propertyName);
+  let fnPrefix;
+  if (isString(value)) {
+    if (value.includes("(")) {
+      const fnArr = getFnPrefixAndValue(value);
+      fnPrefix = fnArr[0];
+      value = fnArr[1];
+    }
+    const shouldScaleBoxSize = props.scaleBoxSize;
+    const isBoxSize = checkIfBoxSize(propertyName);
+    if (!shouldScaleBoxSize && isBoxSize) {
+      value = splitSpacedValue(value);
+    }
   }
+  return opts.ratio ? getSpacingBasedOnRatio(props, propertyName, value, fnPrefix) : getSpacingByKey(value, propertyName, void 0, fnPrefix);
 };
 var transformSizeRatio = (propertyName, props) => {
   return transformSize(propertyName, null, props, {

package/dist/cjs/utils/index.js

@@ -311,6 +311,7 @@ var require_cjs = __commonJS({
 // src/utils/index.js
 var utils_exports = {};
 __export(utils_exports, {
+  CSS_UNITS: () => CSS_UNITS,
   applyMediaSequenceVars: () => applyMediaSequenceVars,
   applySequenceGlobalVars: () => applySequenceGlobalVars,
   applySequenceVars: () => applySequenceVars,
@@ -325,6 +326,7 @@ __export(utils_exports, {
   generateSubSequence: () => generateSubSequence,
   getColorShade: () => getColorShade,
   getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+  getFnPrefixAndValue: () => getFnPrefixAndValue,
   getFontFace: () => getFontFace,
   getFontFaceEach: () => getFontFaceEach,
   getFontFaceEachString: () => getFontFaceEachString,
@@ -332,6 +334,7 @@ __export(utils_exports, {
   getFontFormat: () => getFontFormat,
   getRgbTone: () => getRgbTone,
   getSequenceValue: () => getSequenceValue,
+  getSequenceValueBySymbols: () => getSequenceValueBySymbols,
   getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
   getSubratio: () => getSubratio,
   getSubratioDifference: () => getSubratioDifference,
@@ -362,6 +365,58 @@ module.exports = __toCommonJS(utils_exports);
 var isScalingUnit = (unit) => {
   return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
 };
+var CSS_UNITS = [
+  // Absolute
+  "px",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+  // Font-relative
+  "em",
+  "rem",
+  "ex",
+  "cap",
+  "ch",
+  "ic",
+  "lh",
+  "rlh",
+  // Viewport-relative
+  "%",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "svw",
+  "svh",
+  "lvw",
+  "lvh",
+  "dvw",
+  "dvh",
+  // Container query units
+  "cqw",
+  "cqh",
+  "cqi",
+  "cqb",
+  "cqmin",
+  "cqmax",
+  // Angle
+  "deg",
+  "rad",
+  "grad",
+  "turn",
+  // Time
+  "s",
+  "ms",
+  // Resolution
+  "dpi",
+  "dpcm",
+  "dppx",
+  // Grid fractional
+  "fr",
+  "auto"
+];
 
 // ../../../domql/packages/utils/dist/esm/env.js
 var NODE_ENV = "development";
@@ -943,6 +998,12 @@ var setSequenceValue = (props, sequenceProps) => {
   sequenceProps.scales[key] = scaling;
   sequenceProps.vars[variable] = scaling + sequenceProps.unit;
 };
+var getFnPrefixAndValue = (val) => {
+  if (!val.includes("(")) return val;
+  const prefix = val.split("(")[0];
+  const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
+  return [prefix, value];
+};
 var setScalingVar = (key, sequenceProps) => {
   const { base, type, unit } = sequenceProps;
   const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
@@ -1076,13 +1137,26 @@ var generateSequencePosition = (sequenceProps, position = 0) => {
 var getSequenceValue = (value = "A", sequenceProps) => {
   const CONFIG2 = getActiveConfig();
   const { UNIT: UNIT2 } = CONFIG2;
-  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
-  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
+  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
   const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
-  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || value.includes("var") || !startsWithDashOrLetter)
-    return value;
+  const hasUnits = CSS_UNITS.some((unit2) => value.includes(unit2));
+  if (hasUnits || !startsWithDashOrLetter) return value;
+  const skipArr = [
+    "none",
+    "auto",
+    "max-content",
+    "min-content",
+    "fit-content",
+    "inherit",
+    "initial",
+    "unset",
+    "revert",
+    "revert-layer"
+  ];
+  if (skipArr.includes(value)) return value;
+  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -1124,14 +1198,38 @@ var getSequenceValue = (value = "A", sequenceProps) => {
   }
   return isNegative + sequenceItem.scaling + unit;
 };
-var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+var getSequenceValueBySymbols = (value, sequenceProps) => {
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (!mathArr.length) return value;
+  return mathArr.map((symbol) => {
+    const valuesArr = value.split(symbol + " ").map((v) => v.trim());
+    const transformedValues = valuesArr.map((v) => {
+      return getSequenceValue(v, sequenceProps);
+    });
+    return transformedValues.join(symbol + " ");
+  }).join("");
+};
+var getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
   if (typeof value !== "string") {
     const CONFIG2 = getActiveConfig();
     if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
     return { [propertyName]: value };
   }
   if (value === "-" || value === "") return {};
-  return { [propertyName]: getSequenceValue(value, sequenceProps) };
+  if (!fnPrefix && value.includes("(")) {
+    const fnArr = getFnPrefixAndValue(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
+  }
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (mathArr.length) {
+    value = getSequenceValueBySymbols(value, sequenceProps);
+  } else value = getSequenceValue(value, sequenceProps);
+  return { [propertyName]: fnPrefix ? `${fnPrefix}(${value})` : value };
 };
 var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
 var findHeadings = (propertyNames) => {