Convert , to in grid-cols-[…], grid-rows-[…], and object-[…] (#14927)

This PR converts legacy commas in arbitrary values to spaces.

In Tailwind CSS v3, we allowed commas in arbitrary values for
`grid-cols-[…]`, `grid-rows-[…]`, and `object-[…]` for backwards
compatibility. The underlying CSS value did use spaces instead of
commas.

This PR adds a code mod where convert the commas to spaces when we see
them.


Test plan:
---

Running this on Catalyst it goes from this:

<img width="393" alt="image"
src="https://github.com/user-attachments/assets/03cbda73-41f9-4601-b77a-5b511226b876">

To the expected value of:

<img width="376" alt="image"
src="https://github.com/user-attachments/assets/dd9bbe01-5eb1-4340-937b-70c435e7e4f0">

---------

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

Author: RobinMalfait

CHANGELOG.md

@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
 - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896))
 - _Upgrade (experimental)_: Don't convert `theme(…/15%)` to modifier unless it is the entire arbitrary value of a utility ([#14922](https://github.com/tailwindlabs/tailwindcss/pull/14922))
+- _Upgrade (experimental)_: Convert `,` to ` ` in arbitrary `grid-cols-*`, `grid-rows-*`, and `object-*` values ([#14927](https://github.com/tailwindlabs/tailwindcss/pull/14927))
 
 ### Changed
 

packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.test.ts

@@ -0,0 +1,15 @@
+import { __unstable__loadDesignSystem } from '@tailwindcss/node'
+import { expect, test } from 'vitest'
+import { legacyArbitraryValues } from './legacy-arbitrary-values'
+
+test.each([
+  ['grid-cols-[auto,1fr]', 'grid-cols-[auto_1fr]'],
+  ['grid-rows-[auto,1fr]', 'grid-rows-[auto_1fr]'],
+  ['object-[10px,20px]', 'object-[10px_20px]'],
+])('%s => %s', async (candidate, result) => {
+  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
+    base: __dirname,
+  })
+
+  expect(legacyArbitraryValues(designSystem, {}, candidate)).toEqual(result)
+})

packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.ts

@@ -0,0 +1,30 @@
+import type { Config } from 'tailwindcss'
+import { parseCandidate } from '../../../../tailwindcss/src/candidate'
+import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
+import { segment } from '../../../../tailwindcss/src/utils/segment'
+import { printCandidate } from '../candidates'
+
+export function legacyArbitraryValues(
+  designSystem: DesignSystem,
+  _userConfig: Config,
+  rawCandidate: string,
+): string {
+  for (let candidate of parseCandidate(rawCandidate, designSystem)) {
+    let clone = structuredClone(candidate)
+    let changed = false
+
+    // Convert commas to spaces. E.g.: [auto,1fr] to [auto_1fr]
+    if (
+      clone.kind === 'functional' &&
+      clone.value?.kind === 'arbitrary' &&
+      (clone.root === 'grid-cols' || clone.root == 'grid-rows' || clone.root == 'object')
+    ) {
+      changed = true
+      clone.value.value = segment(clone.value.value, ',').join(' ')
+    }
+
+    return changed ? printCandidate(designSystem, clone) : rawCandidate
+  }
+
+  return rawCandidate
+}

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

@@ -7,6 +7,7 @@ import { arbitraryValueToBareValue } from './codemods/arbitrary-value-to-bare-va
 import { automaticVarInjection } from './codemods/automatic-var-injection'
 import { bgGradient } from './codemods/bg-gradient'
 import { important } from './codemods/important'
+import { legacyArbitraryValues } from './codemods/legacy-arbitrary-values'
 import { maxWidthScreen } from './codemods/max-width-screen'
 import { modernizeArbitraryValues } from './codemods/modernize-arbitrary-values'
 import { prefix } from './codemods/prefix'
@@ -35,6 +36,7 @@ export const DEFAULT_MIGRATIONS: Migration[] = [
   themeToVar,
   variantOrder, // Has to happen before migrations that modify variants
   automaticVarInjection,
+  legacyArbitraryValues,
   arbitraryValueToBareValue,
   modernizeArbitraryValues,
 ]