Parent state based modifier without group namespace (in-*)

[eloyesp]

I'm thinking on adding a new "namespace" lets say, for some selectors that usually makes more sense to write as a "group", but using the group adds to much noise, the idea would be to replace:

 <!-- this -->
<div class="size-10 bg-red-600 group" aria-busy="true">
  <svg class="group-aria-busy:animate-spin size-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
</div>
 <!-- with this: -->
<div class="size-10 bg-green-600" aria-busy="true">
    <svg class="in-aria-busy:animate-spin size-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
</div>

See on play

Aria-busy is a good example, because it is applied to the live container (that is not always the one you want to style), but other arbitrary styles like: ´in-[.active]´ could solve issues like this one with ease.

[eloyesp]

Forgot to mentions the pros and cons:

• the bad thing is that it adds more variants, that is more to learn, and, also, that dev groups that use one and the other will get duplicated css.
• one good thing is that it removes most cases of nested groups
• generated css is shorter
• the variants without groups can be moved around without many side-effects (moving around groups could affect other groups).

[eloyesp]

It's implemented in v4!!!!!