migratePostCSSJSConfig() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit Codemods calls 3 called by 1

Entity Profile

UpgradeToolkit→ Codemods→ migratePostCSSJSConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  cddc9c20_5880_3c1c_34a8_c38c746645b7["migratePostCSSJSConfig()"]
  9c861556_2895_9b7c_50ec_d9aa3cfc5c68["migrate-postcss.ts"]
  cddc9c20_5880_3c1c_34a8_c38c746645b7 -->|defined in| 9c861556_2895_9b7c_50ec_d9aa3cfc5c68
  18049d5a_3e65_d6cd_49d2_32e825145fa2["migratePostCSSConfig()"]
  18049d5a_3e65_d6cd_49d2_32e825145fa2 -->|calls| cddc9c20_5880_3c1c_34a8_c38c746645b7
  f6cf39d1_9161_38f6_5e39_d0d0f34bb6a8["info()"]
  cddc9c20_5880_3c1c_34a8_c38c746645b7 -->|calls| f6cf39d1_9161_38f6_5e39_d0d0f34bb6a8
  9b92e9f3_86b4_7d10_9195_9ea04f2d8de4["isSimplePostCSSConfig()"]
  cddc9c20_5880_3c1c_34a8_c38c746645b7 -->|calls| 9b92e9f3_86b4_7d10_9195_9ea04f2d8de4
  e019b578_e34e_650f_6c6e_85cd4f4dbeb8["warn()"]
  cddc9c20_5880_3c1c_34a8_c38c746645b7 -->|calls| e019b578_e34e_650f_6c6e_85cd4f4dbeb8
  style cddc9c20_5880_3c1c_34a8_c38c746645b7 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 }
}