conditionally apply migrations based on version number

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.ts

@@ -5,6 +5,7 @@ import type { Candidate } from '../../../../tailwindcss/src/candidate'
 import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
 import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
+import * as version from '../../utils/version'
 import { printCandidate } from './candidates'
 import { isSafeMigration } from './is-safe-migration'
 
@@ -75,6 +76,15 @@ export async function migrateLegacyClasses(
     end: number
   },
 ): Promise<string> {
+  // These migrations are only safe when migrating from v3 to v4.
+  //
+  // Migrating from `rounded` to `rounded-sm` once is fine (v3 -> v4). But if we
+  // migrate again (v4 -> v4), then `rounded-sm` would be migrated to
+  // `rounded-xs` which is incorrect because we already migrated this.
+  if (!version.isMajor(3)) {
+    return rawCandidate
+  }
+
   let defaultDesignSystem = await DESIGN_SYSTEMS.get(__dirname)
 
   function* migrate(rawCandidate: string) {

packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.ts

@@ -1,10 +1,11 @@
 import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
 import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
+import * as version from '../../utils/version'
 import { printCandidate } from './candidates'
 
 // Classes that used to exist in Tailwind CSS v3, but do not exist in Tailwind
 // CSS v4 anymore.
-const LEGACY_CLASS_MAP = {
+const LEGACY_CLASS_MAP: Record<string, string> = {
   'overflow-ellipsis': 'text-ellipsis',
 
   'flex-grow': 'grow',
@@ -14,8 +15,15 @@ const LEGACY_CLASS_MAP = {
 
   'decoration-clone': 'box-decoration-clone',
   'decoration-slice': 'box-decoration-slice',
+}
 
-  'outline-none': 'outline-hidden',
+// `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'
 }
 
 let seenDesignSystems = new WeakSet<DesignSystem>()

packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.ts

@@ -2,13 +2,23 @@ import { walk, 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 * as version from '../../utils/version'
 import { printCandidate } from './candidates'
 
 export function migrateVariantOrder(
   designSystem: DesignSystem,
   _userConfig: Config,
   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