migratePostCSSJSConfig() — tailwindcss Function Reference

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

Function typescript CommandLineInterface Codemods calls 3 called by 1

Entity Profile

CommandLineInterface→ Codemods→ migratePostCSSJSConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  f9e8808d_82e8_403c_7491_74c3ba5e23be["migratePostCSSJSConfig()"]
  9434c276_afef_dc51_650b_a8b408f077fc["migrate-postcss.ts"]
  f9e8808d_82e8_403c_7491_74c3ba5e23be -->|defined in| 9434c276_afef_dc51_650b_a8b408f077fc
  0cb85618_1b33_b9dc_ae2b_1bc3e6bd6069["migratePostCSSConfig()"]
  0cb85618_1b33_b9dc_ae2b_1bc3e6bd6069 -->|calls| f9e8808d_82e8_403c_7491_74c3ba5e23be
  8e778e08_76c6_9ee6_899b_7331b37b18ea["info()"]
  f9e8808d_82e8_403c_7491_74c3ba5e23be -->|calls| 8e778e08_76c6_9ee6_899b_7331b37b18ea
  6df72484_177e_78b7_6f88_c63e2715d6fa["isSimplePostCSSConfig()"]
  f9e8808d_82e8_403c_7491_74c3ba5e23be -->|calls| 6df72484_177e_78b7_6f88_c63e2715d6fa
  f01ffd27_4737_8e3c_147a_bc30c19a4b4d["warn()"]
  f9e8808d_82e8_403c_7491_74c3ba5e23be -->|calls| f01ffd27_4737_8e3c_147a_bc30c19a4b4d
  style f9e8808d_82e8_403c_7491_74c3ba5e23be 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 }
}