migratePreflight() — tailwindcss Function Reference

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,
  }
}