migrateThemeToVar() — tailwindcss Function Reference

Architecture documentation for the migrateThemeToVar() function in migrate-theme-to-var.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit Codemods calls 1 called by 2

Entity Profile

UpgradeToolkit→ Codemods→ migrateThemeToVar() — tailwindcss Function Reference

Dependency Diagram

graph TD
  36a33041_3344_f866_1e23_f035f7e8756f["migrateThemeToVar()"]
  c550fc21_73bc_6946_0379_6439db07d05a["migrate-theme-to-var.ts"]
  36a33041_3344_f866_1e23_f035f7e8756f -->|defined in| c550fc21_73bc_6946_0379_6439db07d05a
  345ce337_4027_ef1a_0d01_935066809de4["migrate()"]
  345ce337_4027_ef1a_0d01_935066809de4 -->|calls| 36a33041_3344_f866_1e23_f035f7e8756f
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e["migrateContents()"]
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e -->|calls| 36a33041_3344_f866_1e23_f035f7e8756f
  dc9585e4_0c18_e5de_1302_9b707f3ab6ed["createConverter()"]
  36a33041_3344_f866_1e23_f035f7e8756f -->|calls| dc9585e4_0c18_e5de_1302_9b707f3ab6ed
  style 36a33041_3344_f866_1e23_f035f7e8756f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-theme-to-var.ts lines 5–34

export function migrateThemeToVar({
  designSystem,
}: {
  designSystem?: DesignSystem | null
} = {}): Plugin {
  return {
    postcssPlugin: '@tailwindcss/upgrade/migrate-theme-to-var',
    OnceExit(root) {
      if (!designSystem) return
      let convert = createConverter(designSystem, { prettyPrint: true })

      root.walkDecls((decl) => {
        let [newValue] = convert(decl.value)
        decl.value = newValue
      })

      root.walkAtRules((atRule) => {
        if (
          atRule.name === 'media' ||
          atRule.name === 'custom-media' ||
          atRule.name === 'container' ||
          atRule.name === 'supports'
        ) {
          let [newValue] = convert(atRule.params, Convert.MigrateThemeOnly)
          atRule.params = newValue
        }
      })
    },
  }
}