@symbo.ls/scratch 3.2.3 → 3.2.8

package/src/transforms/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isNull, isString, isObject, isUndefined } from '@domql/utils'
+import { isString, isObject, exec } from '@domql/utils'
 import { getActiveConfig } from '../factory'
 import {
   getSpacingByKey,
@@ -9,134 +9,251 @@ import {
   getMediaColor,
   getTimingByKey,
   getTimingFunction,
-  getSpacingBasedOnRatio
+  getSpacingBasedOnRatio,
+  checkIfBoxSize,
+  splitSpacedValue
 } from '../system'
+import {
+  getFnPrefixAndValue,
+  isResolvedColor,
+  isCSSVar,
+  CSS_NATIVE_COLOR_REGEX,
+  splitTopLevelCommas,
+  parseColorToken
+} from '../utils'
+
+const BORDER_STYLES = new Set([
+  'none', 'hidden', 'dotted', 'dashed', 'solid', 'double',
+  'groove', 'ridge', 'inset', 'outset', 'initial'
+])
+
+const GRADIENT_KEYWORDS = new Set([
+  'to', 'top', 'bottom', 'left', 'right', 'center', 'at',
+  'circle', 'ellipse', 'closest-side', 'farthest-side',
+  'closest-corner', 'farthest-corner'
+])
+const isBorderStyle = (str) => BORDER_STYLES.has(str)
+
+export const transformBorder = (border) => {
+  const str = border + ''
+
+  // CSS passthrough: native CSS color syntax
+  if (CSS_NATIVE_COLOR_REGEX.test(str)) return str
+
+  // Simple CSS keywords
+  const trimmed = str.trim()
+  if (trimmed === 'none' || trimmed === '0' || trimmed === 'initial' || trimmed === 'inherit' || trimmed === 'unset') return str
 
-const isBorderStyle = str => [
-  'none',
-  'hidden',
-  'dotted',
-  'dashed',
-  'solid',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset',
-  'initial'
-].some(v => str.includes(v))
-
-export const transformBorder = border => {
-  const arr = border.split(', ')
-  return arr.map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    else if (isBorderStyle(v)) return v || 'solid'
-    else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
-    else if (getColor(v).length > 2) return getColor(v)
-    return getSpacingByKey(v, 'border').border
-  }).join(' ')
+  // Space-separated tokens (CSS-like syntax)
+  const tokens = str.split(/\s+/)
+
+  return tokens
+    .map((v) => {
+      v = v.trim()
+      if (!v) return ''
+      if (isCSSVar(v)) return `var(${v})`
+      if (isBorderStyle(v)) return v
+      if (/^\d/.test(v) || v === '0') return v
+      // Try color resolution
+      const color = getColor(v)
+      if (isResolvedColor(color)) return color
+      // Try spacing key
+      const spacing = getSpacingByKey(v, 'border')
+      if (spacing && spacing.border) return spacing.border
+      return v
+    })
+    .join(' ')
 }
 
-export const transformTextStroke = stroke => {
-  return stroke.split(', ').map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
-    return v
-  }).join(' ')
+export const transformTextStroke = (stroke) => {
+  // CSS passthrough
+  if (CSS_NATIVE_COLOR_REGEX.test(stroke)) return stroke
+
+  return stroke
+    .split(/\s+/)
+    .map((v) => {
+      v = v.trim()
+      if (!v) return ''
+      if (isCSSVar(v)) return `var(${v})`
+      if (/^\d/.test(v) || v.includes('px') || v === '0') return v
+      const color = getColor(v)
+      if (isResolvedColor(color)) return color
+      return v
+    })
+    .join(' ')
 }
 
 export const transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
 
