diff --git a/CHANGELOG.md b/CHANGELOG.md index e4ab8ed4103c..7940c36fd811 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 legacy theme values ending in `1` (like `theme(spacing.1)`) are correctly migrated to custom properties ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724)) - _Upgrade (experimental)_: Migrate arbitrary values to bare values for the `from-*`, `via-*`, and `to-*` utilities ([#14725](https://github.com/tailwindlabs/tailwindcss/pull/14725)) ### Changed 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) =>