Fix incorrectly generated CSS when using square brackets inside arbitrary properties

[RobinMalfait]

This PR fixes an issue where using square brackets inside arbitrary properties could result in incorrect CSS.

If you have the following class: md:[--bar:theme('spacing[2.5]')]
Then the output looked like this:

@media (min-width: 768px) {
  {
    --bar: 0.625rem;
  }
}

With this fix in place, the output looks like this:

@media (min-width: 768px) {
  .md\:\[--bar\:theme\(\'spacing\[2\.5\]\'\)\] {
    --bar: 0.625rem;
  }
}

Fixes: #11241

[ktmn]

Should it work at play.tailwindcss.com if I set the version to Insiders (b6b3f85)?

Currently I get Error: Invalid empty selector with these classes:

<div class="border p-[--var] [--var:1rem] md:[--var:8rem]">Works</div>
<div class="border p-[--var] [--var:theme(spacing[4])] md:[--var:theme(spacing[32])]">Doesn't</div>