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

Add failing test for using @responsive with deeply nested at-rules

Browse source
This commit is contained in:
Adam Wathan 2019-02-06 08:29:25 -05:00
parent a38f15fb35
commit faf2be163f
1 changed files with 130 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

238
__tests__/responsiveAtRule.test.js
View file

@ -6,114 +6,6 @@ function run(input, opts = config) {
return postcss([plugin(opts)]).process(input, { from: undefined })
}
test('it can generate responsive variants for nested at rules', () => {
const input = `
@responsive {
.banana { color: yellow; }
.chocolate { color: brown; }
@supports(display: grid) {
.grid\\:banana { color: blue; }
.grid\\:chocolate { color: green; }
}
}
`
const output = `
.banana {
color: yellow;
}
.chocolate {
color: brown;
}
@supports(display: grid) {
.grid\\:banana {
color: blue;
}
.grid\\:chocolate {
color: green;
}
}
@media (min-width: 500px) {
.sm\\:banana {
color: yellow;
}
.sm\\:chocolate {
color: brown;
}
@supports(display: grid) {
.sm\\:grid\\:banana {
color: blue;
}
.sm\\:grid\\:chocolate {
color: green;
}
}
}
@media (min-width: 750px) {
.md\\:banana {
color: yellow;
}
.md\\:chocolate {
color: brown;
}
@supports(display: grid) {
.md\\:grid\\:banana {
color: blue;
}
.md\\:grid\\:chocolate {
color: green;
}
}
}
@media (min-width: 1000px) {
.lg\\:banana {
color: yellow;
}
.lg\\:chocolate {
color: brown;
}
@supports(display: grid) {
.lg\\:grid\\:banana {
color: blue;
}
.lg\\:grid\\:chocolate {
color: green;
}
}
}
`
return run(input, {
screens: {
sm: '500px',
md: '750px',
lg: '1000px',
},
options: {
separator: ':',
},
}).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('it can generate responsive variants', () => {
const input = `
@responsive {
@ -280,6 +172,136 @@ test('responsive variants are grouped', () => {
})
})
test('it can generate responsive variants for nested at-rules', () => {
const input = `
@responsive {
.banana { color: yellow; }
@supports(display: grid) {
.grid\\:banana { color: blue; }
}
}
`
const output = `
.banana {
color: yellow;
}
@supports(display: grid) {
.grid\\:banana {
color: blue;
}
}
@media (min-width: 500px) {
.sm\\:banana {
color: yellow;
}
@supports(display: grid) {
.sm\\:grid\\:banana {
color: blue;
}
}
}
@media (min-width: 1000px) {
.lg\\:banana {
color: yellow;
}
@supports(display: grid) {
.lg\\:grid\\:banana {
color: blue;
}
}
}
`
return run(input, {
screens: {
sm: '500px',
lg: '1000px',
},
options: {
separator: ':',
},
}).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test.only('it can generate responsive variants for deeply nested at-rules', () => {
const input = `
@responsive {
.banana { color: yellow; }
@supports(display: grid) {
@supports(display: flex) {
.flex-grid\\:banana { color: blue; }
}
}
}
`
const output = `
.banana {
color: yellow;
}
@supports(display: grid) {
@supports(display: flex) {
.flex-grid\\:banana {
color: blue;
}
}
}
@media (min-width: 500px) {
.sm\\:banana {
color: yellow;
}
@supports(display: grid) {
@supports(display: flex) {
.sm\\:flex-grid\\:banana {
color: blue;
}
}
}
}
@media (min-width: 1000px) {
.lg\\:banana {
color: yellow;
}
@supports(display: grid) {
@supports(display: flex) {
.lg\\:flex-grid\\:banana {
color: blue;
}
}
}
}
`
return run(input, {
screens: {
sm: '500px',
lg: '1000px',
},
options: {
separator: ':',
},
}).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('screen prefix is only applied to the last class in a selector', () => {
const input = `
@responsive {