fix(s2): Remove all: revert-layer to avoid Safari bugs
#7598
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ktabors
approved these changes
Jan 11, 2025
it comes from storybook |
snowystinger
approved these changes
Jan 12, 2025
| /* This one should work */ | ||
| background: hotpink; | ||
| } | ||
| .unsafe2 { |
There was a problem hiding this comment.
total nit pick, but should this be renamed to unsafe1? just to avoid confusion for people reading the docs that they are missing an example
There was a problem hiding this comment.
it's just story example not docs so probably fine
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Due to several bugs in Safari's implementation of CSS cascade layers, we need to remove
all: revert-layerfrom style macro generated CSS. This was added to prevent global CSS resets from overriding S2 styles. Unfortunately, these bugs prevent us from using this reliably. Instead we will recommend either removing global resets and applying the necessary styles locally, or manually adding your resets into a lower layer. See internal RSP v2 PR for this as well.This also makes the
UNSAFE_overrideslayer we previously recommended unnecessary, because unlayered styles always win over layered ones.You can see several places where I already had to deal with this, e.g. Storybook's default docs CSS winning over ours because it is unlayered. Luckily there is a way to disable that styling.