Ensure we migrate theme(spacing.1) to var(--spacing-1) correctly (#14724)

This PR fixes an issue where `theme(…)` calls that contain a `.1`
weren't correctly converted to `var(--spacing-1)`. The reason for this
is that `.1` has some special meaning in cases like
`fontSize.xs.1.lineHeight` where it should be converted to
`--font-size-xs--line-height`, not `--font-size-xs-1-line-height`.

To solve this, we make sure to only apply the `--` check if the `1`
occurs somewhere in the middle instead of at the very end.

With this change, the following migrations will happen correctly:

```diff
- [--value:theme(spacing.1)]
+ [--value:var(--spacing-1)]
```

```diff
- [--value:theme(fontSize.xs.1.lineHeight)]
+ [--value:var(--font-size-xs--line-height)]
```

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: RobinMalfait

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

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

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) =>