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 .group or not.
Similarly, some people use group-[]/name:flex to know when you are in a .group/name class 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 p tag, then you can write in-[p]:flex. If you want to check that you are inside of a .group, you can write in-[.group].
This variant is also a compound variant, which means that you can write in-data-visible:flex which generates the following CSS:
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