From 1c9bb387e1a081d2a8ea7bf7aab413a212afd99d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 11 Jul 2023 16:04:38 -0400
Subject: [PATCH] Allow variant to be an at-rule without a prelude (#11589)

* Allow variant to be an at-rule without a prelude

* Update changelog
---
 CHANGELOG.md                 |  1 +
 src/lib/setupContextUtils.js |  4 ++--
 tests/variants.test.js       | 25 +++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44b866b9653f..b1c11594170e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Move unknown pseudo-elements outside of `:is` by default ([#11345](https://github.com/tailwindlabs/tailwindcss/pull/11345))
 - Escape animation names when prefixes contain special characters ([#11470](https://github.com/tailwindlabs/tailwindcss/pull/11470))
 - Sort classes using position of first matching rule ([#11504](https://github.com/tailwindlabs/tailwindcss/pull/11504))
+- Allow variant to be an at-rule without a prelude ([#11589](https://github.com/tailwindlabs/tailwindcss/pull/11589))
 
 ### Added
 
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 6564eb6b881a..7844627fea73 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -230,8 +230,8 @@ export function parseVariant(variant) {
         return ({ format }) => format(str)
       }
 
-      let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(str)
-      return ({ wrap }) => wrap(postcss.atRule({ name, params: params.trim() }))
+      let [, name, params] = /@(\S*)( .+|[({].*)?/g.exec(str)
+      return ({ wrap }) => wrap(postcss.atRule({ name, params: params?.trim() ?? '' }))
     })
     .reverse()
 
diff --git a/tests/variants.test.js b/tests/variants.test.js
index da62419d4c18..55facc122f41 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -66,6 +66,31 @@ crosscheck(({ stable, oxide }) => {
   })
 
   describe('custom advanced variants', () => {
+    test('at-rules without params', () => {
+      let config = {
+        content: [
+          {
+            raw: html` <div class="ogre:text-center"></div> `,
+          },
+        ],
+        plugins: [
+          function ({ addVariant }) {
+            addVariant('ogre', '@layer')
+          },
+        ],
+      }
+
+      return run('@tailwind components; @tailwind utilities', config).then((result) => {
+        return expect(result.css).toMatchFormattedCss(css`
+          @layer {
+            .ogre\:text-center {
+              text-align: center;
+            }
+          }
+        `)
+      })
+    })
+
     test('prose-headings usage on its own', () => {
       let config = {
         content: [