migratePostCSSJSConfig() — tailwindcss Function Reference

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

Function typescript MigrationSuite ConfigMigration calls 3 called by 1

Entity Profile

MigrationSuite→ ConfigMigration→ migratePostCSSJSConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  4b19c8da_6fad_12c6_ffff_b88c922f8406["migratePostCSSJSConfig()"]
  5987acc9_de8e_d765_ba48_301e64c09fab["migratePostCSSConfig()"]
  5987acc9_de8e_d765_ba48_301e64c09fab -->|calls| 4b19c8da_6fad_12c6_ffff_b88c922f8406
  1109e3d3_2f0e_658d_04f7_09e68535d07b["info()"]
  4b19c8da_6fad_12c6_ffff_b88c922f8406 -->|calls| 1109e3d3_2f0e_658d_04f7_09e68535d07b
  0991b7a9_2dc6_a407_732e_af0095c03777["isSimplePostCSSConfig()"]
  4b19c8da_6fad_12c6_ffff_b88c922f8406 -->|calls| 0991b7a9_2dc6_a407_732e_af0095c03777
  aacd1374_0eb0_912c_01bc_798fd3cc8239["warn()"]
  4b19c8da_6fad_12c6_ffff_b88c922f8406 -->|calls| aacd1374_0eb0_912c_01bc_798fd3cc8239
  style 4b19c8da_6fad_12c6_ffff_b88c922f8406 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts lines 133–212

async function migratePostCSSJSConfig(configPath: string): Promise<{
  didAddPostcssClient: boolean
  didRemoveAutoprefixer: boolean
  didRemovePostCSSImport: boolean
} | null> {
  function isTailwindCSSPlugin(line: string) {
    return /['"]?tailwindcss['"]?\: ?\{\}/.test(line)
  }
  function isPostCSSImportPlugin(line: string) {
    return /['"]?postcss-import['"]?\: ?\{\}/.test(line)
  }
  function isAutoprefixerPlugin(line: string) {
    return /['"]?autoprefixer['"]?\: ?\{\}/.test(line)
  }
  function isTailwindCSSNestingPlugin(line: string) {
    return /['"]tailwindcss\/nesting['"]\: ?(\{\}|['"]postcss-nesting['"])/.test(line)
  }

  info('Migrating PostCSS configuration…')

  let isSimpleConfig = await isSimplePostCSSConfig(configPath)
  if (!isSimpleConfig) {
    warn('The PostCSS config contains dynamic JavaScript and can not be automatically migrated.', {
      prefix: '↳ ',
    })
    return null
  }

  let didAddPostcssClient = false
  let didRemoveAutoprefixer = false
  let didRemovePostCSSImport = false

  let content = await fs.readFile(configPath, 'utf-8')
  let lines = content.split('\n')
  let newLines: string[] = []
  for (let i = 0; i < lines.length; i++) {
    let line = lines[i]

    if (isTailwindCSSPlugin(line)) {
      didAddPostcssClient = true
      newLines.push(line.replace('tailwindcss:', `'@tailwindcss/postcss':`))
    } else if (isAutoprefixerPlugin(line)) {
      didRemoveAutoprefixer = true
    } else if (isPostCSSImportPlugin(line)) {
      // Check that there are no unknown plugins before the tailwindcss plugin
      let hasUnknownPluginsBeforeTailwindCSS = false
      for (let j = i + 1; j < lines.length; j++) {
        let nextLine = lines[j]
        if (isTailwindCSSPlugin(nextLine)) {
          break
        }
        if (isTailwindCSSNestingPlugin(nextLine)) {
          continue
        }
        hasUnknownPluginsBeforeTailwindCSS = true
        break
      }

      if (!hasUnknownPluginsBeforeTailwindCSS) {
        didRemovePostCSSImport = true
      } else {
        newLines.push(line)
      }
    } else if (isTailwindCSSNestingPlugin(line)) {
      // Check if the following rule is the tailwindcss plugin
      let nextLine = lines[i + 1]
      if (isTailwindCSSPlugin(nextLine)) {
        // Since this plugin is bundled with `tailwindcss`, we don't need to
        // clean up a package when deleting this line.
      } else {
        newLines.push(line)
      }
    } else {
      newLines.push(line)
    }
  }
  await fs.writeFile(configPath, newLines.join('\n'))

  return { didAddPostcssClient, didRemoveAutoprefixer, didRemovePostCSSImport }
}