-export const transformBoxShadow = (shadows, globalTheme) => shadows.split('|').map(shadow => {
-  return shadow.split(',').map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (getColor(v).length > 2) {
-      const color = getMediaColor(v, globalTheme)
-      if (isObject(color)) return Object.values(color).filter(v => v.includes(': ' + globalTheme))[0]
-      return color
-    }
-    if (v.includes('px') || v.slice(-2) === 'em') return v
-    const arr = v.split(' ')
-    if (!arr.length) return v
-    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
-  }).join(' ')
-}).join(',')
+export const transformBoxShadow = (shadows, globalTheme) => {
+  // CSS passthrough: native CSS color syntax
+  if (CSS_NATIVE_COLOR_REGEX.test(shadows)) return shadows
+
+  // Split multiple shadows by commas (CSS standard), respecting parentheses
+  return splitTopLevelCommas(shadows)
+    .map((shadow) => {
+      shadow = shadow.trim()
+      if (!shadow) return ''
+
+      // Each shadow: space-separated tokens
+      return shadow.split(/\s+/)
+        .map((v) => {
+          v = v.trim()
+          if (!v) return ''
+          if (isCSSVar(v)) return `var(${v})`
+          if (v === 'inset' || v === 'none') return v
+
+          // Try color resolution
+          const color = getColor(v)
+          if (isResolvedColor(color)) {
+            const mediaColor = getMediaColor(v, globalTheme)
+            if (isObject(mediaColor))
+              return Object.values(mediaColor).filter((c) =>
+                c.includes(': ' + globalTheme)
+              )[0]
+            return mediaColor
+          }
+
+          // CSS unit values
+          if (/^\d/.test(v) || v === '0' || v.includes('px') || v.slice(-2) === 'em') return v
+
+          // Spacing key
+          const spacing = getSpacingByKey(v, 'shadow')
+          if (spacing && spacing.shadow) return spacing.shadow
+
+          return v
+        })
+        .join(' ')
+    })
+    .join(', ')
+}
+
+/**
+ * Resolve Symbols color tokens inside a CSS gradient string.
+ * e.g. 'linear-gradient(to bottom, white.97 65%, white.0 100%)'
+ * →    'linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 65%, rgba(255, 255, 255, 0.0) 100%)'
+ */
+export const resolveColorsInGradient = (gradient, globalTheme) => {
+  // Find the opening paren after the gradient type
+  const parenStart = gradient.indexOf('(')
+  if (parenStart === -1) return gradient
+
+  const prefix = gradient.slice(0, parenStart + 1)
+  const inner = gradient.slice(parenStart + 1, gradient.lastIndexOf(')'))
+  const suffix = ')'
+
+  // Split by top-level commas (respects nested rgba() etc.)
+  const segments = splitTopLevelCommas(inner)
+
+  const resolved = segments.map((segment) => {
+    segment = segment.trim()
+    // Split segment into space-separated tokens
+    const tokens = segment.split(/\s+/)
+
+    return tokens.map((token) => {
+      if (!token) return token
+      // Skip CSS values: percentages, degrees, direction keywords, native colors
+      if (/^\d/.test(token) || token === '0') return token
+      if (GRADIENT_KEYWORDS.has(token)) return token
+      if (token === 'transparent') return token
+      if (CSS_NATIVE_COLOR_REGEX.test(token)) return token
+
+      // Try to resolve as a Symbols color token
+      const color = getColor(token)
+      if (isResolvedColor(color)) return color
+
+      return token
+    }).join(' ')
+  })
+
+  return prefix + resolved.join(', ') + suffix
+}
 
 export const transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG = getActiveConfig()
-  return backgroundImage.split(', ').map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.includes('url') || v.includes('gradient')) return v
-    else if (CONFIG.GRADIENT[backgroundImage]) {
-      return {
-        backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG.globalTheme)
-      }
-    } else if (v.includes('/') || v.startsWith('http') || v.includes('.')) return `url(${v})`
-    return v
-  }).join(' ')
+  return backgroundImage
+    .split(', ')
+    .map((v) => {
+      if (isCSSVar(v)) return `var(${v})`
+      if (v.includes('url')) return v
+      if (v.includes('gradient')) return resolveColorsInGradient(v, globalTheme)
+      else if (CONFIG.GRADIENT[backgroundImage]) {
+        return {
+          backgroundImage: getMediaColor(
+            backgroundImage,
+            globalTheme || CONFIG.globalTheme
+          )
+        }
+      } else if (v.includes('/') || v.startsWith('http') || (v.includes('.') && !parseColorToken(v)))
+        return `url(${v})`
+      return v
+    })
+    .join(' ')
 }
 
