Add new in-* variant
#15025
Merged
Add new in-* variant
#15025
Conversation
This file contains 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
RobinMalfait
force-pushed
the
feat/in-variant
branch
2 times, most recently
from
93af82b to
a7feae7
Compare
RobinMalfait
commented
Nov 18, 2024
|
|
||
| // Replace `&` in target variant with `*`, so variants like `&:hover` | ||
| // become `:where(*:hover) &`. The `*` will often be optimized away. | ||
| node.selector = `:where(${node.selector.replaceAll('&', '*')}) &` |
There was a problem hiding this comment.
This is basically the same implementation as the has-* variant, but the selector is a bit different.
thecrypticace
requested changes
Nov 18, 2024
thecrypticace
previously approved these changes
Nov 18, 2024
RobinMalfait
force-pushed
the
feat/in-variant
branch
2 times, most recently
from
cbff570 to
b189e55
Compare
RobinMalfait
dismissed
thecrypticace’s stale review
Removed codemods for migrating group-[]:flex until we handle prefixes
Co-authored-by: Eloy Espinaco <eloyesp@gmail.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Because this requires prefixing the `.group` if the prefix is configured.
RobinMalfait
force-pushed
the
feat/in-variant
branch
from
b189e55 to
4508b79
Compare
philipp-spiess
approved these changes
Nov 18, 2024
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.
This PR adds a new
in-*variant that allows you to apply utilities when you are in a certain selector.While doing research for codemods, we notice that some people use
group-[]:flex(yep, the arbitrary value is empty…). The idea behind is that people want to know if you are in a.groupor not.Similarly, some people use
group-[]/name:flexto know when you are in a.group/nameclass or not.This new
in-*variant allows you to do that without any hacks.If you want to check whether you are inside of a
ptag, then you can writein-[p]:flex. If you want to check that you are inside of a.group, you can writein-[.group].This variant is also a compound variant, which means that you can write
in-data-visible:flexwhich generates the following CSS:This variant also compounds with
not-*, for example:not-in-[.group]:flex.Additionally, this PR also includes a codemod to convert
group-[]:flextoin-[.group]:flex.This was proposed before for v3 in #13912