archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

[0.3] Add parent-hover variant (#251)

Browse Source 
* Add parent-hover variant

* Don't enable parent-hover on textColors module by default

* Add tests, move parent-hover declarations to separate rules

* Prettier-ignore long selector string
This commit is contained in:
Adam Wathan 2017-11-28 14:44:43 -05:00 committed by GitHub
parent c165f1df57
commit ed550b3c5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
__tests__/variantsAtRule.test.js
View File

@ -50,6 +50,27 @@ test('it can generate focus variants', () => {
})
})
test('it can generate parent-hover variants', () => {
const input = `
@variants parent-hover {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.parent:hover .parent-hover${separator}banana { color: yellow; }
.parent:hover .parent-hover${separator}chocolate { color: brown; }
`
return run(input).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('it can generate hover and focus variants', () => {
const input = `
@variants hover, focus {

12
src/lib/substituteVariantsAtRules.js
View File

@ -18,6 +18,16 @@ const variantGenerators = {
rule.selector = `.focus${config.options.separator}${rule.selector.slice(1)}:focus`
})
container.before(cloned.nodes)
},
'parent-hover': (container, config) => {
const cloned = container.clone()
cloned.walkRules(rule => {
// prettier-ignore
rule.selector = `.parent:hover .parent-hover${config.options.separator}${rule.selector.slice(1)}`
})
container.before(cloned.nodes)
},
}
@ -37,7 +47,7 @@ export default function(config) {
atRule.before(atRule.clone().nodes)
_.forEach(['focus', 'hover'], variant => {
_.forEach(['focus', 'hover', 'parent-hover'], variant => {
if (variants.includes(variant)) {
variantGenerators[variant](atRule, unwrappedConfig)
}