Allow the use of @media print without parens (#5898)

Author: RobinMalfait

src/lib/setupContextUtils.js

@@ -230,7 +230,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
               return ({ format }) => format(str)
             }
 
-            let [, name, params] = /@(.*?) (\(.*\))/g.exec(str)
+            let [, name, params] = /@(.*?) (.*)/g.exec(str)
             return ({ wrap }) => wrap(postcss.atRule({ name, params }))
           })
           .reverse()

tests/variants.test.js

@@ -239,6 +239,31 @@ it('should properly handle keyframes with multiple variants', async () => {
   `)
 })
 
+test('custom addVariant with more complex media query params', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="magic:text-center"></div> `,
+      },
+    ],
+    plugins: [
+      function ({ addVariant }) {
+        addVariant('magic', '@media screen and (max-wdith: 600px)')
+      },
+    ],
+  }
+
+  return run('@tailwind components;@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      @media screen and (max-wdith: 600px) {
+        .magic\:text-center {
+          text-align: center;
+        }
+      }
+    `)
+  })
+})
+
 test('custom addVariant with nested media & format shorthand', () => {
   let config = {
     content: [
@@ -248,15 +273,15 @@ test('custom addVariant with nested media & format shorthand', () => {
     ],
     plugins: [
       function ({ addVariant }) {
-        addVariant('magic', '@supports (hover: hover) { @media (print) { &:disabled } }')
+        addVariant('magic', '@supports (hover: hover) { @media print { &:disabled } }')
       },
     ],
   }
 
   return run('@tailwind components;@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
       @supports (hover: hover) {
-        @media (print) {
+        @media print {
           .magic\:text-center:disabled {
             text-align: center;
           }