Named group with arbitrary data attribute + :not selector does compile

[giliamverheide]

What version of Tailwind CSS are you using?

v3.3.3

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

Next.js ^13.4.8

What version of Node.js are you using?

v18.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/l7Nm5mQ1jL

Describe your issue

Using a named group (group/*) and targeting an arbitrary value, in combination with the :not() selector does not compile the expected class according to IntelliSense.

❌ Consider the following code:

<div class="group/parent" data-can-play>
  <div class="bg-blue-300 group-[[data-can-play]:not([data-playing])]/parent:bg-red-300 p-4 w-60">
    Should be red
  </div>
</div>

❌ Which should compile to, but does not (this is the class IntelliSense reports on hover):

.group\/parent[data-can-play]:not([data-playing]) .group-\[\[data-can-play\]\:not\(\[data-playing\]\)\]\/parent\:bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}

Please see the Tailwind Play link above and view the generated CSS to confirm. If you copy above class and apply it directly via the browser inspector you will see the class itself works, it just doesn't compile.

✅ The same block without using a name group, works (compiles) as expected:

<div class="group" data-can-play>
  <div class="bg-blue-300 group-[[data-can-play]:not([data-playing])]:bg-red-300 p-4 w-60">
    Should be red
  </div>
</div>

✅ Which should compile to, and does (this is the class IntelliSense reports on hover):

.group[data-can-play]:not([data-playing]) .group-\[\[data-can-play\]\:not\(\[data-playing\]\)\]\:bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}

The Tailwind Play link contains a few more test cases.

[RobinMalfait]

Hey!

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

You can try it in a few minutes by using the insiders build npm install tailwindcss@insiders.