injectVar() — tailwindcss Function Reference

Source Code

packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.ts lines 76–101

function injectVar(value: string): { value: string; didChange: boolean } {
  let didChange = false
  if (value.startsWith('--')) {
    // E.g.:
    //
    // - `--my-color` → `var(--my-color)`             Convert variable
    // - `--my-color,red` → `var(--my-color,red)`     Convert variable with fallback
    // - `--theme(color.red)` → `--theme(color.red)`  Do not convert functions
    //
    if (
      // No `(` definitely means there is no function
      !value.includes('(') ||
      // There could be a function call in the fallback value, but it cannot be
      // top-level, so we can safely check the first part
      ValueParser.parse(value)[0]?.kind !== 'function'
    ) {
      value = `var(${value})`
      didChange = true
    }
  } else if (value.startsWith(' --')) {
    value = value.slice(1)
    didChange = true
  }

  return { value, didChange }
}