State Variant with Responsive Prefix does not work with group-hover

[georgeboot]

Steps to reproduce

Create element

Create an element with:

<div class="group bg-red p-8">
    <div class="hidden md:group-hover:block bg-blue p-4">
        Only visible when group is hovered
    </div>
</div>

Enable group-hover state variant

Enable the group-hover state variant to the display module and compile

module.exports = {
    // ...
    
    modules: {
        // ...
        
        display: ['responsive', 'group-hover'],
        
        // ...
    }
    
    // ...
}l

Test

Test. It won't work. It only works without the responsive prefix: group-hover:block

[adamwathan]

Copying this over from duplicate issue #468 so I can close that one.

---

Right now if you have responsive and group-hover variants enabled for a module, you'll get selectors like:

@media (min-width: 768px) {
  .md\:group:hover .group-hover\:bg-blue {
    background-color: blue
  }
}

I think I expect this instead:

@media (min-width: 768px) {
  .group:hover .md\:group-hover\:bg-blue {
    background-color: blue
  }
}

...or maybe even this:

@media (min-width: 768px) {
  .md\:group:hover .md\:group-hover\:bg-blue {
    background-color: blue
  }
}

This turns out to be really hard to solve based on how we currently generate responsive variants — it's a second step later in the build after generating regular variants.

I'm not sure what the best solution is here, but it reminded me that I've been thinking about making the "responsive + state" variants more explicit, so I wanted to document that idea for future reference.

Basically, instead of this automatically generating responsive hover utilities:

backgroundColors: ['responsive', 'hover'],

...we'd add a third variant you could use to generate them explicitly:

backgroundColors: ['responsive', 'hover', 'responsive-hover'],

This should give us more control over how responsive variants are generated for each existing variant type, making it easier to solve the responsive-group-hover problem.

It would be a breaking change but not too annoying to update for; you'd just need to update the variant lists in the modules section of your config to add all of the new explicit variants.

I'm thinking I'd make it the job of each variant to generate the media query + completed class name, and add a new step in the build where all of the media queries get grouped, rather than generating the media queries and grouping them in the same step. That would give each variant generator complete control over how the responsive selectors are generated.

I'll have to think through if it makes sense to group all media queries (even those written by the user and not generated by Tailwind); I'm thinking "no" but if that's the case I'll need to come up with some sort of special internal marker we can use to mark the media queries that should be grouped.