migrateVariantOrder() — tailwindcss Function Reference

Source Code

packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.ts lines 8–62

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 })
  }
  return rawCandidate
}