Fix Safari devtools issues because of nested `@supports` at-rules without normal `rule` #19069

RobinMalfait · 2025-10-06T17:22:58Z

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

Updated the tests with the new & { } intermediate rule
Other tests still pass as expected

Before	After

Fixes: #19065

[ci-all]

This is not strictly needed to make it work, but without it the Safari devtools show weird results. It is a Safari browser bug, but this is a small enough workaround that it is worth adding ourselves. If we ever handle flattening ourselves, then this could in theory also go away.

thecrypticace · 2025-10-06T17:52:25Z

Have we filed (or found) a webkit bug for this?

RobinMalfait · 2025-10-06T18:04:36Z

I couldn't find one immediately, but will talk to you about this tomorrow 👍

Going to merge this in the meantime.

chasonma · 2025-10-22T01:43:44Z

This change invalidated daisyUI input placeholder color in chrome 141 browser and had to be returned to v4.1.14

RobinMalfait · 2025-10-23T09:48:24Z

@chasonma will be fixed by #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

This PR contains the following updates: | Package | Change | Age | Confidence | |---|---|---|---| | [@tailwindcss/postcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-postcss)) | [`4.1.12` -> `4.1.17`](https://renovatebot.com/diffs/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@tailwindcss%2fpostcss/4.1.17?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>tailwindlabs/tailwindcss (@tailwindcss/postcss)</summary> ### [`v4.1.17`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4117---2025-11-06) [Compare Source](tailwindlabs/tailwindcss@v4.1.16...v4.1.17) ##### Fixed - Substitute `@variant` inside legacy JS APIs ([#19263](tailwindlabs/tailwindcss#19263)) - Prevent occasional crash on Windows when loaded into a worker thread ([#19242](tailwindlabs/tailwindcss#19242)) ### [`v4.1.16`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4116---2025-10-23) [Compare Source](tailwindlabs/tailwindcss@v4.1.15...v4.1.16) ##### Fixed - Discard candidates with an empty data type ([#19172](tailwindlabs/tailwindcss#19172)) - Fix canonicalization of arbitrary variants with attribute selectors ([#19176](tailwindlabs/tailwindcss#19176)) - Fix invalid colors due to nested `&` ([#19184](tailwindlabs/tailwindcss#19184)) - Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#19178](tailwindlabs/tailwindcss#19178)) ### [`v4.1.15`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4115---2025-10-20) [Compare Source](tailwindlabs/tailwindcss@v4.1.14...v4.1.15) ##### Fixed - Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](tailwindlabs/tailwindcss#19069)) - Suppress Lightning CSS warnings about `:deep`, `:slotted`, and `:global` ([#19094](tailwindlabs/tailwindcss#19094)) - Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins ([#19097](tailwindlabs/tailwindcss#19097)) - Allow named groups in combination with `not-*`, `has-*`, and `in-*` ([#19100](tailwindlabs/tailwindcss#19100)) - Prevent important utilities from affecting other utilities ([#19110](tailwindlabs/tailwindcss#19110)) - Don’t index into strings with the `theme(…)` function ([#19111](tailwindlabs/tailwindcss#19111)) - Fix parsing issue when `\t` is used in at-rules ([#19130](tailwindlabs/tailwindcss#19130)) - Upgrade: Canonicalize utilities containing `0` values ([#19095](tailwindlabs/tailwindcss#19095)) - Upgrade: Migrate deprecated `break-words` to `wrap-break-word` ([#19157](tailwindlabs/tailwindcss#19157)) ##### Changed - Remove the `postinstall` script from oxide (\[[#19149](https://github.com/tailwindlabs/tailwindcss/issues/19149)])([#19149](https://github.com/tailwindlabs/tailwindcss/pull/19149)) ### [`v4.1.14`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4114---2025-10-01) [Compare Source](tailwindlabs/tailwindcss@v4.1.13...v4.1.14) ##### Fixed - Handle `'` syntax in ClojureScript when extracting classes ([#18888](tailwindlabs/tailwindcss#18888)) - Handle `@variant` inside `@custom-variant` ([#18885](tailwindlabs/tailwindcss#18885)) - Merge suggestions when using `@utility` ([#18900](tailwindlabs/tailwindcss#18900)) - Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](tailwindlabs/tailwindcss#18905)) - Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](tailwindlabs/tailwindcss#18907)) - Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](tailwindlabs/tailwindcss#18907)) - Prevent duplicate CSS when overwriting a static utility with a theme key ([#18056](tailwindlabs/tailwindcss#18056)) - Show Lightning CSS warnings (if any) when optimizing/minifying ([#18918](tailwindlabs/tailwindcss#18918)) - Use `default` export condition for `@tailwindcss/vite` ([#18948](tailwindlabs/tailwindcss#18948)) - Re-throw errors from PostCSS nodes ([#18373](tailwindlabs/tailwindcss#18373)) - Detect classes in markdown inline directives ([#18967](tailwindlabs/tailwindcss#18967)) - Ensure files with only `@theme` produce no output when built ([#18979](tailwindlabs/tailwindcss#18979)) - Support Maud templates when extracting classes ([#18988](tailwindlabs/tailwindcss#18988)) - Upgrade: Do not migrate `variant = 'outline'` during upgrades ([#18922](tailwindlabs/tailwindcss#18922)) - Upgrade: Show version mismatch (if any) when running upgrade tool ([#19028](tailwindlabs/tailwindcss#19028)) - Upgrade: Ensure first class inside `className` is migrated ([#19031](tailwindlabs/tailwindcss#19031)) - Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#19031](tailwindlabs/tailwindcss#19031)) ### [`v4.1.13`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4113---2025-09-03) [Compare Source](tailwindlabs/tailwindcss@v4.1.12...v4.1.13) ##### Changed - Drop warning from browser build ([#18731](tailwindlabs/tailwindcss#18731)) - Drop exact duplicate declarations when emitting CSS ([#18809](tailwindlabs/tailwindcss#18809)) ##### Fixed - Don't transition `visibility` when using `transition` ([#18795](tailwindlabs/tailwindcss#18795)) - Discard matched variants with unknown named values ([#18799](tailwindlabs/tailwindcss#18799)) - Discard matched variants with non-string values ([#18799](tailwindlabs/tailwindcss#18799)) - Show suggestions for known `matchVariant` values ([#18798](tailwindlabs/tailwindcss#18798)) - Replace deprecated `clip` with `clip-path` in `sr-only` ([#18769](tailwindlabs/tailwindcss#18769)) - Hide internal fields from completions in `matchUtilities` ([#18820](tailwindlabs/tailwindcss#18820)) - Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#18855](tailwindlabs/tailwindcss#18855)) - Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#18869](tailwindlabs/tailwindcss#18869)) - Do not allow custom variants to start or end with a `-` or `_` ([#18867](tailwindlabs/tailwindcss#18867), [#18872](tailwindlabs/tailwindcss#18872)) - Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#18815](tailwindlabs/tailwindcss#18815)) - Upgrade: Migrate `data` theme keys to `@custom-variant` ([#18816](tailwindlabs/tailwindcss#18816)) - Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#18817](tailwindlabs/tailwindcss#18817)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://git.in.csmpro.ru/csmpro/csm-mapban/pulls/28 Co-authored-by: Renovate Bot <renovate@csmpro.ru> Co-committed-by: Renovate Bot <renovate@csmpro.ru>

RobinMalfait added 2 commits October 6, 2025 19:16

update tests to reflect the change

0d2c251

RobinMalfait requested a review from a team as a code owner October 6, 2025 17:22

RobinMalfait added 2 commits October 6, 2025 19:23

update changelog

77fa2db

update CI related tests

232df55

thecrypticace approved these changes Oct 6, 2025

View reviewed changes

RobinMalfait merged commit 73628f6 into main Oct 6, 2025
21 checks passed

RobinMalfait deleted the fix/issue-19065 branch October 6, 2025 18:04

This was referenced Oct 20, 2025

chore(deps): update dependency tailwindcss to 4.1.17 stacksjs/headwind#8

Open

chore(deps): update all non-major dependencies stacksjs/headwind#5

Closed

fossabot bot mentioned this pull request Oct 21, 2025

build(deps-dev): Bump tailwindcss from 4.1.13 to 4.1.15 blinklabs-io/utxorpc-example#240

Merged

benjamincanac mentioned this pull request Oct 22, 2025

Tailwind colormix issue nuxt/ui#5286

Closed

wongjn mentioned this pull request Oct 23, 2025

[tailwindcss/vite@4.1.15] Color regression in dev #19183

Closed

RobinMalfait mentioned this pull request Oct 23, 2025

Fix incorrect colors used in pseudo-element #19184

Merged

fossabot bot mentioned this pull request Oct 25, 2025

chore(deps-dev): bump tailwindcss from 3.4.18 to 4.1.16 WhizUs-Labs/kcd-showcase-trw-demo-app#28

Closed

This was referenced Oct 28, 2025

chore(deps): update all non-major dependencies stacksjs/headwind#9

Closed

chore(deps): update all non-major dependencies stacksjs/headwind#10

Closed

chore(deps): update all non-major dependencies stacksjs/headwind#11

Closed

chrisbbreuer mentioned this pull request Nov 5, 2025

chore(deps): update all non-major dependencies stacksjs/headwind#12

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Fix Safari devtools issues because of nested `@supports` at-rules without normal `rule` #19069

Fix Safari devtools issues because of nested `@supports` at-rules without normal `rule` #19069

RobinMalfait commented Oct 6, 2025 •

edited

Loading

Uh oh!

thecrypticace commented Oct 6, 2025

Uh oh!

RobinMalfait commented Oct 6, 2025

Uh oh!

Uh oh!

chasonma commented Oct 22, 2025

Uh oh!

RobinMalfait commented Oct 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Fix Safari devtools issues because of nested @supports at-rules without normal rule #19069

Fix Safari devtools issues because of nested @supports at-rules without normal rule #19069

Conversation

RobinMalfait commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test plan

Uh oh!

thecrypticace commented Oct 6, 2025

Uh oh!

RobinMalfait commented Oct 6, 2025

Uh oh!

Uh oh!

chasonma commented Oct 22, 2025

Uh oh!

RobinMalfait commented Oct 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix Safari devtools issues because of nested `@supports` at-rules without normal `rule` #19069

Fix Safari devtools issues because of nested `@supports` at-rules without normal `rule` #19069

RobinMalfait commented Oct 6, 2025 •

edited

Loading