migrateThemeToVar() — tailwindcss Function Reference

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

Function typescript OxideCore Scanner calls 1 called by 2

Entity Profile

OxideCore→ Scanner→ migrateThemeToVar() — tailwindcss Function Reference

Dependency Diagram

graph TD
  f0ca3f14_54b1_e7ee_5976_811ab796b63a["migrateThemeToVar()"]
  52eccd67_a1a1_1568_397e_4f4e39b2a252["migrate()"]
  52eccd67_a1a1_1568_397e_4f4e39b2a252 -->|calls| f0ca3f14_54b1_e7ee_5976_811ab796b63a
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb["migrateContents()"]
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb -->|calls| f0ca3f14_54b1_e7ee_5976_811ab796b63a
  a5e6dda1_40ba_a775_d007_2d6576a30911["createConverter()"]
  f0ca3f14_54b1_e7ee_5976_811ab796b63a -->|calls| a5e6dda1_40ba_a775_d007_2d6576a30911
  style f0ca3f14_54b1_e7ee_5976_811ab796b63a 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
        }
      })
    },
  }
}