Allow variant to be an at-rule without a prelude

tailwindlabs · Jul 11, 2023 · d8998a1 · d8998a1
1 parent bc1af02
commit d8998a1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/lib/setupContextUtils.js b/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()
 

diff --git a/tests/variants.test.js b/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: [