Correctly migrate leading-* classes (#16004)

This PR fixes the upgrade tool by properly migrating the
`leading-[<number>]` classes.

The issue is that `leading-[<number>]` maps to the number directly, but
if you use a bare value, then it's a multiplier for based on the
`--spacing` value.

E.g.:

*leading-[2]*:
```css
.leading-\[2\] {
  --tw-leading: 2;
  line-height: 2;
}
@Property --tw-leading {
  syntax: "*";
  inherits: false;
}
```

*leading-2*:
```css
.leading-2 {
  --tw-leading: calc(var(--spacing) * 2);
  line-height: calc(var(--spacing) * 2);
}
@Property --tw-leading {
  syntax: "*";
  inherits: false;
}
```

This PR will now prevent migrating arbitrary values to bare values for
`leading-*` utilities.

That said, this does introduce a small improvement where `leading-[1]`
is migrated to `leading-none`.

Fixes: #15924

Author: RobinMalfait

CHANGELOG.md

@@ -28,6 +28,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure that `@tailwindcss/browser` does not pollute the global namespace ([#15978](https://github.com/tailwindlabs/tailwindcss/pull/15978))
 - Fix crash when project lives in the `/` directory ([#15988](https://github.com/tailwindlabs/tailwindcss/pull/15988))
 - _Upgrade_: Ensure JavaScript config files on different drives are correctly migrated ([#15927](https://github.com/tailwindlabs/tailwindcss/pull/15927))
+- _Upgrade_: Migrate `leading-[1]` to `leading-none` ([#16004](https://github.com/tailwindlabs/tailwindcss/pull/16004))
+- _Upgrade_: Do not migrate arbitrary leading utilities to bare utilities ([#16004](https://github.com/tailwindlabs/tailwindcss/pull/16004))
 
 ## [4.0.0] - 2025-01-21
 

packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts

@@ -32,6 +32,11 @@ test.each([
   // generates something. Converting it to `text-1/2` doesn't produce anything.
   ['text-[1/2]', 'text-[1/2]'],
 
+  // Leading is special, because `leading-[123]` is the direct value of 123, but
+  // `leading-123` maps to `calc(--spacing(123))`.
+  ['leading-[1]', 'leading-none'],
+  ['leading-[123]', 'leading-[123]'],
+
   ['data-[selected]:flex', 'data-selected:flex'],
   ['data-[foo=bar]:flex', 'data-[foo=bar]:flex'],
 

packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.ts

@@ -64,6 +64,23 @@ export function arbitraryValueToBareValue(
       clone.value?.kind === 'arbitrary' &&
       clone.value.dataType === null
     ) {
+      if (clone.root === 'leading') {
+        // leading-[1] -> leading-none
+        if (clone.value.value === '1') {
+          changed = true
+          clone.value = {
+            kind: 'named',
+            value: 'none',
+            fraction: null,
+          }
+        }
+
+        // Keep leading-[<number>] as leading-[<number>]
+        else {
+          continue
+        }
+      }
+
       let parts = segment(clone.value.value, '/')
       if (parts.every((part) => isPositiveInteger(part))) {
         changed = true