migrate-preflight.ts — tailwindcss Source File

Source Code

import dedent from 'dedent'
import postcss, { type Plugin, type Root } from 'postcss'
import { keyPathToCssProperty } from '../../../../tailwindcss/src/compat/apply-config-to-theme'
import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
import { toKeyPath } from '../../../../tailwindcss/src/utils/to-key-path'
import * as ValueParser from '../../../../tailwindcss/src/value-parser'
import { walk, WalkAction } from '../../../../tailwindcss/src/walk'
import * as version from '../../utils/version'

// Defaults in v4
const DEFAULT_BORDER_COLOR = 'currentcolor'

const css = dedent
const BORDER_COLOR_COMPATIBILITY_CSS = css`
  /*
    The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
    so we've added these compatibility styles to make sure everything still
    looks the same as it did with Tailwind CSS v3.

    If we ever want to remove these styles, we need to add an explicit border
    color utility to any element that depends on these defaults.
  */
  @layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
      border-color: theme(borderColor.DEFAULT);
    }
  }
`

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)
// ... (125 more lines)