Home / File/ migrate-variant-order.ts — tailwindcss Source File

migrate-variant-order.ts — tailwindcss Source File

Architecture documentation for migrate-variant-order.ts, a typescript file in the tailwindcss codebase. 7 imports, 2 dependents.

File typescript UpgradeToolkit Codemods 7 imports 2 dependents 6 functions

Entity Profile

Dependency Diagram

graph LR
  e3144eb9_0666_0bdb_e31d_1094b50abdd7["migrate-variant-order.ts"]
  42640952_ea63_55f1_1ff1_00816e2980ae["ast.ts"]
  e3144eb9_0666_0bdb_e31d_1094b50abdd7 --> 42640952_ea63_55f1_1ff1_00816e2980ae
  669e6a28_c71f_3c5e_9c53_915cede7da78["candidate.ts"]
  e3144eb9_0666_0bdb_e31d_1094b50abdd7 --> 669e6a28_c71f_3c5e_9c53_915cede7da78
  af1a6ece_0432_a556_fd63_8cb4a91f12ad["plugin-api.ts"]
  e3144eb9_0666_0bdb_e31d_1094b50abdd7 --> af1a6ece_0432_a556_fd63_8cb4a91f12ad
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a["design-system.ts"]
  e3144eb9_0666_0bdb_e31d_1094b50abdd7 --> 7fd72d4c_e95c_d849_1002_1e1c9d8aca1a
  d1b39b63_c9d5_6c28_0206_0ddc8b895876["walk.ts"]
  e3144eb9_0666_0bdb_e31d_1094b50abdd7 --> d1b39b63_c9d5_6c28_0206_0ddc8b895876
  ed78da58_8727_ad98_120c_61f35cea357a["walk"]
  e3144eb9_0666_0bdb_e31d_1094b50abdd7 --> ed78da58_8727_ad98_120c_61f35cea357a
  fff09679_e13c_392d_23bb_cebc04ddb008["version.ts"]
  e3144eb9_0666_0bdb_e31d_1094b50abdd7 --> fff09679_e13c_392d_23bb_cebc04ddb008
  b23e89e2_6e80_9299_6f5e_65de34c32e16["migrate-variant-order.test.ts"]
  b23e89e2_6e80_9299_6f5e_65de34c32e16 --> e3144eb9_0666_0bdb_e31d_1094b50abdd7
  75ba60a9_2614_1c57_ad40_3663d4315f3b["migrate.ts"]
  75ba60a9_2614_1c57_ad40_3663d4315f3b --> e3144eb9_0666_0bdb_e31d_1094b50abdd7
  style e3144eb9_0666_0bdb_e31d_1094b50abdd7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

export function migrateVariantOrder(
  designSystem: DesignSystem,
  _userConfig: Config | null,
  rawCandidate: string,
): string {
  // This migration is only needed for Tailwind CSS v3
  //
  // Changing the variant order when migrating from v3 to v4 is fine, but
  // migrating v4 to v4 would make it unsafe because the variant order would
  // flip-flop every time you run the migration.
  if (!version.isMajor(3)) {
    return rawCandidate
  }

  for (let candidate of designSystem.parseCandidate(rawCandidate)) {
    if (candidate.variants.length <= 1) {
      continue
    }

    let atRuleVariants = []
    let regularVariants = []
    let pseudoElementVariants = []

    let originalOrder = candidate.variants

    for (let variant of candidate.variants) {
      if (isAtRuleVariant(designSystem, variant)) {
        atRuleVariants.push(variant)
      } else if (isEndOfSelectorPseudoElement(designSystem, variant)) {
        pseudoElementVariants.push(variant)
      } else {
        regularVariants.push(variant)
      }
    }

    // We only need to reorder regular variants if order is important
    let regularVariantsNeedReordering = regularVariants.some((v) =>
      isCombinatorVariant(designSystem, v),
    )

    // The candidate list in the AST need to be in reverse order
    let newOrder = [
      ...pseudoElementVariants,
      ...(regularVariantsNeedReordering ? regularVariants.reverse() : regularVariants),
      ...atRuleVariants,
    ]

    if (orderMatches(originalOrder, newOrder)) {
      continue
    }

    return designSystem.printCandidate({ ...candidate, variants: newOrder })
  }
// ... (76 more lines)

Subdomains

Frequently Asked Questions

What does migrate-variant-order.ts do?
migrate-variant-order.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-variant-order.ts?
migrate-variant-order.ts defines 6 function(s): getAppliedNodeStack, isAtRuleVariant, isCombinatorVariant, isEndOfSelectorPseudoElement, migrateVariantOrder, orderMatches.
What does migrate-variant-order.ts depend on?
migrate-variant-order.ts imports 7 module(s): ast.ts, candidate.ts, design-system.ts, plugin-api.ts, version.ts, walk, walk.ts.
What files import migrate-variant-order.ts?
migrate-variant-order.ts is imported by 2 file(s): migrate-variant-order.test.ts, migrate.ts.
Where is migrate-variant-order.ts in the architecture?
migrate-variant-order.ts is located at packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.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