-export const transfromGap = gap => isString(gap) && (
-  gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
-)
+export const transfromGap = (gap) =>
+  isString(gap) &&
+  gap
+    .split(' ')
+    .map((v) => getSpacingByKey(v, 'gap').gap)
+    .join(' ')
 
-export const transformTransition = transition => {
+export const transformTransition = (transition) => {
   const arr = transition.split(' ')
 
   if (!arr.length) return transition
 
-  return arr.map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.length < 3 || v.includes('ms')) {
-      const mapWithSequence = getTimingByKey(v)
-      return mapWithSequence.timing || v
-    }
-    if (getTimingFunction(v)) return getTimingFunction(v)
-    return v
-  }).join(' ')
+  return arr
+    .map((v) => {
+      if (isCSSVar(v)) return `var(${v})`
+      if (v.length < 3 || v.includes('ms')) {
+        const mapWithSequence = getTimingByKey(v)
+        return mapWithSequence.timing || v
+      }
+      if (getTimingFunction(v)) return getTimingFunction(v)
+      return v
+    })
+    .join(' ')
 }
 
 export const transformDuration = (duration, props, propertyName) => {
   if (!isString(duration)) return
-  return duration.split(',').map(v => getTimingByKey(v).timing || v).join(',')
+  return duration
+    .split(',')
+    .map((v) => getTimingByKey(v).timing || v)
+    .join(',')
 }
 
