migrateThemeToVar() — tailwindcss Function Reference

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

Function typescript CommandLineInterface Codemods calls 1 called by 2

Entity Profile

CommandLineInterface→ Codemods→ migrateThemeToVar() — tailwindcss Function Reference

Dependency Diagram

graph TD
  a9a5216f_0dd1_0c09_6894_e34986eaf2a5["migrateThemeToVar()"]
  792ad9e6_cee3_8f32_a327_f6c1d9621ae7["migrate-theme-to-var.ts"]
  a9a5216f_0dd1_0c09_6894_e34986eaf2a5 -->|defined in| 792ad9e6_cee3_8f32_a327_f6c1d9621ae7
  74585675_6a09_6523_3821_3c9717327602["migrate()"]
  74585675_6a09_6523_3821_3c9717327602 -->|calls| a9a5216f_0dd1_0c09_6894_e34986eaf2a5
  1be562b7_fe23_7e22_03ec_31b3d101e5e5["migrateContents()"]
  1be562b7_fe23_7e22_03ec_31b3d101e5e5 -->|calls| a9a5216f_0dd1_0c09_6894_e34986eaf2a5
  f1c7fb37_4a69_f6f5_b7f4_9f3d8b534c40["createConverter()"]
  a9a5216f_0dd1_0c09_6894_e34986eaf2a5 -->|calls| f1c7fb37_4a69_f6f5_b7f4_9f3d8b534c40
  style a9a5216f_0dd1_0c09_6894_e34986eaf2a5 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
        }
      })
    },
  }
}