From 428c1f0ab3123bb1d918c2f331bccacb7a993973 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 30 Oct 2024 22:21:22 +0100 Subject: [PATCH 1/4] update tests --- .../src/template/candidates.test.ts | 2 +- .../src/template/codemods/theme-to-var.test.ts | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/@tailwindcss-upgrade/src/template/candidates.test.ts b/packages/@tailwindcss-upgrade/src/template/candidates.test.ts index 4c310fe6f815..68c3783b7f5d 100644 --- a/packages/@tailwindcss-upgrade/src/template/candidates.test.ts +++ b/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))]', ], ] diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts index eb4d42c1e9bc..5746a1f757af 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts +++ b/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)]'], From 77ac17e759a6445819b932630e10a6114099a03d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 30 Oct 2024 22:21:34 +0100 Subject: [PATCH 2/4] print `, ` as `,` in arbitrary variants E.g.: `m-[min(1px,_2px)]` -> `m-[min(1px,2px)]` --- packages/@tailwindcss-upgrade/src/template/candidates.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/@tailwindcss-upgrade/src/template/candidates.ts b/packages/@tailwindcss-upgrade/src/template/candidates.ts index b6ec3e6824c2..5e0ec6eaaae8 100644 --- a/packages/@tailwindcss-upgrade/src/template/candidates.ts +++ b/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) { From f95a1aa8e4ab5b60a2230e079db011aceb945004 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 30 Oct 2024 22:27:09 +0100 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cd0b0322670e..b2e53387fb57 100644 --- a/CHANGELOG.md +++ b/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 From 469c2c0eef8f60f4e0390451f71da4a708aaf848 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 30 Oct 2024 22:51:47 +0100 Subject: [PATCH 4/4] Update packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts Co-authored-by: Jordan Pittman --- .../src/template/codemods/theme-to-var.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts index 5746a1f757af..e82b769592ff 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts @@ -85,7 +85,7 @@ test.each([ // `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]'], + ['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)]'],