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

tailwindlabs · Oct 27, 2021 · fd9dbe1 · fd9dbe1
1 parent 5058275
commit fd9dbe1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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;
  }