ensure existing spaces in attribute selector are valid

If you inject existing spaces in the attribute selector, then invalid
CSS was generated. Lightning CSS itself throws it out, but if you are in
an environment where Lightning CSS doesn't run then invalid CSS exists
in your final CSS file.

This fixes that by ensuring that the spaces around the `=` don't cause
any issues.

Author: RobinMalfait

packages/tailwindcss/src/variants.test.ts

@@ -1985,6 +1985,7 @@ test('aria', async () => {
       'aria-checked:flex',
       'aria-[invalid=spelling]:flex',
       'aria-[valuenow=1]:flex',
+      'aria-[valuenow_=_"1"]:flex',
 
       'group-aria-[modal]:flex',
       'group-aria-checked:flex',
@@ -2059,6 +2060,10 @@ test('aria', async () => {
 
     .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] {
       display: flex;
+    }
+
+    .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow="1"] {
+      display: flex;
     }"
   `)
   expect(await run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('')
@@ -2069,6 +2074,7 @@ test('data', async () => {
     await run([
       'data-disabled:flex',
       'data-[potato=salad]:flex',
+      'data-[potato_=_"salad"]:flex',
       'data-[foo=1]:flex',
       'data-[foo=bar_baz]:flex',
       "data-[foo$='bar'_i]:flex",
@@ -2155,6 +2161,10 @@ test('data', async () => {
       display: flex;
     }
 
+    .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato="salad"] {
+      display: flex;
+    }
+
     .data-\\[foo\\=1\\]\\:flex[data-foo="1"] {
       display: flex;
     }

packages/tailwindcss/src/variants.ts

@@ -901,8 +901,10 @@ export function createVariants(theme: Theme): Variants {
 function quoteAttributeValue(value: string) {
   if (value.includes('=')) {
     value = value.replace(/(=.*)/g, (_fullMatch, match) => {
+      let value = match.slice(1).trim()
+
       // If the value is already quoted, skip.
-      if (match[1] === "'" || match[1] === '"') {
+      if (value[0] === "'" || value[0] === '"') {
         return match
       }