From 26da0b938d5c3d7e5c82267d66238f553b3dde59 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 18 Oct 2024 22:39:57 +0200
Subject: [PATCH] migrate `from`, `via`, and `to` arbitrary values to bare
 values

---
 .../codemods/arbitrary-value-to-bare-value.test.ts |  5 +++++
 .../codemods/arbitrary-value-to-bare-value.ts      | 14 +++++++++++---
 2 files changed, 16 insertions(+), 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
index 411f0eb9ee3a..8e8ef970904b 100644
--- 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
index 44aa2675db83..52f3dc4c05c4 100644
--- 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',