move migrate-optimize-modifier to core

Author: RobinMalfait

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

@@ -15,7 +15,6 @@ import { migrateLegacyArbitraryValues } from './migrate-legacy-arbitrary-values'
 import { migrateLegacyClasses } from './migrate-legacy-classes'
 import { migrateMaxWidthScreen } from './migrate-max-width-screen'
 import { migrateModernizeArbitraryValues } from './migrate-modernize-arbitrary-values'
-import { migrateOptimizeModifier } from './migrate-optimize-modifier'
 import { migratePrefix } from './migrate-prefix'
 import { migrateSimpleLegacyClasses } from './migrate-simple-legacy-classes'
 import { migrateVariantOrder } from './migrate-variant-order'
@@ -38,7 +37,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?
-  migrateOptimizeModifier, // sync, v4 (optimization)
 ]
 
 let migrateCached = new DefaultMap<

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

@@ -162,8 +162,8 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
     // as bare modifiers). Convert the complex numbers to arbitrary values instead.
     ['[color:theme(colors.red.500/12.34%)]', 'text-red-500/[12.34%]'],
     ['[color:theme(colors.red.500/var(--opacity))]', 'text-red-500/(--opacity)'],
-    ['[color:theme(colors.red.500/.12345)]', 'text-red-500/[12.345]'],
-    ['[color:theme(colors.red.500/50.25%)]', 'text-red-500/[50.25%]'],
+    ['[color:theme(colors.red.500/.12345)]', 'text-red-500/1234.5'],
+    ['[color:theme(colors.red.500/50.25%)]', 'text-red-500/50.25'],
 
     // Arbitrary value
     ['bg-[theme(colors.red.500/75%)]', 'bg-red-500/75'],
@@ -726,6 +726,36 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s',
       await expectCanonicalization(input, candidate, expected)
     })
   })
+
+  describe('optimize modifier', () => {
+    let input = css`
+      @import 'tailwindcss';
+      @theme {
+        --*: initial;
+        --color-red-500: red;
+      }
+    `
+
+    test.each([
+      // Keep the modifier as-is, nothing to optimize
+      ['bg-red-500/25', 'bg-red-500/25'],
+
+      // Use a bare value modifier
+      ['bg-red-500/[25%]', 'bg-red-500/25'],
+
+      // Convert 0-1 values to bare values
+      ['bg-[#f00]/[0.16]', 'bg-[#f00]/16'],
+
+      // Drop unnecessary modifiers
+      ['bg-red-500/[100%]', 'bg-red-500'],
+      ['bg-red-500/100', 'bg-red-500'],
+
+      // Keep modifiers on classes that don't _really_ exist
+      ['group/name', 'group/name'],
+    ])(testName, async (candidate, expected) => {
+      await expectCanonicalization(input, candidate, expected)
+    })
+  })
 })
 
 describe('theme to var', () => {

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

@@ -52,6 +52,7 @@ const CANONICALIZATIONS = [
   arbitraryVariants,
   dropUnnecessaryDataTypes,
   arbitraryValueToBareValue,
+  optimizeModifier,
   print,
 ]
 
@@ -1106,3 +1107,76 @@ function* tryValueReplacements(
     yield* tryValueReplacements(candidate, option, seen)
   }
 }
+
+// ----
+
+// Optimize the modifier
+//
+// E.g.:
+//
+// - `/[25%]`   → `/25`
+// - `/[100%]`  → `/100`    → <empty>
+// - `/100`     → <empty>
+//
+function optimizeModifier(designSystem: DesignSystem, rawCandidate: string): string {
+  let signatures = computeUtilitySignature.get(designSystem)
+
+  for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
+    let candidate = structuredClone(readonlyCandidate) as Writable<typeof readonlyCandidate>
+    if (
+      (candidate.kind === 'functional' && candidate.modifier !== null) ||
+      (candidate.kind === 'arbitrary' && candidate.modifier !== null)
+    ) {
+      let targetSignature = signatures.get(rawCandidate)
+      let modifier = candidate.modifier
+      let changed = false
+
+      // 1. Try to drop the modifier entirely
+      if (
+        targetSignature ===
+        signatures.get(designSystem.printCandidate({ ...candidate, modifier: null }))
+      ) {
+        changed = true
+        candidate.modifier = null
+      }
+
+      // 2. Try to remove the square brackets and the `%` sign
+      if (!changed) {
+        let newModifier: NamedUtilityValue = {
+          kind: 'named',
+          value: modifier.value.endsWith('%') ? modifier.value.slice(0, -1) : modifier.value,
+          fraction: null,
+        }
+
+        if (
+          targetSignature ===
+          signatures.get(designSystem.printCandidate({ ...candidate, modifier: newModifier }))
+        ) {
+          changed = true
+          candidate.modifier = newModifier
+        }
+      }
+
+      // 3. Try to remove the square brackets, but multiply by 100. E.g.: `[0.16]` -> `16`
+      if (!changed) {
+        let newModifier: NamedUtilityValue = {
+          kind: 'named',
+          value: `${parseFloat(modifier.value) * 100}`,
+          fraction: null,
+        }
+
+        if (
+          targetSignature ===
+          signatures.get(designSystem.printCandidate({ ...candidate, modifier: newModifier }))
+        ) {
+          changed = true
+          candidate.modifier = newModifier
+        }
+      }
+
+      return changed ? designSystem.printCandidate(candidate) : rawCandidate
+    }
+  }
+
+  return rawCandidate
+}