Add tests

packages/tailwindcss/src/index.test.ts

@@ -2212,6 +2212,37 @@ describe('@variant', () => {
         }"
       `)
     })
+
+    test('style-rules and at-rules', async () => {
+      let { build } = await compile(css`
+        @variant cant-hover (&:not(:hover), &:not(:active), @media not (any-hover: hover), @media not (pointer: fine));
+
+        @layer utilities {
+          @tailwind utilities;
+        }
+      `)
+      let compiled = build(['cant-hover:focus:underline'])
+
+      expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+        "@layer utilities {
+          :is(.cant-hover\\:focus\\:underline:not(:hover), .cant-hover\\:focus\\:underline:not(:active)):focus {
+            text-decoration-line: underline;
+          }
+
+          @media not (any-hover: hover) {
+            .cant-hover\\:focus\\:underline:focus {
+              text-decoration-line: underline;
+            }
+          }
+
+          @media not (pointer: fine) {
+            .cant-hover\\:focus\\:underline:focus {
+              text-decoration-line: underline;
+            }
+          }
+        }"
+      `)
+    })
   })
 
   describe('body with @slot syntax', () => {

packages/tailwindcss/src/index.ts

@@ -168,6 +168,8 @@ async function parseCss(
         let styleRuleSelectors: string[] = []
 
         for (let selector of selectors) {
+          selector = selector.trim()
+
           if (selector.startsWith('@')) {
             atRuleSelectors.push(selector)
           } else {