From 02404ac809cd925ac03aa889a7e1b396592aa1a4 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Sat, 7 May 2022 22:48:44 -0400
Subject: [PATCH] Add support for at rules

---
 src/lib/generateRules.js         |  7 ++++++-
 tests/arbitrary-variants.test.js | 25 +++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index 74754b85ecbc..535263cb4b15 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -9,6 +9,7 @@ import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
+import { parseVariant } from './setupContextUtils'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
 
 let classNameParser = selectorParser((selectors) => {
@@ -128,8 +129,12 @@ function applyVariant(variant, matches, context) {
   // Register arbitrary variants
   if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
     let selector = normalize(variant.slice(1, -1))
+
+    // TODO: Error recovery for @supports(what:ever) -- note the absence of a space
+    let fn = parseVariant(selector)
+
     let sort = Array.from(context.variantOrder.values()).pop() << 1n
-    context.variantMap.set(variant, [[sort, () => selector]])
+    context.variantMap.set(variant, [[sort, fn]])
     context.variantOrder.set(variant, sort)
   }
 
diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js
index 1d75cfe86b8f..f18e32c433e2 100644
--- a/tests/arbitrary-variants.test.js
+++ b/tests/arbitrary-variants.test.js
@@ -132,3 +132,28 @@ test('using the important modifier', () => {
     `)
   })
 })
+
+test('at-rules', () => {
+  let config = {
+    content: [{ raw: html`<div class="[@supports_(what:ever){&:hover}]:underline"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+
+      @supports (what: ever) {
+        .\[\@supports_\(what\:ever\)\{\&\:hover\}\]\:underline:hover {
+          text-decoration-line: underline;
+        }
+      }
+    `)
+  })
+})