tailwindcss Architecture Docs
Home / Function/ migratePostCSSConfig() — tailwindcss Function Reference

migratePostCSSConfig() — tailwindcss Function Reference

Architecture documentation for the migratePostCSSConfig() function in migrate-postcss.ts from the tailwindcss codebase.

Function typescript MigrationSuite ConfigMigration calls 9 called by 1

Entity Profile

Dependency Diagram

graph TD
  5987acc9_de8e_d765_ba48_301e64c09fab["migratePostCSSConfig()"]
  c1db9de2_3654_d42b_b9f2_1c5a0ccbd307["run()"]
  c1db9de2_3654_d42b_b9f2_1c5a0ccbd307 -->|calls| 5987acc9_de8e_d765_ba48_301e64c09fab
  46fb24f9_3ef7_15dd_30f0_ee1b29413a08["detectJSConfigPath()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| 46fb24f9_3ef7_15dd_30f0_ee1b29413a08
  4b19c8da_6fad_12c6_ffff_b88c922f8406["migratePostCSSJSConfig()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| 4b19c8da_6fad_12c6_ffff_b88c922f8406
  0ccb260e_2714_f920_2a7e_d2bdd00bcf77["migratePostCSSJsonConfig()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| 0ccb260e_2714_f920_2a7e_d2bdd00bcf77
  6918fe6e_24ac_7314_4d6b_8509e0034a54["detectJSONConfigPath()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| 6918fe6e_24ac_7314_4d6b_8509e0034a54
  1109e3d3_2f0e_658d_04f7_09e68535d07b["info()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| 1109e3d3_2f0e_658d_04f7_09e68535d07b
  845754ab_207c_0988_5948_8599387b64dc["pkg()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| 845754ab_207c_0988_5948_8599387b64dc
  bb8f2b95_65ee_f51b_9ea7_6659657e7e6b["success()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| bb8f2b95_65ee_f51b_9ea7_6659657e7e6b
  f0667321_097b_1dca_a21c_a0c318a6236a["highlight()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| f0667321_097b_1dca_a21c_a0c318a6236a
  a4d70660_306b_669c_4b1c_828588c6371c["relative()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| a4d70660_306b_669c_4b1c_828588c6371c
  style 5987acc9_de8e_d765_ba48_301e64c09fab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts lines 19–131

export async function migratePostCSSConfig(base: string) {
  let ranMigration = false
  let didMigrate = false
  let didAddPostcssClient = false
  let didRemoveAutoprefixer = false
  let didRemovePostCSSImport = false

  let packageJsonPath = path.resolve(base, 'package.json')
  let packageJson
  try {
    packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf-8'))
  } catch {}

  // Priority 1: Handle JS config files
  let jsConfigPath = await detectJSConfigPath(base)
  if (jsConfigPath) {
    let result = await migratePostCSSJSConfig(jsConfigPath)
    ranMigration = true

    if (result) {
      didMigrate = true
      didAddPostcssClient = result.didAddPostcssClient
      didRemoveAutoprefixer = result.didRemoveAutoprefixer
      didRemovePostCSSImport = result.didRemovePostCSSImport
    }
  }

  // Priority 2: Handle package.json config
  if (!ranMigration) {
    if (packageJson && 'postcss' in packageJson) {
      let result = await migratePostCSSJsonConfig(packageJson.postcss)
      ranMigration = true

      if (result) {
        await fs.writeFile(
          packageJsonPath,
          JSON.stringify({ ...packageJson, postcss: result?.json }, null, 2),
        )

        didMigrate = true
        didAddPostcssClient = result.didAddPostcssClient
        didRemoveAutoprefixer = result.didRemoveAutoprefixer
        didRemovePostCSSImport = result.didRemovePostCSSImport
      }
    }
  }

  // Priority 3: JSON based postcss config files
  if (!ranMigration) {
    let jsonConfigPath = await detectJSONConfigPath(base)
    let jsonConfig: null | any = null
    if (jsonConfigPath) {
      try {
        jsonConfig = JSON.parse(await fs.readFile(jsonConfigPath, 'utf-8'))
      } catch {}
      if (jsonConfig) {
        let result = await migratePostCSSJsonConfig(jsonConfig)
        ranMigration = true

        if (result) {
          await fs.writeFile(jsonConfigPath, JSON.stringify(result.json, null, 2))

          didMigrate = true
          didAddPostcssClient = result.didAddPostcssClient
          didRemoveAutoprefixer = result.didRemoveAutoprefixer
          didRemovePostCSSImport = result.didRemovePostCSSImport
        }
      }
    }
  }

  if (!ranMigration) {
    info('No PostCSS config found, skipping migration.', {
      prefix: '↳ ',
    })
    return
  }

  if (didAddPostcssClient) {
    let location = Object.hasOwn(packageJson?.dependencies ?? {}, 'tailwindcss')
      ? ('dependencies' as const)
      : Object.hasOwn(packageJson?.devDependencies ?? {}, 'tailwindcss')
        ? ('devDependencies' as const)
        : null

    if (location !== null) {
      try {
        await pkg(base).add(['@tailwindcss/postcss@latest'], location)
        success(`Installed package: ${highlight('@tailwindcss/postcss')}`, { prefix: '↳ ' })
      } catch {}
    }
  }

  if (didRemoveAutoprefixer) {
    try {
      await pkg(base).remove(['autoprefixer'])
      success(`Removed package: ${highlight('autoprefixer')}`, { prefix: '↳ ' })
    } catch {}
  }

  if (didRemovePostCSSImport) {
    try {
      await pkg(base).remove(['postcss-import'])
      success(`Removed package: ${highlight('postcss-import')}`, { prefix: '↳ ' })
    } catch {}
  }

  if (didMigrate && jsConfigPath) {
    success(`Migrated PostCSS configuration: ${highlight(relative(jsConfigPath, base))}`, {
      prefix: '↳ ',
    })
  }
}

Domain

Subdomains

Calls

Called By

Source

Frequently Asked Questions

What does migratePostCSSConfig() do?
migratePostCSSConfig() is a function in the tailwindcss codebase.
What does migratePostCSSConfig() call?
migratePostCSSConfig() calls 9 function(s): detectJSConfigPath, detectJSONConfigPath, highlight, info, migratePostCSSJSConfig, migratePostCSSJsonConfig, pkg, relative, and 1 more.
What calls migratePostCSSConfig()?
migratePostCSSConfig() is called by 1 function(s): run.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free