Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Eliminate irrelevant rules when applying variants #12113

Merged
merged 2 commits into from
Sep 29, 2023

Conversation

thecrypticace
Copy link
Contributor

When adding utilities or components with a top-level at-rule we capture that entire object as the relevant thing for each of the candidates. We then do selector and rule elimination after the fact — especially as it relates to applying variants.

Take the HTML:

<div class="md:w-full"></div> 

And this plugin:

addUtilities({
  '@supports (foo: bar)': {
    // This doesn't contain `w-full` so it should not exist in the output
    '.outer': { color: 'red' },
    '.outer:is(.w-full)': { color: 'green' },
  },
})

With this we would look at .outer and eliminate any selectors that do not contain .w-full — which is all of them. This meant that we would try to output a rule without a selector. Oops.

Instead, we should eliminate any selectors that are not applicable and then, if the list becomes empty, eliminate that rule entirely.

Fixes #12111

@thecrypticace thecrypticace merged commit 5542340 into master Sep 29, 2023
10 checks passed
@thecrypticace thecrypticace deleted the fix/variant-irrelevant-rules branch September 29, 2023 20:31
thecrypticace added a commit that referenced this pull request Oct 23, 2023
* Eliminate irrelevant rules when applying variants

* Update changelog
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.

Combination of TW JS based config and a class causes malformed CSS
1 participant