@symbo.ls/scratch 3.2.3 → 3.2.8

package/src/utils/sequence.js

@@ -1,9 +1,10 @@
 'use strict'
 
 import { isString } from '@domql/utils'
-import { toDashCase } from '@symbo.ls/utils'
+import { toDashCase } from '@symbo.ls/smbls-utils'
 import { getActiveConfig } from '../factory.js'
-import { isScalingUnit } from './unit.js'
+import { CSS_UNITS, isScalingUnit } from './unit.js'
+import { isCSSVar } from './color.js'
 
 export const numToLetterMap = {
   '-6': 'U',
@@ -39,7 +40,7 @@ const setSequenceValue = (props, sequenceProps) => {
   sequenceProps.sequence[key] = {
     key,
     decimal: ~~(value * 100) / 100,
-    val: ~~(value),
+    val: ~~value,
     scaling,
     index,
     scalingVariable,
@@ -49,6 +50,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
 
@@ -81,16 +89,16 @@ export const setSubScalingVar = (index, arr, variable, sequenceProps) => {
 }
 
 export const getSubratioDifference = (base, ratio) => {
-  const diff = (base * ratio - base)
+  const diff = base * ratio - base
   const subRatio = diff / 1.618
-  const first = (base * ratio - subRatio)
+  const first = base * ratio - subRatio
   const second = base + subRatio
   const middle = (first + second) / 2
   return [first, middle, second]
 }
 
 export const getSubratio = (base, ratio) => {
-  return getSubratioDifference(base, ratio).map(v => v / base)
+  return getSubratioDifference(base, ratio).map((v) => v / base)
 }
 
 export const generateSubSequence = (props, sequenceProps) => {
@@ -105,10 +113,15 @@ export const generateSubSequence = (props, sequenceProps) => {
   else arr = [first, second]
 
   arr.forEach((v, k) => {
-    const scaling = ~~(v / base * 1000) / 1000
+    const scaling = ~~((v / base) * 1000) / 1000
     const newVar = variable + (k + 1)
     const newIndex = index + (k + 1) / 10
-    const scalingVariable = setSubScalingVar(k + 1, arr, variable, sequenceProps)
+    const scalingVariable = setSubScalingVar(
+      k + 1,
+      arr,
+      variable,
+      sequenceProps
+    )
 
     const props = {
       key: key + (k + 1),
@@ -146,7 +159,7 @@ export const generateSequence = (sequenceProps) => {
     const key = range[1] - i
     const letterKey = numToLetterMap[key]
     const value = switchSequenceOnNegative(key, base, ratio)
-    const scaling = ~~(value / base * 100) / 100
+    const scaling = ~~((value / base) * 100) / 100
     const variable = prefix + letterKey
     const scalingVariable = setScalingVar(key, sequenceProps)
 
@@ -176,7 +189,7 @@ export const generateSequencePosition = (sequenceProps, position = 0) => {
         ([, value]) => value === position
       )?.[0]
     : position
-  
+
   if (!letterKey) {
     console.warn(`Position ${position} is out of range in numToLetterMap`)
     return null
@@ -219,32 +232,31 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   const CONFIG = getActiveConfig()
   const { UNIT } = CONFIG
 
-  const {
-    sequence,
-    unit = UNIT.default,
-    useVariable
-  } = sequenceProps
+  if (isString(value) && isCSSVar(value)) return `var(${value})`
 
-  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
@@ -255,7 +267,8 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     absValue = absValue.split('_')[0]
   }
 
-  const varValue = v => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v
+  const varValue = (v) =>
+    startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v
   if (absValue.includes('+')) {
     const [first, second] = absValue.split('+')
     const joint = `${varValue(first)} + ${varValue(second)}`
@@ -274,7 +287,11 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
 
   // if subsequence is not set but value is applied
   if (!sequence[absValue] && absValue.length === 2) {
-    if (CONFIG.verbose) console.warn(absValue, '- value is not found because `subSequence` is set to false')
+    if (CONFIG.verbose)
+      console.warn(
+        absValue,
+        '- value is not found because `subSequence` is set to false'
+      )
     absValue = absValue.slice(0, 1)
   }
 
@@ -284,7 +301,7 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   }
 
   const sequenceItem = sequence ? sequence[absValue] : null
-  if (!sequenceItem) return console.warn('can\'t find', sequence, absValue)
+  if (!sequenceItem) return console.warn("can't find", sequence, absValue)
 
   if (unit === 'ms' || unit === 's') {
     return isNegative + sequenceItem.val + unit
@@ -293,19 +310,57 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
   return isNegative + sequenceItem.scaling + unit
 }
 
-export const getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+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,
+  fnPrefix
+) => {
   if (typeof value !== 'string') {
     const CONFIG = getActiveConfig()
     if (CONFIG.verbose) console.warn(propertyName, value, 'is not a string')
-    return ({ [propertyName]: value })
+    return { [propertyName]: value }
   }
-  if (value === '-' || value === '') return ({})
-  return { [propertyName]: getSequenceValue(value, sequenceProps) }
+
+  if (value === '-' || value === '') return {}
+
+  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) => numToLetterMap[h1Matches - index]
+export const findHeadingLetter = (h1Matches, index) =>
+  numToLetterMap[h1Matches - index]
 
-export const findHeadings = propertyNames => {
+export const findHeadings = (propertyNames) => {
   const { h1Matches, sequence } = propertyNames
   return new Array(6).fill(null).map((_, i) => {
     const findLetter = findHeadingLetter(h1Matches, i)

package/src/utils/sprite.js

@@ -5,7 +5,7 @@ import { getActiveConfig } from '../factory'
 
 const isDev = isNotProduction()
 
-export const generateSprite = icons => {
+export const generateSprite = (icons) => {
   const CONFIG = getActiveConfig()
 
   let sprite = ''
@@ -19,7 +19,7 @@ export const generateSprite = icons => {
   return sprite
 }
 
-const parseRootAttributes = htmlString => {
+const parseRootAttributes = (htmlString) => {
   const val = htmlString.default || htmlString
   if (!isString(val)) {
     if (isDev) console.warn('parseRootAttributes:', val, 'is not a string')

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'
+]

package/src/utils/var.js

@@ -9,8 +9,7 @@ export const setVariables = (result, key) => {
   const CONFIG = getActiveConfig()
   const { CSS_VARS } = CONFIG
   if (isObjectLike(result.value)) {
-    // for (const key in result.value) {
-    // }
+    // TODO: handle nested object variables
   } else {
     CSS_VARS[result.var] = result.value
   }

package/dist/cjs/defaultConfig/animation.js

@@ -1,26 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/animation.js
-var animation_exports = {};
-__export(animation_exports, {
-  ANIMATION: () => ANIMATION
-});
-module.exports = __toCommonJS(animation_exports);
-var ANIMATION = {};

package/dist/cjs/defaultConfig/cases.js

@@ -1,26 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/cases.js
-var cases_exports = {};
-__export(cases_exports, {
-  CASES: () => CASES
-});
-module.exports = __toCommonJS(cases_exports);
-var CASES = {};

package/dist/cjs/defaultConfig/class.js

@@ -1,27 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/class.js
-var class_exports = {};
-__export(class_exports, {
-  CLASS: () => CLASS
-});
-module.exports = __toCommonJS(class_exports);
-var defaultProps = {};
-var CLASS = defaultProps;

package/dist/cjs/defaultConfig/color.js

@@ -1,28 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/color.js
-var color_exports = {};
-__export(color_exports, {
-  COLOR: () => COLOR,
-  GRADIENT: () => GRADIENT
-});
-module.exports = __toCommonJS(color_exports);
-var COLOR = {};
-var GRADIENT = {};

package/dist/cjs/defaultConfig/document.js

@@ -1,26 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/document.js
-var document_exports = {};
-__export(document_exports, {
-  DOCUMENT: () => DOCUMENT
-});
-module.exports = __toCommonJS(document_exports);
-var DOCUMENT = {};

package/dist/cjs/defaultConfig/font-family.js

@@ -1,34 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/font-family.js
-var font_family_exports = {};
-__export(font_family_exports, {
-  FONT_FACE: () => FONT_FACE,
-  FONT_FAMILY: () => FONT_FAMILY,
-  FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES
-});
-module.exports = __toCommonJS(font_family_exports);
-var FONT_FAMILY = {};
-var FONT_FAMILY_TYPES = {
-  "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
-  serif: "Times New Roman, Georgia, serif, --system-default",
-  monospace: "Courier New, monospace, --system-default"
-};
-var FONT_FACE = {};

package/dist/cjs/defaultConfig/font.js

@@ -1,26 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/font.js
-var font_exports = {};
-__export(font_exports, {
-  FONT: () => FONT
-});
-module.exports = __toCommonJS(font_exports);
-var FONT = {};

package/dist/cjs/defaultConfig/grid.js

@@ -1,27 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/grid.js
-var grid_exports = {};
-__export(grid_exports, {
-  GRID: () => GRID
-});
-module.exports = __toCommonJS(grid_exports);
-var defaultProps = {};
-var GRID = defaultProps;

package/dist/cjs/defaultConfig/icons.js

@@ -1,28 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/defaultConfig/icons.js
-var icons_exports = {};
-__export(icons_exports, {
-  ICONS: () => ICONS,
-  SEMANTIC_ICONS: () => SEMANTIC_ICONS
-});
-module.exports = __toCommonJS(icons_exports);
-var ICONS = {};
-var SEMANTIC_ICONS = {};