From 73c30f5d03fe40b73551b4d6916ccef1ab71908d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 18 Oct 2024 21:48:49 +0200 Subject: [PATCH 1/3] ensure we migrate `theme(spacing.1)` correctly `theme(spacing.1)` wasn't converted because we generated `--spacing-` and that doesn't exist therefore we kept it as-is. --- .../src/template/codemods/theme-to-var.test.ts | 4 ++++ packages/tailwindcss/src/compat/apply-config-to-theme.ts | 6 +++++- 2 files changed, 9 insertions(+), 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 ef3e5234fd1f..a0579dc4dcd5 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 @@ -6,6 +6,10 @@ test.each([ // Keep candidates that don't contain `theme(…)` or `theme(…, …)` ['[color:red]', '[color:red]'], + // Handle special cases around `.1` in the `theme(…)` + ['[--value:theme(spacing.1)]', '[--value:var(--spacing-1)]'], + ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--font-size-xs--line-height)]'], + // Convert to `var(…)` if we can resolve the path ['[color:theme(colors.red.500)]', '[color:var(--color-red-500)]'], // Arbitrary property ['[color:theme(colors.red.500)]/50', '[color:var(--color-red-500)]/50'], // Arbitrary property + modifier diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts index 9edf038e4dc1..a8dd432539a8 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts +++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts @@ -142,7 +142,11 @@ export function keyPathToCssProperty(path: string[]) { // [1] should move into the nested object tuple. To create the CSS variable // name for this, we replace it with an empty string that will result in two // subsequent dashes when joined. - .map((path) => (path === '1' ? '' : path)) + // + // E.g.: + // - `fontSize.xs.1.lineHeight` -> `font-size-xs--line-height` + // - `spacing.1` -> `--spacing-1` + .map((path, idx, all) => (path === '1' && idx !== all.length - 1 ? '' : path)) // Resolve the key path to a CSS variable segment .map((part) => From 72ac8c3186ddc67e9a4e10a2a6380ff454c37337 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 18 Oct 2024 21:59:09 +0200 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bbc4667aa93..2df06208ba84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703)) - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721)) - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720)) +- _Upgrade (experimental)_: Ensure we migrate `theme(spacing.1)` to `var(--spacing-1)` correctly ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724)) ### Changed From 35b7f62edef622dc5923d32e387bed41290a938c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 19 Oct 2024 09:10:23 -0400 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 2df06208ba84..2de41176f82c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703)) - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721)) - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720)) -- _Upgrade (experimental)_: Ensure we migrate `theme(spacing.1)` to `var(--spacing-1)` correctly ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724)) +- _Upgrade (experimental)_: Ensure legacy theme values ending in `1` (like `theme(spacing.1)`) are correctly migrated to custom properties ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724)) ### Changed