archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix incorrect colors used in pseudo-element (#19184)

Browse Source 
This PR essentially reverts
https://github.com/tailwindlabs/tailwindcss/pull/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
This commit is contained in:
Robin Malfait 2025-10-23 12:07:01 +02:00 committed by GitHub
parent a41add9fab
commit 601d6719f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 38 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -11,14 +11,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
### Changed
- Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#19178](https://github.com/tailwindlabs/tailwindcss/pull/19178))
### Fixed
- Discard candidates with an empty data type ([#19172](https://github.com/tailwindlabs/tailwindcss/pull/19172))
- Fix canonicalization of arbitrary variants with attribute selectors ([#19176](https://github.com/tailwindlabs/tailwindcss/pull/19176))
- Fix invalid colors due to nested `&` ([#19184](https://github.com/tailwindlabs/tailwindcss/pull/19184))
### Changed
- Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#19178](https://github.com/tailwindlabs/tailwindcss/pull/19178))
## [4.1.15] - 2025-10-20

8
integrations/cli/index.test.ts
View File

@ -1901,9 +1901,7 @@ test(
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
& {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
@ -1946,9 +1944,7 @@ test(
.bg-red-500\\/50 {
background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
& {
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
}
.shadow-md {

4
packages/tailwindcss/src/ast.ts
View File

@ -601,9 +601,7 @@ export function optimizeAst(
...declaration,
value: ValueParser.toCss(ast),
}
let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [
rule('&', [declaration]),
])
let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [declaration])
colorMixQuery.src = declaration.src
parent.splice(idx, 1, fallback, colorMixQuery)
}

12
packages/tailwindcss/src/compat/plugin-api.test.ts
View File

@ -299,9 +299,7 @@ describe('theme', async () => {
.variable {
color: #ef4444;
@supports (color: color-mix(in lab, red, red)) {
& {
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
}
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
}
}
"
@ -379,9 +377,7 @@ describe('theme', async () => {
.css-variable {
color: rgba(255 0 0 / <alpha-value>);
@supports (color: color-mix(in lab, red, red)) {
& {
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
}
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
}
}
.js-fraction {
@ -393,9 +389,7 @@ describe('theme', async () => {
.js-variable {
color: rgb(255 0 0 / 1);
@supports (color: color-mix(in lab, red, red)) {
& {
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
}
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
}
}
"

54
packages/tailwindcss/src/source-maps/source-map.test.ts
View File

@ -265,33 +265,33 @@ test('source maps trace back to @import location', async ({ expect }) => {
'preflight.css: 118:4-18 <- 293:2-16',
'preflight.css: 119:6-25 <- 294:4-61',
'preflight.css: 120:6-53 <- 294:4-61',
'preflight.css: 122:10-67 <- 294:4-61',
'preflight.css: 127:2-11 <- 302:0-9',
'preflight.css: 128:4-20 <- 303:2-18',
'preflight.css: 130:2-30 <- 310:0-28',
'preflight.css: 131:4-28 <- 311:2-26',
'preflight.css: 133:2-32 <- 319:0-30',
'preflight.css: 134:4-19 <- 320:2-17',
'preflight.css: 135:4-23 <- 321:2-21',
'preflight.css: 137:2-26 <- 328:0-24',
'preflight.css: 138:4-24 <- 329:2-22',
'preflight.css: 140:2-41 <- 336:0-39',
'preflight.css: 141:4-14 <- 337:2-12',
'preflight.css: 143:2-329 <- 340:0-348:39',
'preflight.css: 144:4-20 <- 349:2-18',
'preflight.css: 146:2-38 <- 356:0-36',
'preflight.css: 147:4-18 <- 357:2-16',
'preflight.css: 149:2-19 <- 364:0-17',
'preflight.css: 150:4-20 <- 365:2-18',
'preflight.css: 152:2-96 <- 372:0-374:23',
'preflight.css: 153:4-22 <- 375:2-20',
'preflight.css: 155:2-59 <- 382:0-383:28',
'preflight.css: 156:4-16 <- 384:2-14',
'preflight.css: 158:2-47 <- 391:0-45',
'preflight.css: 159:4-28 <- 392:2-26',
'index.css: 162:0-16 <- 5:0-42',
'input.css: 163:0-5 <- 3:0-5',
'input.css: 164:2-33 <- 4:9-18',
'preflight.css: 121:8-65 <- 294:4-61',
'preflight.css: 125:2-11 <- 302:0-9',
'preflight.css: 126:4-20 <- 303:2-18',
'preflight.css: 128:2-30 <- 310:0-28',
'preflight.css: 129:4-28 <- 311:2-26',
'preflight.css: 131:2-32 <- 319:0-30',
'preflight.css: 132:4-19 <- 320:2-17',
'preflight.css: 133:4-23 <- 321:2-21',
'preflight.css: 135:2-26 <- 328:0-24',
'preflight.css: 136:4-24 <- 329:2-22',
'preflight.css: 138:2-41 <- 336:0-39',
'preflight.css: 139:4-14 <- 337:2-12',
'preflight.css: 141:2-329 <- 340:0-348:39',
'preflight.css: 142:4-20 <- 349:2-18',
'preflight.css: 144:2-38 <- 356:0-36',
'preflight.css: 145:4-18 <- 357:2-16',
'preflight.css: 147:2-19 <- 364:0-17',
'preflight.css: 148:4-20 <- 365:2-18',
'preflight.css: 150:2-96 <- 372:0-374:23',
'preflight.css: 151:4-22 <- 375:2-20',
'preflight.css: 153:2-59 <- 382:0-383:28',
'preflight.css: 154:4-16 <- 384:2-14',
'preflight.css: 156:2-47 <- 391:0-45',
'preflight.css: 157:4-28 <- 392:2-26',
'index.css: 160:0-16 <- 5:0-42',
'input.css: 161:0-5 <- 3:0-5',
'input.css: 162:2-33 <- 4:9-18',
])
})