wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Robin Malfait 2021-10-27 15:04:37 +02:00 • committed by GitHub
parent 5058275f3b
commit fd9dbe18ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/lib/setupContextUtils.js
View file

@ -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()

29
tests/variants.test.js
View file

@ -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;
}