Skip to content

Conversation

RobinMalfait
Copy link
Member

This PR will fix an issue where some code never got generated.

E.g.:

@layer base {
  div:not(.foo) {
    background-color: pink;
  }
}
<div>I am a div</div>

You would expect that this div has a background color of pink, but that's not the case because we never generated the above css. This is because it contains a class that doesn't exist and therefore we never generated it.
It could happen that you forget about this code, and all of a sudden you use .foo in an unrelated spot. This means that all of a sudden this code doess get generated and now your div is pink.

This PR will fix that by making sure that this gets generated. We already generate non "on-demandable" code (always). For example div {} will always be generated.
To fix this, we ignore everything inside the :not when extracting classes, this results in div {} and doesn't contain any classes thus we generate it. Note, removal of :not() only happens when extract classes, the final result still contains the :not.

Fixes: #7750

@RobinMalfait RobinMalfait requested a review from adamwathan March 11, 2022 12:31
@RobinMalfait RobinMalfait merged commit 48728ed into master Mar 17, 2022
@RobinMalfait RobinMalfait deleted the fix-unrecognized-not-selector branch March 17, 2022 15:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Not recognizing selector:not(.class-name) unless class-name exists in content
1 participant