Home / File/ migrate-simple-legacy-classes.ts — tailwindcss Source File

migrate-simple-legacy-classes.ts — tailwindcss Source File

Architecture documentation for migrate-simple-legacy-classes.ts, a typescript file in the tailwindcss codebase. 3 imports, 2 dependents.

File typescript UpgradeToolkit Codemods 3 imports 2 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  a410c111_cb5e_0405_07a0_44bdb02ec55d["migrate-simple-legacy-classes.ts"]
  af1a6ece_0432_a556_fd63_8cb4a91f12ad["plugin-api.ts"]
  a410c111_cb5e_0405_07a0_44bdb02ec55d --> af1a6ece_0432_a556_fd63_8cb4a91f12ad
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a["design-system.ts"]
  a410c111_cb5e_0405_07a0_44bdb02ec55d --> 7fd72d4c_e95c_d849_1002_1e1c9d8aca1a
  fff09679_e13c_392d_23bb_cebc04ddb008["version.ts"]
  a410c111_cb5e_0405_07a0_44bdb02ec55d --> fff09679_e13c_392d_23bb_cebc04ddb008
  0deaea05_7422_6f59_4393_6fb6c20f73c6["migrate-simple-legacy-classes.test.ts"]
  0deaea05_7422_6f59_4393_6fb6c20f73c6 --> a410c111_cb5e_0405_07a0_44bdb02ec55d
  75ba60a9_2614_1c57_ad40_3663d4315f3b["migrate.ts"]
  75ba60a9_2614_1c57_ad40_3663d4315f3b --> a410c111_cb5e_0405_07a0_44bdb02ec55d
  style a410c111_cb5e_0405_07a0_44bdb02ec55d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
import * as version from '../../utils/version'

// Classes that used to exist in Tailwind CSS v3, but do not exist in Tailwind
// CSS v4 anymore.
const LEGACY_CLASS_MAP: Record<string, string> = {
  'overflow-ellipsis': 'text-ellipsis',

  'flex-grow': 'grow',
  'flex-grow-0': 'grow-0',
  'flex-shrink': 'shrink',
  'flex-shrink-0': 'shrink-0',

  'decoration-clone': 'box-decoration-clone',
  'decoration-slice': 'box-decoration-slice',

  // Since v4.1.0
  'bg-left-top': 'bg-top-left',
  'bg-left-bottom': 'bg-bottom-left',
  'bg-right-top': 'bg-top-right',
  'bg-right-bottom': 'bg-bottom-right',
  'object-left-top': 'object-top-left',
  'object-left-bottom': 'object-bottom-left',
  'object-right-top': 'object-top-right',
  'object-right-bottom': 'object-bottom-right',
}

let seenDesignSystems = new WeakSet<DesignSystem>()

export function migrateSimpleLegacyClasses(
  designSystem: DesignSystem,
  _userConfig: Config | null,
  rawCandidate: string,
): string {
  // `outline-none` in v3 has the same meaning as `outline-hidden` in v4. However,
  // `outline-none` in v4 _also_ exists but has a different meaning.
  //
  // We can only migrate `outline-none` to `outline-hidden` if we are migrating a
  // v3 project to v4.
  if (version.isMajor(3)) {
    LEGACY_CLASS_MAP['outline-none'] = 'outline-hidden'
  }

  // Prepare design system with the unknown legacy classes
  if (!seenDesignSystems.has(designSystem)) {
    for (let old in LEGACY_CLASS_MAP) {
      designSystem.utilities.static(old, () => [])
    }
    seenDesignSystems.add(designSystem)
  }

  for (let candidate of designSystem.parseCandidate(rawCandidate)) {
    if (candidate.kind === 'static' && Object.hasOwn(LEGACY_CLASS_MAP, candidate.root)) {
      return designSystem.printCandidate({
        ...candidate,
        root: LEGACY_CLASS_MAP[candidate.root as keyof typeof LEGACY_CLASS_MAP],
      })
    }
  }

  return rawCandidate
}

Subdomains

Frequently Asked Questions

What does migrate-simple-legacy-classes.ts do?
migrate-simple-legacy-classes.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the UpgradeToolkit domain, Codemods subdomain.
What functions are defined in migrate-simple-legacy-classes.ts?
migrate-simple-legacy-classes.ts defines 1 function(s): migrateSimpleLegacyClasses.
What does migrate-simple-legacy-classes.ts depend on?
migrate-simple-legacy-classes.ts imports 3 module(s): design-system.ts, plugin-api.ts, version.ts.
What files import migrate-simple-legacy-classes.ts?
migrate-simple-legacy-classes.ts is imported by 2 file(s): migrate-simple-legacy-classes.test.ts, migrate.ts.
Where is migrate-simple-legacy-classes.ts in the architecture?
migrate-simple-legacy-classes.ts is located at packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.ts (domain: UpgradeToolkit, subdomain: Codemods, directory: packages/@tailwindcss-upgrade/src/codemods/template).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free