css-to-design-tokens.js

function cssVarsToDesignTokens(input) {
  const lines = input.split('\n')
  const result = {}
  for (let line of lines) {
    line = line.trim()
    if (!line || line.startsWith('//') || line.startsWith('/*')) continue
    if (!line.startsWith('--')) continue
    const [rawKey, rawValue] = line.split(':')
    if (!rawValue) continue
    const key = rawKey.replace(/^--/, '').trim()
    let value = rawValue.replace(/;$/, '').trim()
    // If value is a var reference, extract the referenced variable
    if (value.startsWith('var(')) {
      value = value.replace(/^var\(--/, '').replace(/\)$/, '').trim()
      value = `{${value}}` // Optional: wrap in curly braces to indicate reference
    }
    // Guess type
    let $type = 'other'
    if (value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i)) $type = 'color'
    if (value.match(/px$/)) $type = 'dimension'
    result[key] = { value, $type }
  }
  return { color: Object.fromEntries(Object.entries(result).filter(([k]) => k.startsWith('color-') || k.startsWith('color_'))) }
}