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

Generate hover variants as separate rules

Browse Source
This commit is contained in:
Adam Wathan 2017-11-22 15:54:25 -05:00
parent 37b06c8dc9
commit 0dbc2200d5
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
__tests__/hoverableAtRule.test.js
View File

@ -14,12 +14,14 @@ test('it adds a hoverable variant to each nested class definition', () => {
`
const output = `
.banana, .hover\\:banana:hover { color: yellow; }
.chocolate, .hover\\:chocolate:hover { color: brown; }
.banana { color: yellow; }
.chocolate { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
`
return run(input).then(result => {
expect(result.css).toEqual(output)
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})

9
src/lib/substituteHoverableAtRules.js
View File

@ -3,13 +3,16 @@ import cloneNodes from '../util/cloneNodes'
export default function() {
return function(css) {
css.walkAtRules('hoverable', atRule => {
atRule.walkRules(rule => {
const clonedRule = atRule.clone()
clonedRule.walkRules(rule => {
// Might be wise to error if the rule has multiple selectors,
// or weird compound selectors like .bg-blue>p>h1
rule.selectors = [rule.selector, `.hover\\:${rule.selector.slice(1)}:hover`]
rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
})
atRule.before(cloneNodes(atRule.nodes))
atRule.before(atRule.clone().nodes)
atRule.after(clonedRule.nodes)
atRule.remove()
})