tailwindcss/integrations
Robin Malfait 73628f69f3
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]
2025-10-06 20:04:40 +02:00
..
2025-10-01 11:48:02 -04:00