From fd9dbe18ac2455ac4f0c22b0c346985324dba1ba Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 27 Oct 2021 15:04:37 +0200
Subject: [PATCH] Allow the use of `@media print` without parens (#5898)

---
 src/lib/setupContextUtils.js |  2 +-
 tests/variants.test.js       | 29 +++++++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 8a5205e67..af46b912a 100644
--- a/src/lib/setupContextUtils.js
+++ b/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()
diff --git a/tests/variants.test.js b/tests/variants.test.js
index bbe1e9bc0..ebac2423a 100644
--- a/tests/variants.test.js
+++ b/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,7 +273,7 @@ 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 } }')
       },
     ],
   }
@@ -256,7 +281,7 @@ test('custom addVariant with nested media & format shorthand', () => {
   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;
           }