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 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/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) { 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..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 @@ -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)]'],