Specific group-has- utility with hyphenated modifier doesn't render CSS

[benface]

What version of Tailwind CSS are you using?

v3.4.1

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind Play

What version of Node.js are you using?

Tailwind Play

What browser are you using?

Any

What operating system are you using?

Any

Reproduction URL

https://play.tailwindcss.com/dVDTGsBgzE

Describe your issue

The class group-has-[[data-test=test]]/test-modifier:block doesn't render any CSS, though it appears valid (at least according to the intellisense). Interestingly, if you do any of the following, then it works:

• remove the hyphen from the modifier (e.g. /test instead of /test-modifier)
• remove the value from the data attribute (e.g. [data-test])
• add any selector after the data attribute one (e.g. [data-test=test]:checked)

[RobinMalfait]

Hey!

Right now the has variant doesn't accept a modifier (what do you expect it to do?). In case of group-has-*/modifier-name the modifier-name belongs to the group part so that you can use a different group with a different name.

What is the goal of the modifier in this case?

[benface]

Sorry @RobinMalfait, I simplified the reproducible case too much. 😅 Updated my first post.

[RobinMalfait]

This should be fixed by #13303, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.