From d325e7049609e9b59cf0ec9fb40e6b447ec96c48 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 11 Nov 2024 16:26:37 +0100 Subject: [PATCH] =?UTF-8?q?Convert=20`,`=20to=20`=20`=20in=20`grid-cols-[?= =?UTF-8?q?=E2=80=A6]`,=20`grid-rows-[=E2=80=A6]`,=20and=20`object-[?= =?UTF-8?q?=E2=80=A6]`=20(#14927)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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: image To the expected value of: image --------- Co-authored-by: Adam Wathan --- CHANGELOG.md | 1 + .../codemods/legacy-arbitrary-values.test.ts | 15 ++++++++++ .../codemods/legacy-arbitrary-values.ts | 30 +++++++++++++++++++ .../src/template/migrate.ts | 2 ++ 4 files changed, 48 insertions(+) create mode 100644 packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.test.ts create mode 100644 packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index b18f6887e..b8eb91e90 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.test.ts new file mode 100644 index 000000000..974cd0ca3 --- /dev/null +++ b/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) +}) diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-arbitrary-values.ts new file mode 100644 index 000000000..704bda479 --- /dev/null +++ b/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 +} diff --git a/packages/@tailwindcss-upgrade/src/template/migrate.ts b/packages/@tailwindcss-upgrade/src/template/migrate.ts index 2ef3d2995..a22360570 100644 --- a/packages/@tailwindcss-upgrade/src/template/migrate.ts +++ b/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, ]