@symbo.ls/scratch 3.14.2 → 3.14.3

package/src/utils/sequence.js

@@ -1,386 +0,0 @@
-'use strict'
-
-import { isString } from '@symbo.ls/utils'
-import { toDashCase } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-import { CSS_UNITS, isScalingUnit } from './unit.js'
-import { isCSSVar } from './color.js'
-
-export const numToLetterMap = {
-  '-6': 'U',
-  '-5': 'V',
-  '-4': 'W',
-  '-3': 'X',
-  '-2': 'Y',
-  '-1': 'Z',
-  0: 'A',
-  1: 'B',
-  2: 'C',
-  3: 'D',
-  4: 'E',
-  5: 'F',
-  6: 'G',
-  7: 'H',
-  8: 'I',
-  9: 'J',
-  10: 'K',
-  11: 'L',
-  12: 'M',
-  13: 'N',
-  14: 'O',
-  15: 'P',
-  16: 'Q',
-  17: 'R',
-  18: 'S',
-  19: 'T'
-}
-
-const setSequenceValue = (props, sequenceProps) => {
-  const { key, variable, value, scaling, index, scalingVariable } = props
-  sequenceProps.sequence[key] = {
-    key,
-    decimal: ~~(value * 100) / 100,
-    val: ~~value,
-    scaling,
-    index,
-    scalingVariable,
-    variable
-  }
-  sequenceProps.scales[key] = scaling
-  const varUnit = VIEWPORT_UNITS.has(sequenceProps.unit) ? 'rem' : sequenceProps.unit
-  sequenceProps.vars[variable] = scaling + varUnit
-}
-
-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]
-}
-
-const VIEWPORT_UNITS = new Set(['vw', 'vh', 'vmin', 'vmax', 'svw', 'svh', 'lvw', 'lvh', 'dvw', 'dvh'])
-
-export const setScalingVar = (key, sequenceProps) => {
-  const { base, type, unit: rawUnit } = sequenceProps
-  const unit = VIEWPORT_UNITS.has(rawUnit) ? 'rem' : rawUnit
-
-  const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit
-
-  if (key === 0) return defaultVal
-
-  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
-  const prefix = '--' + vp + (type && type.replace('.', '-'))
-  const ratioVar = `${prefix}-ratio`
-
-  if (key > 0) {
-    const prevLetterKey = numToLetterMap[key - 1]
-    return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`
-  }
-  if (key < 0) {
-    const nextLetterKey = numToLetterMap[key + 1]
-    const absKey = Math.abs(key)
-    const phiPow = Math.pow(PHI, 2 * absKey)
-    const prevAscKey = numToLetterMap[absKey]
-    // Clamp: max(current / ratio, normalized * ratio^n / phi^2n)
-    // current chain: A / ratio^n
-    // normalized: A * ratio^n / phi^(2n) = ASC mirror / phi^(2n)
-    if (prevAscKey) {
-      return `max(calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar})), calc(var(${prefix}-${prevAscKey}) / ${phiPow.toFixed(4)}))`
-    }
-    return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`
-  }
-}
-
-export const setSubScalingVar = (index, arr, variable, sequenceProps) => {
-  const { type } = sequenceProps
-  const skipMiddle = index === 2 && arr.length === 2
-  const indexMapWithLength = skipMiddle ? index + 1 : index
-
-  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
-  const prefix = '--' + vp + (type && type.replace('.', '-'))
-  const subRatioVarPrefix = `${prefix}-sub-ratio-`
-
-  return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`
-}
-
-export const getSubratioDifference = (base, ratio) => {
-  const diff = base * ratio - base
-  const subRatio = diff / 1.618
-  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)
-}
-
-export const generateSubSequence = (props, sequenceProps) => {
-  const { key, base, value, ratio, variable, index } = props
-
-  const next = value * ratio
-  const diffRounded = ~~next - ~~value
-
-  let arr
-  const [first, middle, second] = getSubratioDifference(value, ratio)
-  if (diffRounded > 16) arr = [first, middle, second]
-  else arr = [first, second]
-
-  arr.forEach((v, k) => {
-    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 props = {
-      key: key + (k + 1),
-      variable: newVar,
-      value: v,
-      scaling,
-      scalingVariable,
-      index: newIndex
-    }
-
-    setSequenceValue(props, sequenceProps)
-  })
-}
-
-const PHI = 1.618
-
-const switchSequenceOnNegative = (key, base, ratio) => {
-  if (key >= 0) return base * Math.pow(ratio, key)
-
-  // DESC: clamp between current and normalized to preserve proportions
-  // Below golden ratio: use current (1/ratio^n) — nothing changes
-  // Above golden ratio: use normalized (ratio^n / phi^2n) — proportion stays constant
-  const absKey = Math.abs(key)
-  const current = base * Math.pow(ratio, key)                          // base / ratio^n
-  const normalized = base * Math.pow(ratio, absKey) / Math.pow(PHI, 2 * absKey) // base * ratio^n / phi^(2n)
-  return Math.max(current, normalized)
-}
-
-export const generateSequence = (sequenceProps) => {
-  const { type, base, ratio, range, subSequence } = sequenceProps
-  const n = Math.abs(range[0]) + Math.abs(range[1])
-  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
-  const prefix = '--' + vp + (type && type.replace('.', '-')) + '-'
-
-  for (let i = 0; i <= n; i++) {
-    const key = range[1] - i
-    const letterKey = numToLetterMap[key]
-    const value = switchSequenceOnNegative(key, base, ratio)
-    const scaling = ~~((value / base) * 100) / 100
-    const variable = prefix + letterKey
-    const scalingVariable = setScalingVar(key, sequenceProps)
-
-    const props = {
-      key: letterKey,
-      variable,
-      value,
-      base,
-      scaling,
-      scalingVariable,
-      ratio,
-      index: key
-    }
-
-    setSequenceValue(props, sequenceProps)
-
-    if (subSequence) generateSubSequence(props, sequenceProps)
-  }
-  return sequenceProps
-}
-
-export const generateSequencePosition = (sequenceProps, position = 0) => {
-  const { type, base, ratio, subSequence } = sequenceProps
-  const letterKey = isString(position) ? position : numToLetterMap[position]
-  const index = isString(position)
-    ? Object.entries(numToLetterMap).find(
-        ([, value]) => value === position
-      )?.[0]
-    : position
-
-  if (!letterKey) {
-    console.warn(`Position ${position} is out of range in numToLetterMap`)
-    return null
-  }
-
-  const result = {
-    sequence: {},
-    scales: {},
-    vars: {},
-    ...sequenceProps
-  }
-
-  const value = base * Math.pow(ratio, index)
-  const scaling = ~~((value / base) * 100) / 100
-  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
-  const prefix = '--' + vp + (type && type.replace('.', '-')) + '-'
-  const variable = prefix + letterKey
-  const scalingVariable = setScalingVar(index, sequenceProps)
-
-  const props = {
-    key: letterKey,
-    variable,
-    value,
-    base,
-    scaling,
-    scalingVariable,
-    ratio,
-    index
-  }
-
-  setSequenceValue(props, result)
-
-  if (subSequence) {
-    generateSubSequence(props, result)
-  }
-
-  return result
-}
-
-export const getSequenceValue = (value = 'A', sequenceProps) => {
-  const CONFIG = getActiveConfig()
-  const { unit: UNIT } = CONFIG
-
-  if (isString(value) && isCSSVar(value)) return `var(${value})`
-
-  const { sequence, unit = UNIT.default, useVariable } = sequenceProps
-
-  const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i
-  const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(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 vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + '-' : ''
-  const prefix = `--${vp}${toDashCase(sequenceProps.type.replace('.', '-'))}-`
-  const letterVal = value.toUpperCase()
-  const isNegative = letterVal.slice(0, 1) === '-' ? '-' : ''
-  let absValue = isNegative ? letterVal.slice(1) : letterVal
-
-  let mediaName = ''
-  if (absValue.includes('_')) {
-    mediaName = '_' + absValue.split('_')[1].toLowerCase()
-    absValue = absValue.split('_')[0]
-  }
-
-  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)}`
-    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
-  } else if (absValue.includes('*')) {
-    const [first, second] = absValue.split('*')
-    const joint = `${varValue(first)} * ${varValue(second)}`
-    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
-  } else if (absValue.includes('-')) {
-    // TODO: check this
-    // check for the first char
-    const [first, second] = absValue.split('-')
-    const joint = `${varValue(first)} - ${varValue(second)}`
-    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`
-  }
-
-  // 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'
-      )
-    absValue = absValue.slice(0, 1)
-  }
-
-  if (useVariable || CONFIG.useVariable) {
-    const varValue = `var(${prefix}${absValue}${mediaName})`
-    return isNegative ? `calc(${varValue} * -1)` : varValue
-  }
-
-  const sequenceItem = sequence ? sequence[absValue] : null
-  if (!sequenceItem) return console.warn("can't find", sequence, absValue)
-
-  if (unit === 'ms' || unit === 's') {
-    return isNegative + sequenceItem.val + unit
-  }
-
-  return isNegative + sequenceItem.scaling + unit
-}
-
-export const getSequenceValueBySymbols = (value, sequenceProps) => {
-  const mathArr = ['+', '-', '*', '/', ','].filter((v) =>
-    value.includes(v + ' ')
-  )
-  if (!mathArr.length) return value
-
-  // Tokenize the expression preserving all operators, then resolve each token
-  const symbolRegex = /(\s*[+\-*/,]\s*)/
-  const tokens = value.split(symbolRegex)
-  return tokens.map((token) => {
-    const trimmed = token.trim()
-    if (!trimmed || ['+', '-', '*', '/', ','].includes(trimmed)) return token
-    return getSequenceValue(trimmed, sequenceProps)
-  }).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 }
-  }
-
-  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 findHeadings = (propertyNames) => {
-  const { h1Matches, sequence } = propertyNames
-  return new Array(6).fill(null).map((_, i) => {
-    const findLetter = findHeadingLetter(h1Matches, i)
-    return sequence[findLetter]
-  })
-}

package/src/utils/sprite.js

@@ -1,107 +0,0 @@
-'use strict'
-
-import { isArray, isNotProduction, isString } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-
-const isDev = isNotProduction()
-
-export const generateSprite = (icons) => {
-  const CONFIG = getActiveConfig()
-
-  let sprite = ''
-
-  for (const key in icons) {
-    if (CONFIG.__svgCache[key]) continue
-    else CONFIG.__svgCache[key] = true
-    sprite += icons[key]
-  }
-
-  return sprite
-}
-
-const parseRootAttributes = (htmlString) => {
-  const val = htmlString && (htmlString.default || htmlString)
-  if (!isString(val)) {
-    if (isDev) console.warn('parseRootAttributes:', val, 'is not a string')
-    return {}  // empty attrs — caller destructures `width`/`height`, must not crash
-  }
-
-  const match = val.match(/<svg\s+(.*?)>/)
-  if (!match || !match[1]) {
-    return {}
-  }
-
-  const attrString = match[1]
-  const attrs = attrString.match(
-    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
-  )
-  if (!attrs) return {}  // attr regex sometimes returns null on minimal SVG; same safety
-  return attrs.reduce((acc, attr) => {
-    const [key, value] = attr.split('=')
-    acc[key] = value.replace(/['"]/g, '')
-    return acc
-  }, {})
-}
-
-// Rewrite every internal id="…" + url(#…) reference inside an SVG body
-// with a deterministic suffix derived from the symbol key + the original
-// id. Same input SVG + same key → same output, every render.
-//
-// Previous behavior had three bugs that compounded:
-//   1. `idRegex` had no `g` flag, so `.replace(idRegex, …)` only swapped
-//      the FIRST `id="…"` match. SVGs with multiple ids (filters,
-//      gradients, masks, clipPaths) lost references.
-//   2. `Math.random()` was the per-iteration suffix, so the same SVG got
-//      different ids on every call → SSR-rendered DOM never matched the
-//      hydrate pass and one symbol's filter could fail to match its url().
-//   3. Each iteration reset `replacedCode = code` (instead of chaining),
-//      so even though the loop ran N times it only ever produced one
-//      single-id swap.
-const replaceIdsAndUrls = (code, key) => {
-  const ids = []
-  code.replace(/id="([^"]*)"/g, (_, id) => { ids.push(id); return _ })
-  if (!ids.length) return code
-
-  let replacedCode = code
-  for (const origId of ids) {
-    const escaped = origId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    const newId = `${key}-${origId}`
-    replacedCode = replacedCode
-      .replace(new RegExp(`id="${escaped}"`, 'g'), `id="${newId}"`)
-      .replace(new RegExp(`url\\(#${escaped}\\)`, 'g'), `url(#${newId})`)
-      .replace(new RegExp(`xlink:href="#${escaped}"`, 'g'), `xlink:href="#${newId}"`)
-      .replace(new RegExp(`href="#${escaped}"`, 'g'), `href="#${newId}"`)
-  }
-  return replacedCode
-}
-
-export const convertSvgToSymbol = (key, code) => {
-  const extractAttrs = parseRootAttributes(code)
-  const { width, height } = extractAttrs
-
-  const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`
-  const xmlns = 'http://www.w3.org/2000/svg'
-
-  const replacedCode = replaceIdsAndUrls(code, key)
-
-  let symbol = replacedCode.replace(
-    '<svg',
-    `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
-  )
-
-  symbol = symbol.replace(/width="[^"]*"/, '')
-  symbol = symbol.replace(/height="[^"]*"/, '')
-  symbol = symbol.replace('</svg', '</symbol')
-  symbol = expandSvgSelfClosing(symbol)
-  return symbol
-}
-
-// SVG elements that are void in SVG but not in HTML.
-// HTML parser treats <line .../> as <line ...> (ignores /), nesting siblings.
-// Fix: expand self-closing tags to explicit open+close for HTML parser compat.
-const SVG_VOID_TAGS = 'line|circle|ellipse|rect|polyline|polygon|path|stop|use|image'
-const SVG_SELF_CLOSING_RE = new RegExp(
-  `<(${SVG_VOID_TAGS})\\b([^>]*?)\\s*/>`,
-  'g'
-)
-const expandSvgSelfClosing = (str) => str.replace(SVG_SELF_CLOSING_RE, '<$1$2></$1>')

