@symbo.ls/scratch 2.33.13 → 2.33.17

package/dist/cjs/index.js

@@ -317,6 +317,7 @@ __export(index_exports, {
   CLASS: () => CLASS,
   COLOR: () => COLOR,
   CONFIG: () => CONFIG,
+  CSS_UNITS: () => CSS_UNITS,
   CSS_VARS: () => CSS_VARS,
   DEVICES: () => DEVICES,
   DOCUMENT: () => DOCUMENT,
@@ -368,6 +369,7 @@ __export(index_exports, {
   getColor: () => getColor,
   getColorShade: () => getColorShade,
   getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+  getFnPrefixAndValue: () => getFnPrefixAndValue,
   getFontFace: () => getFontFace,
   getFontFaceEach: () => getFontFaceEach,
   getFontFaceEachString: () => getFontFaceEachString,
@@ -379,6 +381,7 @@ __export(index_exports, {
   getMediaTheme: () => getMediaTheme,
   getRgbTone: () => getRgbTone,
   getSequenceValue: () => getSequenceValue,
+  getSequenceValueBySymbols: () => getSequenceValueBySymbols,
   getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
   getShadow: () => getShadow,
   getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
@@ -424,6 +427,7 @@ __export(index_exports, {
   setTheme: () => setTheme,
   setValue: () => setValue,
   setVariables: () => setVariables,
+  splitSpacedValue: () => splitSpacedValue,
   splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
@@ -441,6 +445,7 @@ module.exports = __toCommonJS(index_exports);
 // src/utils/index.js
 var utils_exports = {};
 __export(utils_exports, {
+  CSS_UNITS: () => CSS_UNITS,
   applyMediaSequenceVars: () => applyMediaSequenceVars,
   applySequenceGlobalVars: () => applySequenceGlobalVars,
   applySequenceVars: () => applySequenceVars,
@@ -455,6 +460,7 @@ __export(utils_exports, {
   generateSubSequence: () => generateSubSequence,
   getColorShade: () => getColorShade,
   getDefaultOrFirstKey: () => getDefaultOrFirstKey,
+  getFnPrefixAndValue: () => getFnPrefixAndValue,
   getFontFace: () => getFontFace,
   getFontFaceEach: () => getFontFaceEach,
   getFontFaceEachString: () => getFontFaceEachString,
@@ -462,6 +468,7 @@ __export(utils_exports, {
   getFontFormat: () => getFontFormat,
   getRgbTone: () => getRgbTone,
   getSequenceValue: () => getSequenceValue,
+  getSequenceValueBySymbols: () => getSequenceValueBySymbols,
   getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
   getSubratio: () => getSubratio,
   getSubratioDifference: () => getSubratioDifference,
@@ -491,6 +498,58 @@ __export(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";
@@ -1129,6 +1188,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;
@@ -1262,13 +1327,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;
@@ -1310,14 +1388,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) => {
@@ -1474,6 +1576,7 @@ __export(system_exports, {
   applySpacingSequence: () => applySpacingSequence,
   applyTimingSequence: () => applyTimingSequence,
   applyTypographySequence: () => applyTypographySequence,
+  checkIfBoxSize: () => checkIfBoxSize,
   getColor: () => getColor,
   getFontFamily: () => getFontFamily,
   getFontSizeByKey: () => getFontSizeByKey,
@@ -1494,7 +1597,8 @@ __export(system_exports, {
   setSVG: () => setSVG,
   setShadow: () => setShadow,
   setSvgIcon: () => setSvgIcon,
-  setTheme: () => setTheme
+  setTheme: () => setTheme,
+  splitSpacedValue: () => splitSpacedValue
 });
 
 // src/system/color.js
@@ -1923,15 +2027,7 @@ var runThroughMedia2 = (FACTORY2) => {
     const mediaProps = FACTORY2[prop];
     const isMediaName = prop.slice(0, 1) === "@";
     if (!isMediaName) continue;
-    const {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit
-    } = FACTORY2;
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
     merge(mediaProps, {
       type,
       base,
@@ -1949,6 +2045,12 @@ var runThroughMedia2 = (FACTORY2) => {
     applyMediaSequenceVars(FACTORY2, prop);
   }
 };
+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 applySpacingSequence = () => {
   const CONFIG2 = getActiveConfig();
   const { SPACING: SPACING2 } = CONFIG2;
@@ -1963,12 +2065,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 = "";
@@ -1984,45 +2090,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);
-  }
-  return getSpacingByKey(value, propertyName);
+  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, 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
@@ -2358,30 +2459,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/set.js

@@ -725,6 +725,58 @@ var setActiveConfig = (newConfig) => {
 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) => {
@@ -880,6 +932,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;
@@ -975,13 +1033,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;
@@ -1023,14 +1094,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) => {
@@ -1545,15 +1640,7 @@ var runThroughMedia2 = (FACTORY2) => {
     const mediaProps = FACTORY2[prop];
     const isMediaName = prop.slice(0, 1) === "@";
     if (!isMediaName) continue;
-    const {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit
-    } = FACTORY2;
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
     merge(mediaProps, {
       type,
       base,
@@ -1585,12 +1672,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 = "";
@@ -1606,15 +1697,14 @@ 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);
 };
 
 // src/system/shadow.js