From e73e6b091f1929ceefc4a474d498a952ae2cabb1 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Nov 2024 17:21:48 +0100 Subject: [PATCH 1/3] convert commas to spaces --- .../codemods/legacy-arbitrary-values.test.ts | 15 ++++++++++ .../codemods/legacy-arbitrary-values.ts | 30 +++++++++++++++++++ .../src/template/migrate.ts | 2 ++ 3 files changed, 47 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/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 000000000000..974cd0ca3289 --- /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 000000000000..704bda479acf --- /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 f95344fa0bc8..56222c04054a 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 { 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, From 590d3f5bb2a29fc152c535a33cc488f69ee166a1 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Nov 2024 17:25:15 +0100 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1240739a920..28887047dba2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,6 +42,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 `grid-cols-[…]`, `grid-rows-[…]`, and `object-[…]` ([#14927](https://github.com/tailwindlabs/tailwindcss/pull/14927)) ### Changed From 14ee476e9e7b9171742fa205a99749c3000aee40 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 11 Nov 2024 10:06:58 -0500 Subject: [PATCH 3/3] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 28887047dba2..5c56a6a1ba5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,7 +42,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 `grid-cols-[…]`, `grid-rows-[…]`, and `object-[…]` ([#14927](https://github.com/tailwindlabs/tailwindcss/pull/14927)) +- _Upgrade (experimental)_: Convert `,` to ` ` in arbitrary `grid-cols-*`, `grid-rows-*`, and `object-*` values ([#14927](https://github.com/tailwindlabs/tailwindcss/pull/14927)) ### Changed