-export const splitTransition = transition => {
+export const splitTransition = (transition) => {
   const arr = transition.split(',')
   if (!arr.length) return
   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]
+export function transformSize(propertyName, val, props = {}, opts = {}) {
+  let value = exec.call(this, val || props[propertyName])
 
-  if (isUndefined(value) && isNull(value)) return
+  if (value === undefined || value === null) return
 
-  const shouldScaleBoxSize = props.scaleBoxSize
-  const isBoxSize = checkIfBoxSize(propertyName)
+  let fnPrefix
+  if (isString(value)) {
+    // has function prefix
+    if (value.includes('(')) {
+      const fnArr = getFnPrefixAndValue(value)
+      fnPrefix = fnArr[0]
+      value = fnArr[1]
+    }
 
-  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(' ')
+    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, val = null, props) => {

package/src/utils/color.js

@@ -168,6 +168,85 @@ export const opacify = (color, opacity) => {
   return `rgba(${arr})`
 }
 
+// Check if value is a CSS custom property reference (starts with --)
+export const isCSSVar = (v) => v.charCodeAt(0) === 45 && v.charCodeAt(1) === 45
+
+// Regex for CSS native color values - signals passthrough
+export const CSS_NATIVE_COLOR_REGEX = /(?:rgba?\(|hsla?\(|#[0-9a-fA-F]{3,8}\b)/
+
+// Regex for Symbols color token: colorName[.opacity][+/-/=tone]
+// +N or -N = relative shade, =N = absolute lightness percentage
+const COLOR_TOKEN_REGEX = /^([a-zA-Z]\w*)(?:\.(\d+))?(?:([+-]\d+|=\d+))?$/
+
+/**
+ * Parse a color token string into its components.
+ * Returns { name, alpha, tone } for valid tokens,
+ * { passthrough: value } for CSS native values,
+ * or null for non-color tokens (e.g. '10px', '0')
+ *
+ * Tone prefixes:
+ *   +N  relative shade (add N to RGB)
+ *   -N  relative shade (subtract N from RGB)
+ *   =N  absolute lightness (set HSL lightness to N%)
+ */
+export const parseColorToken = (value) => {
+  if (!isString(value)) return null
+
+  // CSS native color passthrough
+  if (CSS_NATIVE_COLOR_REGEX.test(value)) return { passthrough: value }
+
+  // CSS var passthrough
+  if (isCSSVar(value)) return { cssVar: value }
+
+  const match = value.match(COLOR_TOKEN_REGEX)
+  if (!match) return null
+
+  const [, name, alphaDigits, rawTone] = match
+  const alpha = alphaDigits !== undefined ? `0.${alphaDigits}` : undefined
+  // Strip '=' prefix for absolute tones — getRgbTone handles unsigned values as absolute
+  const tone = rawTone && rawTone[0] === '=' ? rawTone.slice(1) : rawTone
+
+  return { name, alpha, tone }
+}
+
+/**
+ * Check if a getColor() result is a resolved CSS color
+ * (as opposed to the original unresolved value being returned)
+ */
+export const isResolvedColor = (result) => {
+  return isString(result) && (
+    result.includes('rgb') ||
+    result.includes('var(') ||
+    result.includes('#')
+  )
+}
+
+/**
+ * Split a string by commas, respecting parenthesized groups.
+ * e.g. 'rgba(0,0,0,0.1), white.5 0 A' → ['rgba(0,0,0,0.1)', ' white.5 0 A']
+ */
+export const splitTopLevelCommas = (value) => {
+  const result = []
+  let current = ''
+  let depth = 0
+
+  for (const char of value) {
+    if (char === '(') depth += 1
+    else if (char === ')' && depth > 0) depth -= 1
+
+    if (char === ',' && depth === 0) {
+      result.push(current)
+      current = ''
+      continue
+    }
+
+    current += char
+  }
+
+  if (current.length || !result.length) result.push(current)
+  return result
+}
+
 export const getRgbTone = (rgb, tone) => {
   if (isString(rgb) && rgb.includes('rgb'))
     rgb = colorStringToRgbaArray(rgb).join(', ')

package/src/utils/font.js

@@ -7,41 +7,81 @@ export const getDefaultOrFirstKey = (LIBRARY, key) => {
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value
 }
 
-export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
+export const getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split('.').pop().trim()
+  if (['woff2', 'woff', 'ttf', 'otf', 'eot'].includes(ext)) return ext
+  return null
+}
+
+export const isGoogleFontsUrl = (url) =>
+  url &&
+  (url.includes('fonts.googleapis.com') || url.includes('fonts.gstatic.com'))
 
-export const setInCustomFontMedia = str => `@font-face { ${str} }`
+export const setFontImport = (url) => `@import url('${url}');`
 
-export const setCustomFont = (name, url, weight) => `
+export const setInCustomFontMedia = (str) => `@font-face { ${str} }`
+
+export const setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url)
+  const formatStr = format ? ` format('${format}')` : ''
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`
+  font-style: normal;${
+    weight
+      ? `
+  font-weight: ${weight};`
+      : ''
+  }${
+    options.fontStretch
+      ? `
+  font-stretch: ${options.fontStretch};`
+      : ''
+  }${
+    options.fontDisplay
+      ? `
+  font-display: ${options.fontDisplay};`
+      : ''
+  }
+  src: url('${url}')${formatStr};`
+}
 
-export const setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+export const setCustomFontMedia = (
+  name,
+  url,
+  weight,
+  options
+) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`
-// src: url('${url}') format('${getFontFormat(url)}');
 
 export const getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights)
-  return keys.map(key => {
+  return keys.map((key) => {
     const { url, fontWeight } = weights[key]
     return setCustomFont(name, url, fontWeight)
   })
 }
 
-export const getFontFace = LIBRARY => {
+export const getFontFace = (LIBRARY) => {
   const keys = Object.keys(LIBRARY)
-  return keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
+  return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value))
 }
 
 export const getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url)
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || 'swap'
+    })
+  }
   const isArr = weights[0]
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia)
   return setCustomFontMedia(name, weights.url)
 }
 
-export const getFontFaceString = LIBRARY => {
+export const getFontFaceString = (LIBRARY) => {
   const keys = Object.keys(LIBRARY)
-  return keys.map(key => getFontFaceEachString(key, LIBRARY[key].value))
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value))
 }