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 Safari devtools issues because of nested @supports at-rules without normal rule (#19069)

Browse Source 
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]
This commit is contained in:
Robin Malfait 2025-10-06 20:04:40 +02:00 committed by GitHub
parent 49948d087e
commit 73628f69f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -11,6 +11,10 @@ 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))
### Fixed
- Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](https://github.com/tailwindlabs/tailwindcss/pull/19069))
## [4.1.14] - 2025-10-01
### Fixed

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

@ -1901,7 +1901,9 @@ 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);
}
}
}
}
@ -1944,7 +1946,9 @@ 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

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

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

@ -299,7 +299,9 @@ 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);
}
}
}
"
@ -377,7 +379,9 @@ 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 {
@ -389,7 +393,9 @@ 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: 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',
'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',
])
})