Skip to content

Commit 71c24fe

Browse files
adamwathanadamwathan
authored
Merge branch 'next' into robin/ensure_existing_spaces_in_attribute_selector_are_valid
2 parents 405015f + edb066e commit 71c24fe

File tree

4 files changed

+108
-55
lines changed

4 files changed

+108
-55
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Added
1111

1212
- Add first draft of new wide-gamut color palette ([#14693](https://github.com/tailwindlabs/tailwindcss/pull/14693))
13+
- Support linear gradient angles as bare values ([#14707](https://github.com/tailwindlabs/tailwindcss/pull/14707))
14+
- Interpolate gradients in OKLCH by default ([#14708](https://github.com/tailwindlabs/tailwindcss/pull/14708))
1315
- _Upgrade (experimental)_: Migrate `theme(…)` calls to `var(…)` or to the modern `theme(…)` syntax ([#14664](https://github.com/tailwindlabs/tailwindcss/pull/14664), [#14695](https://github.com/tailwindlabs/tailwindcss/pull/14695))
1416

1517
### Fixed
1618

1719
- Ensure `theme` values defined outside of `extend` in JS configuration files overwrite all existing values for that namespace ([#14672](https://github.com/tailwindlabs/tailwindcss/pull/14672))
18-
- Ensure existing spaces in attribute selectors are valid ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
20+
- Don't generate invalid CSS when attribute selectors in variants contain spaces around the comparison operator ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
21+
- Remove unnecessary variable fallbacks in gradient utilities ([#14705](https://github.com/tailwindlabs/tailwindcss/pull/14705))
1922
- _Upgrade (experimental)_: Speed up template migrations ([#14679](https://github.com/tailwindlabs/tailwindcss/pull/14679))
2023
- _Upgrade (experimental)_: Don't generate invalid CSS when migrating a complex `screens` config ([#14691](https://github.com/tailwindlabs/tailwindcss/pull/14691))
2124

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 48 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9448,6 +9448,8 @@ test('bg', async () => {
94489448
'bg-linear-to-bl',
94499449
'bg-linear-to-l',
94509450
'bg-linear-to-tl',
9451+
'bg-linear-45',
9452+
'-bg-linear-45',
94519453

94529454
'bg-[url(/image.png)]',
94539455
'bg-[url:var(--my-url)]',
@@ -9554,6 +9556,11 @@ test('bg', async () => {
95549556
background-color: #0000;
95559557
}
95569558
9559+
.-bg-linear-45 {
9560+
--tw-gradient-position: calc(45deg * -1) in oklch, ;
9561+
background-image: linear-gradient(var(--tw-gradient-stops));
9562+
}
9563+
95579564
.-bg-linear-\\[1\\.3rad\\] {
95589565
--tw-gradient-position: calc(74.4845deg * -1), ;
95599566
background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
@@ -9565,43 +9572,48 @@ test('bg', async () => {
95659572
}
95669573
95679574
.bg-gradient-to-b {
9568-
--tw-gradient-position: to bottom, ;
9569-
background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
9575+
--tw-gradient-position: to bottom in oklch, ;
9576+
background-image: linear-gradient(var(--tw-gradient-stops));
95709577
}
95719578
95729579
.bg-gradient-to-bl {
9573-
--tw-gradient-position: to bottom left, ;
9574-
background-image: linear-gradient(var(--tw-gradient-stops, to bottom left));
9580+
--tw-gradient-position: to bottom left in oklch, ;
9581+
background-image: linear-gradient(var(--tw-gradient-stops));
95759582
}
95769583
95779584
.bg-gradient-to-br {
9578-
--tw-gradient-position: to bottom right, ;
9579-
background-image: linear-gradient(var(--tw-gradient-stops, to bottom right));
9585+
--tw-gradient-position: to bottom right in oklch, ;
9586+
background-image: linear-gradient(var(--tw-gradient-stops));
95809587
}
95819588
95829589
.bg-gradient-to-l {
9583-
--tw-gradient-position: to left, ;
9584-
background-image: linear-gradient(var(--tw-gradient-stops, to left));
9590+
--tw-gradient-position: to left in oklch, ;
9591+
background-image: linear-gradient(var(--tw-gradient-stops));
95859592
}
95869593
95879594
.bg-gradient-to-r {
9588-
--tw-gradient-position: to right, ;
9589-
background-image: linear-gradient(var(--tw-gradient-stops, to right));
9595+
--tw-gradient-position: to right in oklch, ;
9596+
background-image: linear-gradient(var(--tw-gradient-stops));
95909597
}
95919598
95929599
.bg-gradient-to-t {
9593-
--tw-gradient-position: to top, ;
9594-
background-image: linear-gradient(var(--tw-gradient-stops, to top));
9600+
--tw-gradient-position: to top in oklch, ;
9601+
background-image: linear-gradient(var(--tw-gradient-stops));
95959602
}
95969603
95979604
.bg-gradient-to-tl {
9598-
--tw-gradient-position: to top left, ;
9599-
background-image: linear-gradient(var(--tw-gradient-stops, to top left));
9605+
--tw-gradient-position: to top left in oklch, ;
9606+
background-image: linear-gradient(var(--tw-gradient-stops));
96009607
}
96019608
96029609
.bg-gradient-to-tr {
9603-
--tw-gradient-position: to top right, ;
9604-
background-image: linear-gradient(var(--tw-gradient-stops, to top right));
9610+
--tw-gradient-position: to top right in oklch, ;
9611+
background-image: linear-gradient(var(--tw-gradient-stops));
9612+
}
9613+
9614+
.bg-linear-45 {
9615+
--tw-gradient-position: 45deg in oklch, ;
9616+
background-image: linear-gradient(var(--tw-gradient-stops));
96059617
}
96069618
96079619
.bg-linear-\\[1\\.3rad\\] {
@@ -9614,44 +9626,49 @@ test('bg', async () => {
96149626
background-image: linear-gradient(var(--tw-gradient-stops, 125deg));
96159627
}
96169628
9617-
.bg-linear-\\[to_bottom\\], .bg-linear-to-b {
9629+
.bg-linear-\\[to_bottom\\] {
96189630
--tw-gradient-position: to bottom, ;
96199631
background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
96209632
}
96219633
9634+
.bg-linear-to-b {
9635+
--tw-gradient-position: to bottom in oklch, ;
9636+
background-image: linear-gradient(var(--tw-gradient-stops));
9637+
}
9638+
96229639
.bg-linear-to-bl {
9623-
--tw-gradient-position: to bottom left, ;
9624-
background-image: linear-gradient(var(--tw-gradient-stops, to bottom left));
9640+
--tw-gradient-position: to bottom left in oklch, ;
9641+
background-image: linear-gradient(var(--tw-gradient-stops));
96259642
}
96269643
96279644
.bg-linear-to-br {
9628-
--tw-gradient-position: to bottom right, ;
9629-
background-image: linear-gradient(var(--tw-gradient-stops, to bottom right));
9645+
--tw-gradient-position: to bottom right in oklch, ;
9646+
background-image: linear-gradient(var(--tw-gradient-stops));
96309647
}
96319648
96329649
.bg-linear-to-l {
9633-
--tw-gradient-position: to left, ;
9634-
background-image: linear-gradient(var(--tw-gradient-stops, to left));
9650+
--tw-gradient-position: to left in oklch, ;
9651+
background-image: linear-gradient(var(--tw-gradient-stops));
96359652
}
96369653
96379654
.bg-linear-to-r {
9638-
--tw-gradient-position: to right, ;
9639-
background-image: linear-gradient(var(--tw-gradient-stops, to right));
9655+
--tw-gradient-position: to right in oklch, ;
9656+
background-image: linear-gradient(var(--tw-gradient-stops));
96409657
}
96419658
96429659
.bg-linear-to-t {
9643-
--tw-gradient-position: to top, ;
9644-
background-image: linear-gradient(var(--tw-gradient-stops, to top));
9660+
--tw-gradient-position: to top in oklch, ;
9661+
background-image: linear-gradient(var(--tw-gradient-stops));
96459662
}
96469663
96479664
.bg-linear-to-tl {
9648-
--tw-gradient-position: to top left, ;
9649-
background-image: linear-gradient(var(--tw-gradient-stops, to top left));
9665+
--tw-gradient-position: to top left in oklch, ;
9666+
background-image: linear-gradient(var(--tw-gradient-stops));
96509667
}
96519668
96529669
.bg-linear-to-tr {
9653-
--tw-gradient-position: to top right, ;
9654-
background-image: linear-gradient(var(--tw-gradient-stops, to top right));
9670+
--tw-gradient-position: to top right in oklch, ;
9671+
background-image: linear-gradient(var(--tw-gradient-stops));
96559672
}
96569673
96579674
.bg-\\[image\\:var\\(--my-gradient\\)\\] {

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2516,21 +2516,22 @@ export function createUtilities(theme: Theme) {
25162516
['tl', 'top left'],
25172517
]) {
25182518
staticUtility(`bg-gradient-to-${value}`, [
2519-
['--tw-gradient-position', `to ${direction},`],
2520-
['background-image', `linear-gradient(var(--tw-gradient-stops, to ${direction}))`],
2519+
['--tw-gradient-position', `to ${direction} in oklch,`],
2520+
['background-image', `linear-gradient(var(--tw-gradient-stops))`],
25212521
])
25222522

25232523
staticUtility(`bg-linear-to-${value}`, [
2524-
['--tw-gradient-position', `to ${direction},`],
2525-
['background-image', `linear-gradient(var(--tw-gradient-stops, to ${direction}))`],
2524+
['--tw-gradient-position', `to ${direction} in oklch,`],
2525+
['background-image', `linear-gradient(var(--tw-gradient-stops))`],
25262526
])
25272527
}
25282528

25292529
utilities.functional('bg-linear', (candidate) => {
25302530
if (!candidate.value || candidate.modifier) return
25312531

2532+
let value = candidate.value.value
2533+
25322534
if (candidate.value.kind === 'arbitrary') {
2533-
let value: string | null = candidate.value.value
25342535
let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
25352536

25362537
switch (type) {
@@ -2551,6 +2552,15 @@ export function createUtilities(theme: Theme) {
25512552
]
25522553
}
25532554
}
2555+
} else {
2556+
if (!isPositiveInteger(value)) return
2557+
2558+
value = withNegative(`${value}deg`, candidate)
2559+
2560+
return [
2561+
decl('--tw-gradient-position', `${value} in oklch,`),
2562+
decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
2563+
]
25542564
}
25552565
})
25562566

@@ -2559,7 +2569,7 @@ export function createUtilities(theme: Theme) {
25592569

25602570
if (!candidate.value) {
25612571
return [
2562-
decl('--tw-gradient-position', `initial`),
2572+
decl('--tw-gradient-position', `in oklch,`),
25632573
decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
25642574
]
25652575
}
@@ -2577,8 +2587,8 @@ export function createUtilities(theme: Theme) {
25772587
value = withNegative(`${value}deg`, candidate)
25782588

25792589
return [
2580-
decl('--tw-gradient-position', `from ${value},`),
2581-
decl('background-image', `conic-gradient(var(--tw-gradient-stops,from ${value}))`),
2590+
decl('--tw-gradient-position', `from ${value} in oklch,`),
2591+
decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
25822592
]
25832593
}
25842594
})
@@ -2588,7 +2598,7 @@ export function createUtilities(theme: Theme) {
25882598

25892599
if (!candidate.value) {
25902600
return [
2591-
decl('--tw-gradient-position', `initial`),
2601+
decl('--tw-gradient-position', `in oklch,`),
25922602
decl('background-image', `radial-gradient(var(--tw-gradient-stops))`),
25932603
]
25942604
}

‎packages/tailwindcss/tests/ui.spec.ts‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,24 +30,40 @@ test('touch action', async ({ page }) => {
3030
for (let [classes, expected] of [
3131
[
3232
'bg-linear-to-r from-red',
33-
'linear-gradient(to right, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
33+
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
3434
],
3535
[
3636
'bg-linear-to-r via-red',
37-
'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
37+
'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
38+
],
39+
[
40+
'bg-linear-to-r to-red',
41+
'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)',
3842
],
39-
['bg-linear-to-r to-red', 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)'],
4043
[
4144
'bg-linear-to-r from-red to-blue',
42-
'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
45+
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
46+
],
47+
[
48+
'bg-linear-45 from-red to-blue',
49+
'linear-gradient(45deg in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
50+
],
51+
[
52+
'-bg-linear-45 from-red to-blue',
53+
// Chrome reports a different (but also correct) computed value than Firefox/WebKit so we check
54+
// for both options.
55+
[
56+
'linear-gradient(-45deg in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
57+
'linear-gradient(calc(-45deg) in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
58+
],
4359
],
4460
[
4561
'bg-linear-to-r via-red to-blue',
46-
'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
62+
'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
4763
],
4864
[
4965
'bg-linear-to-r from-red via-green to-blue',
50-
'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
66+
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
5167
],
5268
[
5369
'bg-linear-[to_right,var(--color-red),var(--color-green),var(--color-blue)]',
@@ -60,7 +76,11 @@ for (let [classes, expected] of [
6076
html`<div id="x" class="${classes}">Hello world</div>`,
6177
)
6278

63-
expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
79+
if (Array.isArray(expected)) {
80+
expect(expected).toContain(await getPropertyValue('#x', 'background-image'))
81+
} else {
82+
expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
83+
}
6484
})
6585
}
6686

@@ -71,13 +91,13 @@ test('background gradient, going from 2 to 3', async ({ page }) => {
7191
)
7292

7393
expect(await getPropertyValue('#x', 'background-image')).toEqual(
74-
'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
94+
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
7595
)
7696

7797
await page.locator('#x').hover()
7898

7999
expect(await getPropertyValue('#x', 'background-image')).toEqual(
80-
'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
100+
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
81101
)
82102
})
83103

@@ -92,19 +112,22 @@ test('background gradient, going from 3 to 2', async ({ page }) => {
92112
)
93113

94114
expect(await getPropertyValue('#x', 'background-image')).toEqual(
95-
'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
115+
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
96116
)
97117

98118
await page.locator('#x').hover()
99119

100120
expect(await getPropertyValue('#x', 'background-image')).toEqual(
101-
'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
121+
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
102122
)
103123
})
104124

105125
for (let [classes, expected] of [
106-
['bg-conic from-red', 'conic-gradient(rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
107-
['bg-conic-45 from-red', 'conic-gradient(from 45deg, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
126+
['bg-conic from-red', 'conic-gradient(in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
127+
[
128+
'bg-conic-45 from-red',
129+
'conic-gradient(from 45deg in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
130+
],
108131
[
109132
'bg-conic-[from_45deg] from-red',
110133
'conic-gradient(from 45deg, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
@@ -125,7 +148,7 @@ for (let [classes, expected] of [
125148
}
126149

127150
for (let [classes, expected] of [
128-
['bg-radial from-red', 'radial-gradient(rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
151+
['bg-radial from-red', 'radial-gradient(in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
129152
[
130153
'bg-radial-[at_0%_0%] from-red',
131154
'radial-gradient(at 0% 0%, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',

0 commit comments

Comments
 (0)