move migrate-arbitrary-variants to core

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.test.ts

@@ -8,7 +8,6 @@ import { spliceChangesIntoString, type StringChange } from '../../utils/splice-c
 import { extractRawCandidates } from './candidates'
 import { isSafeMigration } from './is-safe-migration'
 import { migrateArbitraryValueToBareValue } from './migrate-arbitrary-value-to-bare-value'
-import { migrateArbitraryVariants } from './migrate-arbitrary-variants'
 import { migrateAutomaticVarInjection } from './migrate-automatic-var-injection'
 import { migrateCamelcaseInNamedValue } from './migrate-camelcase-in-named-value'
 import { migrateCanonicalizeCandidate } from './migrate-canonicalize-candidate'
@@ -41,7 +40,6 @@ export const DEFAULT_MIGRATIONS: Migration[] = [
   migrateAutomaticVarInjection, // sync, v3 → v4
   migrateLegacyArbitraryValues, // sync, v3 → v4 (could also consider it a v4 optimization)
   migrateModernizeArbitraryValues, // sync, v3 and v4 optimizations, split up?
-  migrateArbitraryVariants, // sync, v4
   migrateDropUnnecessaryDataTypes, // sync, v4 (I think this can be dropped?)
   migrateArbitraryValueToBareValue, // sync, v4 (optimization)
   migrateOptimizeModifier, // sync, v4 (optimization)

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

@@ -522,6 +522,121 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
   })
+
+  describe('arbitrary variants', () => {
+    let input = css`
+      @import 'tailwindcss';
+      @theme {
+        --*: initial;
+      }
+    `
+
+    test.each([
+      // Arbitrary variant to static variant
+      ['[&:focus]:flex', 'focus:flex'],
+
+      // Arbitrary variant to static variant with at-rules
+      ['[@media(scripting:_none)]:flex', 'noscript:flex'],
+
+      // Arbitrary variant to static utility at-rules and with slight differences
+      // in whitespace. This will require some canonicalization.
+      ['[@media(scripting:none)]:flex', 'noscript:flex'],
+      ['[@media(scripting:_none)]:flex', 'noscript:flex'],
+      ['[@media_(scripting:_none)]:flex', 'noscript:flex'],
+
+      // With compound variants
+      ['has-[&:focus]:flex', 'has-focus:flex'],
+      ['not-[&:focus]:flex', 'not-focus:flex'],
+      ['group-[&:focus]:flex', 'group-focus:flex'],
+      ['peer-[&:focus]:flex', 'peer-focus:flex'],
+      ['in-[&:focus]:flex', 'in-focus:flex'],
+    ])(testName, async (candidate, expected) => {
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    test('unsafe migrations keep the candidate as-is', async () => {
+      // `hover:` also includes an `@media` query in addition to the `&:hover`
+      // state. Migration is not safe because the functionality would be different.
+      let candidate = '[&:hover]:flex'
+      let expected = '[&:hover]:flex'
+      let input = css`
+        @import 'tailwindcss';
+        @theme {
+          --*: initial;
+        }
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    test('make unsafe migration safe (1)', async () => {
+      // Overriding the `hover:` variant to only use a selector will make the
+      // migration safe.
+      let candidate = '[&:hover]:flex'
+      let expected = 'hover:flex'
+      let input = css`
+        @import 'tailwindcss';
+        @theme {
+          --*: initial;
+        }
+        @variant hover (&:hover);
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    test('make unsafe migration safe (2)', async () => {
+      // Overriding the `hover:` variant to only use a selector will make the
+      // migration safe. This time with the long-hand `@variant` syntax.
+      let candidate = '[&:hover]:flex'
+      let expected = 'hover:flex'
+      let input = css`
+        @import 'tailwindcss';
+        @theme {
+          --*: initial;
+        }
+        @variant hover {
+          &:hover {
+            @slot;
+          }
+        }
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    test('custom selector-based variants', async () => {
+      let candidate = '[&.macos]:flex'
+      let expected = 'is-macos:flex'
+      let input = css`
+        @import 'tailwindcss';
+        @theme {
+          --*: initial;
+        }
+        @variant is-macos (&.macos);
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+
+    test('custom @media-based variants', async () => {
+      let candidate = '[@media(prefers-reduced-transparency:reduce)]:flex'
+      let expected = 'transparency-safe:flex'
+      let input = css`
+        @import 'tailwindcss';
+        @theme {
+          --*: initial;
+        }
+        @variant transparency-safe {
+          @media (prefers-reduced-transparency: reduce) {
+            @slot;
+          }
+        }
+      `
+
+      await expectCanonicalization(input, candidate, expected)
+    })
+  })
 })
 
 describe('theme to var', () => {

packages/tailwindcss/src/canonicalize-candidates.test.ts

@@ -1,11 +1,17 @@
 import { printModifier, type Candidate, type CandidateModifier, type Variant } from './candidate'
 import { keyPathToCssProperty } from './compat/apply-config-to-theme'
 import type { DesignSystem } from './design-system'
-import { computeUtilitySignature, preComputedUtilities } from './signatures'
+import {
+  computeUtilitySignature,
+  computeVariantSignature,
+  preComputedUtilities,
+  preComputedVariants,
+} from './signatures'
 import type { Writable } from './types'
 import { DefaultMap } from './utils/default-map'
 import { dimensions } from './utils/dimensions'
 import { isValidSpacingMultiplier } from './utils/infer-data-type'
+import { replaceObject } from './utils/replace-object'
 import { segment } from './utils/segment'
 import { toKeyPath } from './utils/to-key-path'
 import * as ValueParser from './value-parser'
@@ -37,6 +43,7 @@ const CANONICALIZATIONS = [
   arbitraryUtilities,
   bareValueUtilities,
   deprecatedUtilities,
+  arbitraryVariants,
   print,
 ]
 
@@ -865,3 +872,40 @@ function deprecatedUtilities(designSystem: DesignSystem, rawCandidate: string):
 
   return rawCandidate
 }
+
+// ----
+
+function arbitraryVariants(designSystem: DesignSystem, rawCandidate: string): string {
+  let signatures = computeVariantSignature.get(designSystem)
+  let variants = preComputedVariants.get(designSystem)
+
+  for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
+    // We are only interested in the variants
+    if (readonlyCandidate.variants.length <= 0) return rawCandidate
+
+    // The below logic makes use of mutation. Since candidates in the
+    // DesignSystem are cached, we can't mutate them directly.
+    let candidate = structuredClone(readonlyCandidate) as Writable<typeof readonlyCandidate>
+
+    for (let [variant] of walkVariants(candidate)) {
+      if (variant.kind === 'compound') continue
+
+      let targetString = designSystem.printVariant(variant)
+      let targetSignature = signatures.get(targetString)
+      if (typeof targetSignature !== 'string') continue
+
+      let foundVariants = variants.get(targetSignature)
+      if (foundVariants.length !== 1) continue
+
+      let foundVariant = foundVariants[0]
+      let parsedVariant = designSystem.parseVariant(foundVariant)
+      if (parsedVariant === null) continue
+
+      replaceObject(variant, parsedVariant)
+    }
+
+    return designSystem.printCandidate(candidate)
+  }
+
+  return rawCandidate
+}