package/src/utils/theme.js

@@ -1,8 +0,0 @@
-'use strict'
-
-export const returnSubThemeOrDefault = (orig, theme) => {
-  if (!orig) return
-  if (orig.themes && orig.themes[theme]) return orig.themes[theme]
-  if (orig[theme]) return [orig, orig[theme]]
-  return orig
-}

package/src/utils/unit.js

@@ -1,72 +0,0 @@
-'use strict'
-
-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

@@ -1,129 +0,0 @@
-'use strict'
-
-import { isObjectLike } from '@symbo.ls/utils'
-import { getActiveConfig } from '../factory.js'
-import { getSubratio } from './sequence.js'
-import { isScalingUnit } from './unit.js'
-
-export const setVariables = (result, key) => {
-  const CONFIG = getActiveConfig()
-  const { cssVars: CSS_VARS } = CONFIG
-  if (isObjectLike(result.value)) {
-    // TODO: handle nested object variables
-  } else {
-    CSS_VARS[result.var] = result.value
-  }
-}
-
-export const applySequenceGlobalVars = (vars, obj, options) => {
-  const CONFIG = getActiveConfig()
-  const { unit: UNIT } = CONFIG
-  const unit = obj.unit || UNIT.default
-  const { base, ratio, type } = obj
-  const vp = obj.varPrefix ? obj.varPrefix + '-' : ''
-  const prefix = '--' + vp + (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})`
-
-  // vars[`${prefix}-sub-ratio-1`] = first
-  // vars[`${prefix}-sub-ratio-2`] = middle
-  // vars[`${prefix}-sub-ratio-3`] = second
-}
-
-// Viewport units are applied to root fontSize only; tokens use 'rem' instead
-const VIEWPORT_UNITS = new Set(['vw', 'vh', 'vmin', 'vmax', 'svw', 'svh', 'lvw', 'lvh', 'dvw', 'dvh'])
-
-export const applySequenceVars = (FACTORY, options = {}) => {
-  const CONFIG = getActiveConfig()
-  const { unit: UNIT, timing: TIMING, cssVars: CSS_VARS } = CONFIG
-
-  const rawUnit = FACTORY.unit || UNIT.default
-  const unit = VIEWPORT_UNITS.has(rawUnit) ? 'rem' : rawUnit
-  const { mediaRegenerate, sequence, scales } = FACTORY
-
-  if (!mediaRegenerate) {
-    applySequenceGlobalVars(CSS_VARS, FACTORY, options)
-  }
-
-  for (const key in sequence) {
-    const item = sequence[key]
-
-    const value = (FACTORY.type === TIMING.type
-      ? sequence[key].val
-      : scales[key]
-    ) + unit
-
-    if (!mediaRegenerate) {
-      CSS_VARS[item.variable + '_default'] = value
-      CSS_VARS[item.variable] = item.scalingVariable
-      continue
-    }
-
-    if (options.useDefault === false) {
-      CSS_VARS[item.variable] = value
-    } else {
-      CSS_VARS[item.variable + '_default'] = value
-      CSS_VARS[item.variable] = `var(${item.variable + '_default'})`
-    }
-  }
-}
-
-export const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
-  const CONFIG = getActiveConfig()
-  const { unit: UNIT, media: MEDIA, cssVars: CSS_VARS } = CONFIG
-
-  const mediaName = media.slice(1)
-
-  const mediaConfig = FACTORY[media]
-  const rawMediaUnit = mediaConfig.unit || FACTORY.unit || UNIT.default
-  const unit = VIEWPORT_UNITS.has(rawMediaUnit) ? 'rem' : rawMediaUnit
-  const { mediaRegenerate } = FACTORY
-  const { sequence, scales } = mediaConfig
-
-  const query = MEDIA[mediaName]
-  if (!query && CONFIG.verbose) console.warn('Can\'t find media query ', query)
-
-  // if mediaRegenerate is not applied ratio and and sequence sizes
-  // will be applied using CSS vars
-  if (!mediaRegenerate) {
-    let underMediaQuery = CSS_VARS[`@media ${query}`]
-    if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
-    applySequenceGlobalVars(underMediaQuery, mediaConfig, options)
-
-    // If unit changed, override token vars with new unit values
-    const parentUnit = FACTORY.unit || UNIT.default
-    if (unit !== parentUnit && sequence) {
-      for (const key in sequence) {
-        const item = sequence[key]
-        const value = scales[key] + unit
-        underMediaQuery[item.variable + '_default'] = value
-        underMediaQuery[item.variable] = value
-      }
-    }
-    return
-  }
-
-  for (const key in sequence) {
-    const item = sequence[key]
-
-    const value = (isScalingUnit(unit)
-      ? scales[key]
-      : sequence[key].val
-    ) + unit
-
-    if (!query && CONFIG.verbose) console.warn('Can\'t find query ', query)
-
-    let underMediaQuery = CSS_VARS[`@media ${query}`]
-    if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
-
-    underMediaQuery[item.variable] = `var(${item.variable + '_' + mediaName})`
-    CSS_VARS[item.variable + '_' + mediaName] = value
-  }
-}