migratePreflight() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 5 called by 2

Entity Profile

CompilerEngine→ ModuleResolution→ migratePreflight() — tailwindcss Function Reference

Dependency Diagram

graph TD
  a3f66598_fbf6_c4e3_9350_55626482e7b1["migratePreflight()"]
  b242fd0e_6a8e_7d8b_fdb9_e04bb2e47104["migrate()"]
  b242fd0e_6a8e_7d8b_fdb9_e04bb2e47104 -->|calls| a3f66598_fbf6_c4e3_9350_55626482e7b1
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd["migrateContents()"]
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd -->|calls| a3f66598_fbf6_c4e3_9350_55626482e7b1
  971f7bc7_6ac2_a554_ba52_47038ff41b13["keyPathToCssProperty()"]
  a3f66598_fbf6_c4e3_9350_55626482e7b1 -->|calls| 971f7bc7_6ac2_a554_ba52_47038ff41b13
  f1189154_e89f_8988_3e83_53458fbcad21["toKeyPath()"]
  a3f66598_fbf6_c4e3_9350_55626482e7b1 -->|calls| f1189154_e89f_8988_3e83_53458fbcad21
  91c7b7d7_b75e_448f_492f_b7e96c0ac0c5["isMajor()"]
  a3f66598_fbf6_c4e3_9350_55626482e7b1 -->|calls| 91c7b7d7_b75e_448f_492f_b7e96c0ac0c5
  0638028e_f2f7_8e77_2f19_1bd2ce4b2d6a["parse()"]
  a3f66598_fbf6_c4e3_9350_55626482e7b1 -->|calls| 0638028e_f2f7_8e77_2f19_1bd2ce4b2d6a
  93d0cdce_24aa_be83_c138_90437551952e["substituteFunctionsInValue()"]
  a3f66598_fbf6_c4e3_9350_55626482e7b1 -->|calls| 93d0cdce_24aa_be83_c138_90437551952e
  style a3f66598_fbf6_c4e3_9350_55626482e7b1 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,
  }
}