move migrate-bare-utilities to core

Author: RobinMalfait

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

@@ -10,7 +10,6 @@ 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 { migrateBareValueUtilities } from './migrate-bare-utilities'
 import { migrateCamelcaseInNamedValue } from './migrate-camelcase-in-named-value'
 import { migrateCanonicalizeCandidate } from './migrate-canonicalize-candidate'
 import { migrateDeprecatedUtilities } from './migrate-deprecated-utilities'
@@ -42,7 +41,6 @@ export const DEFAULT_MIGRATIONS: Migration[] = [
   migrateVariantOrder, // sync, v3 → v4, Has to happen before migrations that modify variants
   migrateAutomaticVarInjection, // sync, v3 → v4
   migrateLegacyArbitraryValues, // sync, v3 → v4 (could also consider it a v4 optimization)
-  migrateBareValueUtilities, // sync, v4
   migrateDeprecatedUtilities, // sync, v4 (deprecation map, order-none → order-0)
   migrateModernizeArbitraryValues, // sync, v3 and v4 optimizations, split up?
   migrateArbitraryVariants, // sync, v4

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

@@ -468,6 +468,32 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
   })
+
+  describe('bare values', () => {
+    let input = css`
+      @import 'tailwindcss';
+      @theme {
+        --*: initial;
+        --spacing: 0.25rem;
+        --aspect-video: 16 / 9;
+        --tab-size-github: 8;
+      }
+
+      @utility tab-* {
+        tab-size: --value(--tab-size, integer);
+      }
+    `
+
+    test.each([
+      // Built-in utility with bare value fraction
+      ['aspect-16/9', 'aspect-video'],
+
+      // Custom utility with bare value integer
+      ['tab-8', 'tab-github'],
+    ])(testName, async (candidate, expected) => {
+      await expectCanonicalization(input, candidate, expected)
+    })
+  })
 })
 
 describe('theme to var', () => {

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

@@ -31,7 +31,13 @@ const canonicalizeCandidateCache = new DefaultMap((ds: DesignSystem) => {
   })
 })
 
-const CANONICALIZATIONS = [bgGradientToLinear, themeToVar, arbitraryUtilities, print]
+const CANONICALIZATIONS = [
+  bgGradientToLinear,
+  themeToVar,
+  arbitraryUtilities,
+  bareValueUtilities,
+  print,
+]
 
 function print(designSystem: DesignSystem, rawCandidate: string): string {
   for (let candidate of designSystem.parseCandidate(rawCandidate)) {
@@ -696,3 +702,112 @@ function allVariablesAreUsed(
 
   return isSafeMigration
 }
+
+// ----
+
+function bareValueUtilities(designSystem: DesignSystem, rawCandidate: string): string {
+  let utilities = preComputedUtilities.get(designSystem)
+  let signatures = computeUtilitySignature.get(designSystem)
+
+  for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
+    // We are only interested in bare value utilities
+    if (readonlyCandidate.kind !== 'functional' || readonlyCandidate.value?.kind !== 'named') {
+      continue
+    }
+
+    // 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>
+
+    // Create a basic stripped candidate without variants or important flag. We
+    // will re-add those later but they are irrelevant for what we are trying to
+    // do here (and will increase cache hits because we only have to deal with
+    // the base utility, nothing more).
+    let targetCandidate = baseCandidate(candidate)
+
+    let targetCandidateString = designSystem.printCandidate(targetCandidate)
+    if (baseReplacementsCache.get(designSystem).has(targetCandidateString)) {
+      let target = structuredClone(
+        baseReplacementsCache.get(designSystem).get(targetCandidateString)!,
+      )
+      // Re-add the variants and important flag from the original candidate
+      target.variants = candidate.variants
+      target.important = candidate.important
+
+      return designSystem.printCandidate(target)
+    }
+
+    // Compute the signature for the target candidate
+    let targetSignature = signatures.get(targetCandidateString)
+    if (typeof targetSignature !== 'string') continue
+
+    // Try a few options to find a suitable replacement utility
+    for (let replacementCandidate of tryReplacements(targetSignature, targetCandidate)) {
+      let replacementString = designSystem.printCandidate(replacementCandidate)
+      let replacementSignature = signatures.get(replacementString)
+      if (replacementSignature !== targetSignature) {
+        continue
+      }
+
+      replacementCandidate = structuredClone(replacementCandidate)
+
+      // Cache the result so we can re-use this work later
+      baseReplacementsCache.get(designSystem).set(targetCandidateString, replacementCandidate)
+
+      // Re-add the variants and important flag from the original candidate
+      replacementCandidate.variants = candidate.variants
+      replacementCandidate.important = candidate.important
+
+      // Update the candidate with the new value
+      Object.assign(candidate, replacementCandidate)
+
+      // We will re-print the candidate to get the migrated candidate out
+      return designSystem.printCandidate(candidate)
+    }
+  }
+
+  return rawCandidate
+
+  function* tryReplacements(
+    targetSignature: string,
+    candidate: Extract<Candidate, { kind: 'functional' }>,
+  ): Generator<Candidate> {
+    // Find a corresponding utility for the same signature
+    let replacements = utilities.get(targetSignature)
+
+    // Multiple utilities can map to the same signature. Not sure how to migrate
+    // this one so let's just skip it for now.
+    //
+    // TODO: Do we just migrate to the first one?
+    if (replacements.length > 1) return
+
+    // If we didn't find any replacement utilities, let's try to strip the
+    // modifier and find a replacement then. If we do, we can try to re-add the
+    // modifier later and verify if we have a valid migration.
+    //
+    // This is necessary because `text-red-500/50` will not be pre-computed,
+    // only `text-red-500` will.
+    if (replacements.length === 0 && candidate.modifier) {
+      let candidateWithoutModifier = { ...candidate, modifier: null }
+      let targetSignatureWithoutModifier = signatures.get(
+        designSystem.printCandidate(candidateWithoutModifier),
+      )
+      if (typeof targetSignatureWithoutModifier === 'string') {
+        for (let replacementCandidate of tryReplacements(
+          targetSignatureWithoutModifier,
+          candidateWithoutModifier,
+        )) {
+          yield Object.assign({}, replacementCandidate, { modifier: candidate.modifier })
+        }
+      }
+    }
+
+    // If only a single utility maps to the signature, we can use that as the
+    // replacement.
+    if (replacements.length === 1) {
+      for (let replacementCandidate of parseCandidate(designSystem, replacements[0])) {
+        yield replacementCandidate
+      }
+    }
+  }
+}