Support built-in variants for utilities that include pseudo-elements #970
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.
This PR tries to improve the behavior of our built-in
hover
,active
,focus
, andfocus-within
variant plugins to handle utilities that include pseudo-elements more gracefully.Prior to this PR, this code:
...would generate this CSS:
Notice that the
::placeholder
pseudo-element is completely gone in thefocus
variant.This PR changes this behavior to create this output:
This feels much more correct to me at least in this situation, but there is a concern that for some reason using some pseudo-element, someone might actually want this sort of output:
...where the hover pseudo-class is added to the pseudo-element itself, rather than the element to which the pseudo-element belongs.
I'm not convinced it's worth trying to solve that problem right now as I don't believe it's possible to give the end user control over how this works without introducing a breaking change, but the new behavior in this PR certainly feels like an improvement over what is currently completely broken.
One thing to note is that the specifics of this implementation actually cause all classes in a selector to receive the pseudo-class prefix:
I don't really want people to depend on this and consider it undefined behavior, but can't decide if it's worth trying to detect and throwing an explicit error, mostly because I'm unsure exactly what the heuristic would be for "this is weird don't do this". Would it be any selector that includes multiple classes? An element + a class?
Also, anyone who has authored a variant plugin (like for
disabled
or something) may want to update their own implementations to behave the way this PR behaves, which makes me wonder if I should try to implement this in a way that makes that automatic, although I'm pretty convinced that couldn't be done in a non-hacky non-bandaid-y way.Feedback from variant plugin authors on this PR overall would be appreciated.