tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Forward modifier from `has-*` and `not-*` variants to compounded variant

Open RobinMalfait opened this issue 1 year ago • 0 comments

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-*

RobinMalfait avatar Nov 09 '24 14:11 RobinMalfait