Allow variant to be an at-rule without a prelude (#11589)

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

* Update changelog

Author: thecrypticace

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
 

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()
 

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: [