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

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Sort classes using position of first matching rule ([#11504](https://github.com/tailwindlabs/tailwindcss/pull/11504))
 - Bump `jiti`, `lightningcss`, `fast-glob` and `browserlist` dependencies and reflect `lightningcss` related improvements in tests ([#11550](https://github.com/tailwindlabs/tailwindcss/pull/11550))
 - Make PostCSS plugin async to improve performance ([#11548](https://github.com/tailwindlabs/tailwindcss/pull/11548))
+- Allow variant to be an at-rule without a prelude ([#11589](https://github.com/tailwindlabs/tailwindcss/pull/11589))
 
 ### Added
 

src/lib/setupContextUtils.js

@@ -231,8 +231,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

@@ -54,6 +54,31 @@ test('order matters and produces different behaviour', () => {
 })
 
 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: [