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

Generate variants based on the order specified in the modules config

Browse source
This commit is contained in:
Adam Wathan 2018-06-22 10:35:47 -04:00
parent bfaafffb3f
commit 9d05910507
2 changed files with 29 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

27
__tests__/variantsAtRule.test.js
View file

@ -92,7 +92,7 @@ test('it can generate group-hover variants', () => {
test('it can generate hover, active and focus variants', () => {
const input = `
@variants hover, active, group-hover, focus {
@variants group-hover, hover, focus, active {
.banana { color: yellow; }
.chocolate { color: brown; }
}
@ -141,3 +141,28 @@ test('it wraps the output in a responsive at-rule if responsive is included as a
expect(result.warnings().length).toBe(0)
})
})
test('variants are generated in the order specified', () => {
const input = `
@variants focus, active, hover {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.focus\\:banana:focus { color: yellow; }
.focus\\:chocolate:focus { color: brown; }
.active\\:banana:active { color: yellow; }
.active\\:chocolate:active { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
`
return run(input).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})

8
src/lib/substituteVariantsAtRules.js
View file

@ -42,7 +42,7 @@ export default function(config) {
const unwrappedConfig = config()
css.walkAtRules('variants', atRule => {
const variants = postcss.list.comma(atRule.params)
const variants = postcss.list.comma(atRule.params).filter(variant => variant !== '')
if (variants.includes('responsive')) {
const responsiveParent = postcss.atRule({ name: 'responsive' })
@ -52,10 +52,8 @@ export default function(config) {
atRule.before(atRule.clone().nodes)
_.forEach(['group-hover', 'hover', 'focus', 'active'], variant => {
if (variants.includes(variant)) {
variantGenerators[variant](atRule, unwrappedConfig)
}
_.forEach(_.without(variants, 'responsive'), variant => {
variantGenerators[variant](atRule, unwrappedConfig)
})
atRule.remove()