tailwindcss
tailwindcss copied to clipboard
Forward modifier from `has-*` and `not-*` variants to compounded variant
This PR fixes an issue where using a modifier in combination with has-* or not-* doesn't work as expected.
If you have the following HTML:
<div class="group/parent" data-visible="">
<div class="group-data-visible/parent:text-red-500"></div>
</div>
Then the following CSS is generated:
.group-data-visible\/parent\:text-red-500:is(:where(.group\/parent)[data-visible] *) {
color: var(--color-red-500);
}
But if you want to use it with not-*, then nothing is being generated:
<div class="group/parent" data-visible="">
<div class="not-group-data-visible/parent:text-red-500"></div>
</div>
/* <EMPTY> */
But with this PR, we will forward the modifier parent from the not variant, to the group variant, so the following CSS is generated:
.not-group-data-visible\\/parent\\:text-red-500:not(:where(.group\\/parent)[data-visible] *) {
color: var(--color-red-500);
}
This is also implemented for has-*