Fails to compile "expected opening square bracket" with two attribute selectors

[jacobparis]

What version of Tailwind CSS are you using?

Latest Tailwind v3.2.4, reproducible in live playground below.

Reproduction URL
https://play.tailwindcss.com/w66a9h6SsL

Describe your issue

The Tailwind compiler fails with Expected an opening square bracket. when parsing a second attribute selector after one with a value.

The following code attempts to style the element when one of its parents has two attributes. Checking for the presence of two attributes works flawlessly. Checking for the presence of one and the value of the second works great as well. Swapping the order of the attributes breaks the compiler.

• ✅ [data-beta][data-testid]
• ✅ [data-beta][data-testid='test']
• ❌ [data-testid='test'][data-beta]

<ul data-testid="test" data-beta>

  <li class="[[data-beta][data-testid]_&]:bg-violet-500"> This works </li>
  <li class="[[data-beta][data-testid='test']_&]:bg-violet-500"> This works </li>
  <li class="[[data-testid='test'][data-beta]_&]:bg-violet-500"> This breaks </li>
</ul>

[thecrypticace]

Looks like it's picking up [[data-testid='test'][data-beta]_&]:bg-violet-500 and [data-beta]_&]:bg-violet-500 as candidates — the latter of which would produce an invalid selector. I've merged in a fix for this that will be available in the next release. In the mean time you'll be able to test this fix via our insiders build once it's published (takes a few minutes): npm install tailwindcss@insiders

[jacobparis]

Amazing, thank you!