Remove whitespace around , separator (#14838)

This PR is an improvement/fix by making sure that whitespace around the
`,` separator is removed when printing arbitrary values.

Before:
```diff
- <div class="grid-cols-[min(50%,theme(spacing.80))_auto]"></div>
+ <div class="grid-cols-[min(50%,_var(--spacing-80))_auto]"></div>
```

After:
```diff
- <div class="grid-cols-[min(50%,theme(spacing.80))_auto]"></div>
+ <div class="grid-cols-[min(50%,var(--spacing-80))_auto]"></div>
```

---------

Co-authored-by: Jordan Pittman <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Detect classes in new files when using `@tailwindcss/postcss` ([#14829](https://github.com/tailwindlabs/tailwindcss/pull/14829))
 - Fix crash when using `@source` containing `..` ([#14831](https://github.com/tailwindlabs/tailwindcss/pull/14831))
 - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830))
+- _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
 
 ## [4.0.0-alpha.31] - 2024-10-29
 

packages/@tailwindcss-upgrade/src/template/candidates.test.ts

@@ -123,7 +123,7 @@ const candidates = [
   ['bg-[no-repeat_url(/image_13.png)]', 'bg-[no-repeat_url(/image_13.png)]'],
   [
     'bg-[var(--spacing-0_5,_var(--spacing-1_5,_3rem))]',
-    'bg-[var(--spacing-0_5,_var(--spacing-1_5,_3rem))]',
+    'bg-[var(--spacing-0_5,var(--spacing-1_5,3rem))]',
   ],
 ]
 

packages/@tailwindcss-upgrade/src/template/candidates.ts

@@ -176,6 +176,12 @@ function printArbitraryValue(input: string) {
         drop.add(node)
       }
     }
+
+    // Whitespace around `,` separators can be removed.
+    // E.g.: `min(1px , 2px)` -> `min(1px,2px)`
+    else if (node.kind === 'separator' && node.value.trim() === ',') {
+      node.value = ','
+    }
   })
 
   if (drop.size > 0) {

packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts

@@ -17,7 +17,7 @@ test.each([
   ['bg-[size:theme(spacing.4)]', 'bg-[size:var(--spacing-4)]'], // Arbitrary value + data type hint
 
   // Convert to `var(…)` if we can resolve the path, but keep fallback values
-  ['bg-[theme(colors.red.500,red)]', 'bg-[var(--color-red-500,_red)]'],
+  ['bg-[theme(colors.red.500,red)]', 'bg-[var(--color-red-500,red)]'],
 
   // Keep `theme(…)` if we can't resolve the path
   ['bg-[theme(colors.foo.1000)]', 'bg-[theme(colors.foo.1000)]'],
@@ -41,11 +41,11 @@ test.each([
   //   to a candidate modifier _if_ all `theme(…)` calls use the same modifier.
   [
     '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]',
-    '[color:theme(--color-red-500/50,_theme(--color-blue-500/50))]',
+    '[color:theme(--color-red-500/50,theme(--color-blue-500/50))]',
   ],
   [
     '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]/50',
-    '[color:theme(--color-red-500/50,_theme(--color-blue-500/50))]/50',
+    '[color:theme(--color-red-500/50,theme(--color-blue-500/50))]/50',
   ],
 
   // Convert the `theme(…)`, but try to move the inline modifier (e.g. `50%`),
@@ -83,6 +83,10 @@ test.each([
   // that this doesn't end up as the modifier in the candidate itself.
   ['max-[theme(spacing.4/50)]:flex', 'max-[theme(--spacing-4/50)]:flex'],
 
+  // `theme(…)` calls in another CSS function is replaced correctly.
+  // Additionally we remove unnecessary whitespace.
+  ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,var(--spacing-80))_auto]'],
+
   // `theme(…)` calls valid in v3, but not in v4 should still be converted.
   ['[--foo:theme(fontWeight.semibold)]', '[--foo:theme(fontWeight.semibold)]'],