Skip to content

Commit 601d671

Browse files
RobinMalfaitRobinMalfait
authored
Fix incorrect colors used in pseudo-element (#19184)
This PR essentially reverts #19069 We added the nested `&` inside the `@supports` query when we create fallbacks for color-mix so that devtools (Safari) doesn't freak out. This works in most cases, however, if you have a parent pseudo element like `::before`, then the browser will not allow the nested `&` resulting in invalid CSS. This PR means that we go back to the broken devtools experience in Safari, but at least the CSS is valid and works as expected. Fixes: #19183
1 parent a41add9 commit 601d671

File tree

5 files changed

+38
-49
lines changed

5 files changed

+38
-49
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
1313

14-
### Changed
15-
16-
- Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#19178](https://github.com/tailwindlabs/tailwindcss/pull/19178))
17-
1814
### Fixed
1915

2016
- Discard candidates with an empty data type ([#19172](https://github.com/tailwindlabs/tailwindcss/pull/19172))
2117
- Fix canonicalization of arbitrary variants with attribute selectors ([#19176](https://github.com/tailwindlabs/tailwindcss/pull/19176))
18+
- Fix invalid colors due to nested `&` ([#19184](https://github.com/tailwindlabs/tailwindcss/pull/19184))
19+
20+
### Changed
21+
22+
- Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#19178](https://github.com/tailwindlabs/tailwindcss/pull/19178))
2223

2324
## [4.1.15] - 2025-10-20
2425

‎integrations/cli/index.test.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1901,9 +1901,7 @@ test(
19011901
::placeholder {
19021902
color: currentcolor;
19031903
@supports (color: color-mix(in lab, red, red)) {
1904-
& {
1905-
color: color-mix(in oklab, currentcolor 50%, transparent);
1906-
}
1904+
color: color-mix(in oklab, currentcolor 50%, transparent);
19071905
}
19081906
}
19091907
}
@@ -1946,9 +1944,7 @@ test(
19461944
.bg-red-500\\/50 {
19471945
background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
19481946
@supports (color: color-mix(in lab, red, red)) {
1949-
& {
1950-
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1951-
}
1947+
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
19521948
}
19531949
}
19541950
.shadow-md {

‎packages/tailwindcss/src/ast.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -601,9 +601,7 @@ export function optimizeAst(
601601
...declaration,
602602
value: ValueParser.toCss(ast),
603603
}
604-
let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [
605-
rule('&', [declaration]),
606-
])
604+
let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [declaration])
607605
colorMixQuery.src = declaration.src
608606
parent.splice(idx, 1, fallback, colorMixQuery)
609607
}

‎packages/tailwindcss/src/compat/plugin-api.test.ts‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -299,9 +299,7 @@ describe('theme', async () => {
299299
.variable {
300300
color: #ef4444;
301301
@supports (color: color-mix(in lab, red, red)) {
302-
& {
303-
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
304-
}
302+
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
305303
}
306304
}
307305
"
@@ -379,9 +377,7 @@ describe('theme', async () => {
379377
.css-variable {
380378
color: rgba(255 0 0 / <alpha-value>);
381379
@supports (color: color-mix(in lab, red, red)) {
382-
& {
383-
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
384-
}
380+
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
385381
}
386382
}
387383
.js-fraction {
@@ -393,9 +389,7 @@ describe('theme', async () => {
393389
.js-variable {
394390
color: rgb(255 0 0 / 1);
395391
@supports (color: color-mix(in lab, red, red)) {
396-
& {
397-
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
398-
}
392+
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
399393
}
400394
}
401395
"

‎packages/tailwindcss/src/source-maps/source-map.test.ts‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -265,33 +265,33 @@ test('source maps trace back to @import location', async ({ expect }) => {
265265
'preflight.css: 118:4-18 <- 293:2-16',
266266
'preflight.css: 119:6-25 <- 294:4-61',
267267
'preflight.css: 120:6-53 <- 294:4-61',
268-
'preflight.css: 122:10-67 <- 294:4-61',
269-
'preflight.css: 127:2-11 <- 302:0-9',
270-
'preflight.css: 128:4-20 <- 303:2-18',
271-
'preflight.css: 130:2-30 <- 310:0-28',
272-
'preflight.css: 131:4-28 <- 311:2-26',
273-
'preflight.css: 133:2-32 <- 319:0-30',
274-
'preflight.css: 134:4-19 <- 320:2-17',
275-
'preflight.css: 135:4-23 <- 321:2-21',
276-
'preflight.css: 137:2-26 <- 328:0-24',
277-
'preflight.css: 138:4-24 <- 329:2-22',
278-
'preflight.css: 140:2-41 <- 336:0-39',
279-
'preflight.css: 141:4-14 <- 337:2-12',
280-
'preflight.css: 143:2-329 <- 340:0-348:39',
281-
'preflight.css: 144:4-20 <- 349:2-18',
282-
'preflight.css: 146:2-38 <- 356:0-36',
283-
'preflight.css: 147:4-18 <- 357:2-16',
284-
'preflight.css: 149:2-19 <- 364:0-17',
285-
'preflight.css: 150:4-20 <- 365:2-18',
286-
'preflight.css: 152:2-96 <- 372:0-374:23',
287-
'preflight.css: 153:4-22 <- 375:2-20',
288-
'preflight.css: 155:2-59 <- 382:0-383:28',
289-
'preflight.css: 156:4-16 <- 384:2-14',
290-
'preflight.css: 158:2-47 <- 391:0-45',
291-
'preflight.css: 159:4-28 <- 392:2-26',
292-
'index.css: 162:0-16 <- 5:0-42',
293-
'input.css: 163:0-5 <- 3:0-5',
294-
'input.css: 164:2-33 <- 4:9-18',
268+
'preflight.css: 121:8-65 <- 294:4-61',
269+
'preflight.css: 125:2-11 <- 302:0-9',
270+
'preflight.css: 126:4-20 <- 303:2-18',
271+
'preflight.css: 128:2-30 <- 310:0-28',
272+
'preflight.css: 129:4-28 <- 311:2-26',
273+
'preflight.css: 131:2-32 <- 319:0-30',
274+
'preflight.css: 132:4-19 <- 320:2-17',
275+
'preflight.css: 133:4-23 <- 321:2-21',
276+
'preflight.css: 135:2-26 <- 328:0-24',
277+
'preflight.css: 136:4-24 <- 329:2-22',
278+
'preflight.css: 138:2-41 <- 336:0-39',
279+
'preflight.css: 139:4-14 <- 337:2-12',
280+
'preflight.css: 141:2-329 <- 340:0-348:39',
281+
'preflight.css: 142:4-20 <- 349:2-18',
282+
'preflight.css: 144:2-38 <- 356:0-36',
283+
'preflight.css: 145:4-18 <- 357:2-16',
284+
'preflight.css: 147:2-19 <- 364:0-17',
285+
'preflight.css: 148:4-20 <- 365:2-18',
286+
'preflight.css: 150:2-96 <- 372:0-374:23',
287+
'preflight.css: 151:4-22 <- 375:2-20',
288+
'preflight.css: 153:2-59 <- 382:0-383:28',
289+
'preflight.css: 154:4-16 <- 384:2-14',
290+
'preflight.css: 156:2-47 <- 391:0-45',
291+
'preflight.css: 157:4-28 <- 392:2-26',
292+
'index.css: 160:0-16 <- 5:0-42',
293+
'input.css: 161:0-5 <- 3:0-5',
294+
'input.css: 162:2-33 <- 4:9-18',
295295
])
296296
})
297297

0 commit comments

Comments
 (0)