injectVar() — tailwindcss Function Reference

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

Function typescript MigrationSuite TemplateMigration calls 1 called by 2

Entity Profile

MigrationSuite→ TemplateMigration→ injectVar() — tailwindcss Function Reference

Dependency Diagram

graph TD
  5a669ddb_c6e4_576f_e97a_a8046c2834d8["injectVar()"]
  39857840_c6e7_0594_122a_445c1ca9d108["migrateAutomaticVarInjection()"]
  39857840_c6e7_0594_122a_445c1ca9d108 -->|calls| 5a669ddb_c6e4_576f_e97a_a8046c2834d8
  4c50d4c9_d654_3056_42e2_ba6a553be1b2["injectVarIntoVariant()"]
  4c50d4c9_d654_3056_42e2_ba6a553be1b2 -->|calls| 5a669ddb_c6e4_576f_e97a_a8046c2834d8
  0638028e_f2f7_8e77_2f19_1bd2ce4b2d6a["parse()"]
  5a669ddb_c6e4_576f_e97a_a8046c2834d8 -->|calls| 0638028e_f2f7_8e77_2f19_1bd2ce4b2d6a
  style 5a669ddb_c6e4_576f_e97a_a8046c2834d8 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 }
}