migrate from, via, and to arbitrary values to bare values

tailwindlabs · Oct 18, 2024 · 792440e · 792440e
1 parent c4b97f6
commit 792440e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts
@@ -17,6 +17,11 @@ test.each([
   // Should stay as-is
   ['font-stretch-[1/2]', 'font-stretch-[1/2]'],
 
+  // Bare value with % is valid for these utilities
+  ['from-[28%]', 'from-28%'],
+  ['via-[28%]', 'via-28%'],
+  ['to-[28%]', 'to-28%'],
+
   // This test in itself is a bit flawed because `text-[1/2]` currently
   // generates something. Converting it to `text-1/2` doesn't produce anything.
   ['text-[1/2]', 'text-[1/2]'],

diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.ts b/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.ts
@@ -14,16 +14,24 @@ export function arbitraryValueToBareValue(
     let clone = structuredClone(candidate)
     let changed = false
 
-    // Convert font-stretch-* utilities
+    // Convert utilities that accept bare values ending in %
     if (
       clone.kind === 'functional' &&
       clone.value?.kind === 'arbitrary' &&
       clone.value.dataType === null &&
-      clone.root === 'font-stretch'
+      (clone.root === 'from' ||
+        clone.root === 'via' ||
+        clone.root === 'to' ||
+        clone.root === 'font-stretch')
     ) {
       if (clone.value.value.endsWith('%') && isPositiveInteger(clone.value.value.slice(0, -1))) {
         let percentage = parseInt(clone.value.value)
-        if (percentage >= 50 && percentage <= 200) {
+        if (
+          clone.root === 'from' ||
+          clone.root === 'via' ||
+          clone.root === 'to' ||
+          (clone.root === 'font-stretch' && percentage >= 50 && percentage <= 200)
+        ) {
           changed = true
           clone.value = {
             kind: 'named',