migratePreflight() — tailwindcss Function Reference

Architecture documentation for the migratePreflight() function in migrate-preflight.ts from the tailwindcss codebase.

Function typescript OxideCore Extractor calls 5 called by 2

Entity Profile

OxideCore→ Extractor→ migratePreflight() — tailwindcss Function Reference

Dependency Diagram

graph TD
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0["migratePreflight()"]
  51773c2e_bb3d_63e0_1017_2196c25f1acb["migrate()"]
  51773c2e_bb3d_63e0_1017_2196c25f1acb -->|calls| fe1ae328_7455_13dc_ecbe_a4e848ee9ea0
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb["migrateContents()"]
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb -->|calls| fe1ae328_7455_13dc_ecbe_a4e848ee9ea0
  f8dcf272_aab9_d786_7975_56fd563c0739["keyPathToCssProperty()"]
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0 -->|calls| f8dcf272_aab9_d786_7975_56fd563c0739
  16014564_86ad_a5a3_1531_579a4693b33c["toKeyPath()"]
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0 -->|calls| 16014564_86ad_a5a3_1531_579a4693b33c
  db7731f5_f3e0_5e90_b5d1_de4eda8ce9d2["isMajor()"]
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0 -->|calls| db7731f5_f3e0_5e90_b5d1_de4eda8ce9d2
  e5eb2faf_45a2_ac47_3404_8bd4e7eb6817["parse()"]
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0 -->|calls| e5eb2faf_45a2_ac47_3404_8bd4e7eb6817
  f0fec366_dab0_6cd4_1266_ed1e249ce89a["substituteFunctionsInValue()"]
  fe1ae328_7455_13dc_ecbe_a4e848ee9ea0 -->|calls| f0fec366_dab0_6cd4_1266_ed1e249ce89a
  style fe1ae328_7455_13dc_ecbe_a4e848ee9ea0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.ts lines 35–115

export function migratePreflight({
  designSystem,
  userConfig,
}: {
  designSystem: DesignSystem | null
  userConfig?: Config | null
}): Plugin {
  // @ts-expect-error
  let defaultBorderColor = userConfig?.theme?.borderColor?.DEFAULT

  function canResolveThemeValue(path: string) {
    if (!designSystem) return false
    let variable = `--${keyPathToCssProperty(toKeyPath(path))}` as const
    return Boolean(designSystem.theme.get([variable]))
  }

  function migrate(root: Root) {
    // CSS for backwards compatibility with v3 should only injected in v3
    // projects and not v4 projects.
    if (!version.isMajor(3)) return

    let isTailwindRoot = false
    root.walkAtRules('import', (node) => {
      if (
        /['"]tailwindcss['"]/.test(node.params) ||
        /['"]tailwindcss\/preflight['"]/.test(node.params)
      ) {
        isTailwindRoot = true
        return false
      }
    })

    if (!isTailwindRoot) return

    // Figure out the compatibility CSS to inject
    let compatibilityCssString = ''
    if (defaultBorderColor !== DEFAULT_BORDER_COLOR) {
      compatibilityCssString += BORDER_COLOR_COMPATIBILITY_CSS
      compatibilityCssString += '\n\n'
    }

    compatibilityCssString = `\n@tw-bucket compatibility {\n${compatibilityCssString}\n}\n`
    let compatibilityCss = postcss.parse(compatibilityCssString)

    // Replace the `theme(…)` with v3 values if we can't resolve the theme
    // value.
    compatibilityCss.walkDecls((decl) => {
      if (decl.value.includes('theme(')) {
        decl.value = substituteFunctionsInValue(ValueParser.parse(decl.value), (path) => {
          if (canResolveThemeValue(path)) {
            return defaultBorderColor
          } else {
            if (path === 'borderColor.DEFAULT') {
              return 'var(--color-gray-200, currentcolor)'
            }
          }
          return null
        })
      }
    })

    // Cleanup `--border-color` definition in `theme(…)`
    root.walkAtRules('theme', (node) => {
      node.walkDecls('--border-color', (decl) => {
        decl.remove()
      })

      if (node.nodes?.length === 0) {
        node.remove()
      }
    })

    // Inject the compatibility CSS
    root.append(compatibilityCss)
  }

  return {
    postcssPlugin: '@tailwindcss/upgrade/migrate-preflight',
    OnceExit: migrate,
  }
}