injectVar() — tailwindcss Function Reference

Architecture documentation for the injectVar() function in migrate-automatic-var-injection.ts from the tailwindcss codebase.

Function typescript OxideCore Extractor calls 1 called by 2

Entity Profile

OxideCore→ Extractor→ injectVar() — tailwindcss Function Reference

Dependency Diagram

graph TD
  529f2fd2_4c56_a018_3a52_f4d34e36e476["injectVar()"]
  0d34c838_b3bc_b388_6b0d_17fe24312e5f["migrateAutomaticVarInjection()"]
  0d34c838_b3bc_b388_6b0d_17fe24312e5f -->|calls| 529f2fd2_4c56_a018_3a52_f4d34e36e476
  8bcd32c5_cfda_22a4_547e_0b720e631669["injectVarIntoVariant()"]
  8bcd32c5_cfda_22a4_547e_0b720e631669 -->|calls| 529f2fd2_4c56_a018_3a52_f4d34e36e476
  e5eb2faf_45a2_ac47_3404_8bd4e7eb6817["parse()"]
  529f2fd2_4c56_a018_3a52_f4d34e36e476 -->|calls| e5eb2faf_45a2_ac47_3404_8bd4e7eb6817
  style 529f2fd2_4c56_a018_3a52_f4d34e36e476 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

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 }
}