Migrate from, via, and to arbitrary values to bare values (#14725)

This PR migrates arbitrary values for the `from-*`, `via-*` and `to-*`
utilities
to bare values.

Input:
```html
<div class="from-[28%]"></div>
<div class="via-[28%]"></div>
<div class="to-[28%]"></div>
```

Output:
```html
<div class="from-28%"></div>
<div class="via-28%"></div>
<div class="to-28%"></div>
```

---------

Co-authored-by: Adam Wathan <[email protected]>
Co-authored-by: Adam Wathan <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
 - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721))
 - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720))
+- _Upgrade (experimental)_: Migrate arbitrary values to bare values for the `from-*`, `via-*`, and `to-*` utilities ([#14725](https://github.com/tailwindlabs/tailwindcss/pull/14725))
 
 ### Changed
 

packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts

@@ -17,6 +17,14 @@ 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%'],
+  ['from-[28.5%]', 'from-[28.5%]'],
+  ['via-[28.5%]', 'via-[28.5%]'],
+  ['to-[28.5%]', 'to-[28.5%]'],
+
   // 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]'],

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',