From 3da9d61371809034353f793dde54b22fa666d327 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 29 Jan 2025 15:22:13 +0100
Subject: [PATCH] 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: https://github.com/tailwindlabs/tailwindcss/issues/15924
---
 CHANGELOG.md                                    |  2 ++
 .../arbitrary-value-to-bare-value.test.ts       |  5 +++++
 .../codemods/arbitrary-value-to-bare-value.ts   | 17 +++++++++++++++++
 3 files changed, 24 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47b091112da5..14e0f19fb6a7 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts
index 62355dc6f3f1..c9b459d84b6b 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.test.ts
+++ b/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'],
 
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.ts b/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.ts
index 77a303dc3d96..64c06a8f3ea9 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/arbitrary-value-to-bare-value.ts
+++ b/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