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

Handle variants on complex selectors #9262

Merged
merged 2 commits into from Sep 6, 2022

Conversation

thecrypticace
Copy link
Contributor

For a utility .foo.bar we would replace the candidate class in-place. This resulted in a problem where we'd produce something like the following for peer-checked:bar:

.foo.peer:checked ~ .peer-checked\:bar {
    /* ... */
}

This is obviously a mistake as it completely mangles the original meaning of the selector. This PR fixes this.

Fixes #9056


This, however, opens an interesting question:

When given a utility like .foo .bar the replacement is fairly simple for either hover:foo or hover:bar. But what about group-hover:foo, peer-checked:foo, group-hover:bar, and peer-checked:bar?

With this there are obvious interpretations for foo but not necessarily so for bar:

/* Given the utility */
.foo .bar { color: red; }

/* obvious interpretations for `foo` */
.group:hover .group-hover\:foo .bar { color: green; }
.peer:checked ~ .peer-checked\:foo .bar { color: green; }

/* ambiguous interpretations for `bar` */
.group:hover .foo .group-hover\:bar { color: green; }
.foo .group:hover .group-hover\:bar { color: green; }

.peer:checked ~ .foo .peer-checked\:bar { color: green; }
.foo .peer:checked ~ .peer-checked\:bar { color: green; }

We've decided that, while it may not suit all use cases, the best way to approach this is to slot in the entire variant selector in the spot where the class candidate is. As such the variants for foo and bar above will produce the following:

.group:hover .group-hover\:foo .bar { color: green; }
.peer:checked ~ .peer-checked\:foo .bar { color: green; }
.foo .group:hover .group-hover\:bar { color: green; }
.foo .peer:checked ~ .peer-checked\:bar { color: green; }

@thecrypticace thecrypticace force-pushed the fix/variants-on-complex-selectors branch from 47cdab5 to 329b500 Compare September 5, 2022 15:45
@thecrypticace thecrypticace force-pushed the fix/variants-on-complex-selectors branch from 329b500 to 1f54c4f Compare September 5, 2022 15:45
@thecrypticace thecrypticace merged commit db50bbb into master Sep 6, 2022
@thecrypticace thecrypticace deleted the fix/variants-on-complex-selectors branch September 6, 2022 16:58
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.

CSS rules of the form .foo.bar don't behave as expected with peer-checked:bar
1 participant