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
This commit is contained in:
parent
125c0891b1
commit
3da9d61371
3 changed files with 24 additions and 0 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue