@symbo.ls/scratch 2.33.14 → 2.33.20

package/dist/cjs/utils/sequence.js

@@ -316,7 +316,9 @@ __export(sequence_exports, {
   generateSequence: () => generateSequence,
   generateSequencePosition: () => generateSequencePosition,
   generateSubSequence: () => generateSubSequence,
+  getFnPrefixAndValue: () => getFnPrefixAndValue,
   getSequenceValue: () => getSequenceValue,
+  getSequenceValueBySymbols: () => getSequenceValueBySymbols,
   getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
   getSubratio: () => getSubratio,
   getSubratioDifference: () => getSubratioDifference,
@@ -684,6 +686,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/sequence.js
 var numToLetterMap = {
@@ -728,6 +782,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;
@@ -861,13 +921,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_utils3.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_utils3.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -909,14 +982,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) => {

package/dist/cjs/utils/unit.js

@@ -20,9 +20,62 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils/unit.js
 var unit_exports = {};
 __export(unit_exports, {
+  CSS_UNITS: () => CSS_UNITS,
   isScalingUnit: () => isScalingUnit
 });
 module.exports = __toCommonJS(unit_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"
+];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.33.14",
+  "version": "2.33.20",
   "files": [
     "src",
     "dist"
@@ -25,9 +25,9 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^2.33.14",
-    "@symbo.ls/utils": "^2.33.14",
+    "@domql/utils": "^2.33.20",
+    "@symbo.ls/utils": "^2.33.20",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "6794a2267003c3ffcbf972d382e850c1fee0dbe5"
+  "gitHead": "717ab2ed8690b295c7d6c79e31831048f20f4e86"
 }

package/src/system/spacing.js

@@ -5,28 +5,22 @@ import { isArray, isString, merge } from '@domql/utils'
 
 import { getActiveConfig } from '../factory.js'
 import {
+  CSS_UNITS,
   applyMediaSequenceVars,
   applySequenceVars,
   generateSequence,
+  getFnPrefixAndValue,
   getSequenceValuePropertyPair
 } from '../utils'
 
-const runThroughMedia = FACTORY => {
+const runThroughMedia = (FACTORY) => {
   for (const prop in FACTORY) {
     const mediaProps = FACTORY[prop]
 
     const isMediaName = prop.slice(0, 1) === '@'
     if (!isMediaName) continue
 
-    const {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit
-    } = FACTORY
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY
 
     merge(mediaProps, {
       type,
@@ -47,6 +41,13 @@ const runThroughMedia = FACTORY => {
   }
 }
 
+export const 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
+}
+
 export const applySpacingSequence = () => {
   const CONFIG = getActiveConfig()
   const { SPACING } = CONFIG
@@ -66,15 +67,20 @@ const getSequence = (sequenceProps) => {
 export const getSpacingByKey = (
   value,
   propertyName = 'padding',
-  sequenceProps
+  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 = arrayzeValue(value)
+  const stack = fnPrefix ? [value] : arrayzeValue(value)
   if (!isArray(stack)) return
 
   if (stack.length > 1) {
@@ -90,56 +96,57 @@ export const getSpacingByKey = (
       4: ['BlockStart', 'InlineEnd', 'BlockEnd', 'InlineStart']
     }
 
-    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
-      stack[i],
-      propertyName + direction + suffix,
-      sequence
-    )
+    const wrapSequenceValueByDirection = (direction, i) =>
+      getSequenceValuePropertyPair(
+        stack[i],
+        propertyName + direction + suffix,
+        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)
 }
 
-export const getSpacingBasedOnRatio = (props, propertyName, val) => {
+export const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
   const CONFIG = getActiveConfig()
   const { SPACING } = CONFIG
 
-  const { spacingRatio, unit } = props
-  const value = val || props[propertyName]
-
-  if (spacingRatio) {
-    let sequenceProps = SPACING[spacingRatio]
-
-    if (!sequenceProps) {
-      const { type, base, range, subSequence } = SPACING
-
-      sequenceProps = SPACING[spacingRatio] = merge({
-        ratio: spacingRatio,
-        type: type + '-' + spacingRatio,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      }, {
-        base,
-        range,
-        subSequence,
-        ratio: SPACING.ratio,
-        unit: SPACING.unit
-      })
-    }
+  let value = val || props[propertyName]
 
-    applySequenceVars(sequenceProps, { useDefault: false })
+  if (!fnPrefix && isString(value) && value.includes('(')) {
+    const fnArr = getFnPrefixAndValue(value)
+    fnPrefix = fnArr[0]
+    value = fnArr[1]
+  }
 
-    return getSpacingByKey(value, propertyName, sequenceProps)
+  if (props.spacingRatio) {
+    const sequenceProps = applyCustomSequence(props)
+    return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix)
   }
 
-  return getSpacingByKey(value, propertyName)
+  return getSpacingByKey(value, propertyName, SPACING, fnPrefix)
+}
+
+export const 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(' ')
 }

package/src/transforms/index.js

@@ -9,8 +9,11 @@ import {
   getMediaColor,
   getTimingByKey,
   getTimingFunction,
-  getSpacingBasedOnRatio
+  getSpacingBasedOnRatio,
+  checkIfBoxSize,
+  splitSpacedValue
 } from '../system'
+import { getFnPrefixAndValue } from '../utils'
 
 const isBorderStyle = (str) =>
   [
@@ -142,41 +145,30 @@ export const splitTransition = (transition) => {
   return arr.map(transformTransition).join(',')
 }
 
-export const checkIfBoxSize = (propertyName) => {
-  const prop = propertyName.toLowerCase()
-  return (
-    (prop.includes('width') || prop.includes('height')) &&
-    !prop.includes('border')
-  )
-}
-
 export const 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(' ')
+  let fnPrefix
+  if (isString(value)) {
+    // has function prefix
+    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)
+    }
   }
 
-  if (opts.ratio) {
-    return getSpacingBasedOnRatio(props, propertyName, value)
-  } else {
-    return getSpacingByKey(value, propertyName)
-  }
+  return opts.ratio
+    ? getSpacingBasedOnRatio(props, propertyName, value, fnPrefix)
+    : getSpacingByKey(value, propertyName, undefined, fnPrefix)
 }
 
 export const transformSizeRatio = (propertyName, props) => {

package/src/utils/sequence.js

@@ -3,7 +3,7 @@
 import { isString } from '@domql/utils'
 import { toDashCase } from '@symbo.ls/utils'
 import { getActiveConfig } from '../factory.js'
-import { isScalingUnit } from './unit.js'
+import { CSS_UNITS, isScalingUnit } from './unit.js'
 
 export const numToLetterMap = {
   '-6': 'U',
@@ -49,6 +49,13 @@ const setSequenceValue = (props, sequenceProps) => {
   sequenceProps.vars[variable] = scaling + sequenceProps.unit
 }
 
+export const getFnPrefixAndValue = (val) => {
+  if (!val.includes('(')) return val
+  const prefix = val.split('(')[0]
+  const value = val.slice(val.indexOf('(') + 1, val.lastIndexOf(')'))
+  return [prefix, value]
+}
+
 export const setScalingVar = (key, sequenceProps) => {
   const { base, type, unit } = sequenceProps
 
@@ -224,29 +231,31 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   const CONFIG = getActiveConfig()
   const { UNIT } = CONFIG
 
-  const { sequence, unit = UNIT.default, useVariable } = sequenceProps
-
   if (isString(value) && value.slice(0, 2) === '--') return `var(${value})`
 
-  const prefix = `--${toDashCase(sequenceProps.type.replace('.', '-'))}-`
+  const { sequence, unit = UNIT.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((unit) => value.includes(unit))
+  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 = `--${toDashCase(sequenceProps.type.replace('.', '-'))}-`
   const letterVal = value.toUpperCase()
   const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
   let absValue = isNegative ? letterVal.slice(1) : letterVal
@@ -300,18 +309,51 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   return isNegative + sequenceItem.scaling + unit
 }
 
+export const 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('')
+}
+
 export const getSequenceValuePropertyPair = (
   value,
   propertyName,
-  sequenceProps
+  sequenceProps,
+  fnPrefix
 ) => {
   if (typeof value !== 'string') {
     const CONFIG = getActiveConfig()
     if (CONFIG.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 }
 }
 
 export const findHeadingLetter = (h1Matches, index) =>

package/src/utils/unit.js

@@ -1,5 +1,72 @@
 'use strict'
 
-export const isScalingUnit = unit => {
-  return unit === 'em' || unit === 'rem' || unit === 'vw' || unit === 'vh' || unit === 'vmax' || unit === 'vmin'
+export const isScalingUnit = (unit) => {
+  return (
+    unit === 'em' ||
+    unit === 'rem' ||
+    unit === 'vw' ||
+    unit === 'vh' ||
+    unit === 'vmax' ||
+    unit === 'vmin'
+  )
 }
+
+export const 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'
+]