migratePostCSSJSConfig() — tailwindcss Function Reference

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

Function typescript OxideCore PreProcessors calls 3 called by 1

Entity Profile

OxideCore→ PreProcessors→ migratePostCSSJSConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  02abfdc1_e285_188c_43c7_c63389394a0b["migratePostCSSJSConfig()"]
  32e1ecdd_6093_f556_114f_ec3d5663975f["migratePostCSSConfig()"]
  32e1ecdd_6093_f556_114f_ec3d5663975f -->|calls| 02abfdc1_e285_188c_43c7_c63389394a0b
  98289381_3219_727d_fea6_371f55963ac8["info()"]
  02abfdc1_e285_188c_43c7_c63389394a0b -->|calls| 98289381_3219_727d_fea6_371f55963ac8
  dd2eab63_56b4_787d_b31b_690166321dba["isSimplePostCSSConfig()"]
  02abfdc1_e285_188c_43c7_c63389394a0b -->|calls| dd2eab63_56b4_787d_b31b_690166321dba
  46505461_b954_71dd_b5e0_cd81860be8ee["warn()"]
  02abfdc1_e285_188c_43c7_c63389394a0b -->|calls| 46505461_b954_71dd_b5e0_cd81860be8ee
  style 02abfdc1_e285_188c_43c7_c63389394a0b 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 }
}