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]>
tailwindlabs · Oct 19, 2024 · fd8315b · fd8315b
1 parent 2abf228
commit fd8315b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/CHANGELOG.md b/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
 

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

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