[v3] Double quotes break arbitrary variants

[GitMazzone]

What version of Tailwind CSS are you using?

v3.4.3

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

Just using Tailwind CLI

What version of Node.js are you using?

v18.17.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Link to Tailwind Play

Describe your issue

I found that while trying to use an arbitrary selector (to choose a child by role attribute) you must use single quotes. Double quotes break the selector.

[wongjn]

You can use double quotes, as long as you don't use double-quotes for the class attribute quotes. This is because the browser would see the matching double-quote as closing the attribute value. Alternatively, you can also use no quotes at all. Tailwind Play examples.

[adamwathan]

As @wongjn mentioned, the browser isn't able to parse your HTML correctly because you are trying to nest double quotes:

It thinks you're writing this:

<div
  class="[&_[role="
  separator"]]:bg-green-500"
>

...and sees "&_[role=" as the entire class attribute, because the quote after role= is treated as the closing quote for the class attribute.