Skip to content

Commit 73628f6

Browse files
RobinMalfaitRobinMalfait
authored
Fix Safari devtools issues because of nested @supports at-rules without normal rule (#19069)
This PR fixes a weird Safari rendering bug in the devtools. This seems to be happening when using `@supports`, especially nested `@supports` at-rules. The issue is that our color-mix fallback generates declarations directly in `@supports` at-rules which causes the weird rendering bug in Safari. Adding this intermediate `&` rule seems to fix the issue. This is a workaround for a browser bug, but the additional 3 characters shouldn't be the end of the world. ## Test plan 1. Updated the tests with the new `& { }` intermediate rule 2. Other tests still pass as expected | Before | After | | --- | --- | | <img width="450" height="549" alt="image" src="https://github.com/user-attachments/assets/4b51fb93-8073-4414-8139-dec75e6bc086" /> | <img width="448" height="548" alt="image" src="https://github.com/user-attachments/assets/1016af67-c1eb-43dc-9554-158e7e2264c4" /> | Fixes: #19065 [ci-all]
1 parent 49948d0 commit 73628f6

File tree

5 files changed

+49
-33
lines changed

5 files changed

+49
-33
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ 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+
### Fixed
15+
16+
- Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](https://github.com/tailwindlabs/tailwindcss/pull/19069))
17+
1418
## [4.1.14] - 2025-10-01
1519

1620
### Fixed

‎integrations/cli/index.test.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1901,7 +1901,9 @@ test(
19011901
::placeholder {
19021902
color: currentcolor;
19031903
@supports (color: color-mix(in lab, red, red)) {
1904-
color: color-mix(in oklab, currentcolor 50%, transparent);
1904+
& {
1905+
color: color-mix(in oklab, currentcolor 50%, transparent);
1906+
}
19051907
}
19061908
}
19071909
}
@@ -1944,7 +1946,9 @@ test(
19441946
.bg-red-500\\/50 {
19451947
background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
19461948
@supports (color: color-mix(in lab, red, red)) {
1947-
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1949+
& {
1950+
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
1951+
}
19481952
}
19491953
}
19501954
.shadow-md {

‎packages/tailwindcss/src/ast.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -662,7 +662,9 @@ export function optimizeAst(
662662
...declaration,
663663
value: ValueParser.toCss(ast),
664664
}
665-
let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [declaration])
665+
let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [
666+
rule('&', [declaration]),
667+
])
666668
colorMixQuery.src = declaration.src
667669
parent.splice(idx, 1, fallback, colorMixQuery)
668670
}

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,9 @@ describe('theme', async () => {
299299
.variable {
300300
color: #ef4444;
301301
@supports (color: color-mix(in lab, red, red)) {
302-
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
302+
& {
303+
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
304+
}
303305
}
304306
}
305307
"
@@ -377,7 +379,9 @@ describe('theme', async () => {
377379
.css-variable {
378380
color: rgba(255 0 0 / <alpha-value>);
379381
@supports (color: color-mix(in lab, red, red)) {
380-
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
382+
& {
383+
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
384+
}
381385
}
382386
}
383387
.js-fraction {
@@ -389,7 +393,9 @@ describe('theme', async () => {
389393
.js-variable {
390394
color: rgb(255 0 0 / 1);
391395
@supports (color: color-mix(in lab, red, red)) {
392-
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
396+
& {
397+
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
398+
}
393399
}
394400
}
395401
"

‎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: 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',
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',
295295
])
296296
})
297297

0 commit comments

Comments
 (0)