migrateThemeToVar() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 1 called by 2

Entity Profile

CompilerEngine→ ModuleResolution→ migrateThemeToVar() — tailwindcss Function Reference

Dependency Diagram

graph TD
  b5d4b5a0_3713_0a6e_7e28_5aabce2dc697["migrateThemeToVar()"]
  c5a75dce_403f_ac99_8467_fc78fa640177["migrate()"]
  c5a75dce_403f_ac99_8467_fc78fa640177 -->|calls| b5d4b5a0_3713_0a6e_7e28_5aabce2dc697
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd["migrateContents()"]
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd -->|calls| b5d4b5a0_3713_0a6e_7e28_5aabce2dc697
  da84d4b5_fc28_e826_1855_2340e6df074e["createConverter()"]
  b5d4b5a0_3713_0a6e_7e28_5aabce2dc697 -->|calls| da84d4b5_fc28_e826_1855_2340e6df074e
  style b5d4b5a0_3713_0a6e_7e28_5aabce2dc697 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
        }
      })
    },
  }
}