Adding custom utilities that use :where() selector, generates empty CSS selector when used with a responsive prefix

[saadeghi]

What version of Tailwind CSS are you using?

3.1.8

Reproduction URL

https://play.tailwindcss.com/6lUxA2zYzo?file=config

Describe your issue

This works:

<div class="sm:make-it-red">

addUtilities({
  '.make-it-red': {
    backgroundColor: 'red',
  },
}),{
  variants: ["responsive"],
}

But this doesn't work:

<div class="sm:make-it-pink">

addUtilities({
  ':where(.make-it-pink)': {
    backgroundColor: 'hotpink',
  },
}),{
  variants: ["responsive"],
}

Expected CSS:

@media (min-width: 640px) {
  .sm\:make-it-red {
    background-color: red
  }

   :where(.sm\:make-it-pink){
    background-color: hotpink
  }
}

Generated CSS:

@media (min-width: 640px) {
  .sm\:make-it-red {
    background-color: red
  }

   {
    background-color: hotpink
  }
}

As you can see here it generates empty selector name.

I wonder if there's a way to make it work to have :where() selectors with responsive prefixes.

[thecrypticace]

Hey! Thanks for the report. I've merged in the fix for this.

The gist of the problem here is that we remove unrelated selectors that they appear with e.g. sm:foo matching against the utility .foo, .bar { … } as we only want the produced rule to contain .sm\:foo { … } and not .sm\:foo, .bar { … }. Because of this we were doing a top-level check on the selector and throwing out anything that wasn't a class node matching the utility. We now do this by finding the class anywhere in the simple selector rather than assuming it's at the top-level.

This'll go in the next tagged release (it should go in insiders too but they're a bit broken at the moment due to an unrelated release workflow problem).