convert commas to spaces

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 { prefix } from './codemods/prefix'
 import { simpleLegacyClasses } from './codemods/simple-legacy-classes'
@@ -31,6 +32,7 @@ export const DEFAULT_MIGRATIONS: Migration[] = [
   automaticVarInjection,
   bgGradient,
   simpleLegacyClasses,
+  legacyArbitraryValues,
   arbitraryValueToBareValue,
   maxWidthScreen,
   themeToVar,