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

Add tests for active state variant

Browse Source
This commit is contained in:
fedeTibaldo 2018-02-09 20:20:24 +01:00
parent e112b98d4e
commit 1f57fbfbaf
2 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
__tests__/variantsAtRule.test.js
View File

@ -27,6 +27,27 @@ test('it can generate hover variants', () => {
})
})
test('it can generate active variants', () => {
const input = `
@variants active {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.active\\:banana:active { color: yellow; }
.active\\:chocolate:active { color: brown; }
`
return run(input).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('it can generate focus variants', () => {
const input = `
@variants focus {
@ -69,9 +90,9 @@ test('it can generate group-hover variants', () => {
})
})
test('it can generate hover and focus variants', () => {
test('it can generate hover, active and focus variants', () => {
const input = `
@variants hover, focus {
@variants hover, active, focus {
.banana { color: yellow; }
.chocolate { color: brown; }
}
@ -80,10 +101,12 @@ test('it can generate hover and focus variants', () => {
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.focus\\:banana:focus { color: yellow; }
.focus\\:chocolate:focus { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
.active\\:banana:active { color: yellow; }
.active\\:chocolate:active { color: brown; }
.focus\\:banana:focus { color: yellow; }
.focus\\:chocolate:focus { color: brown; }
`
return run(input).then(result => {
@ -104,10 +127,10 @@ test('it wraps the output in a responsive at-rule if responsive is included as a
@responsive {
.banana { color: yellow; }
.chocolate { color: brown; }
.focus\\:banana:focus { color: yellow; }
.focus\\:chocolate:focus { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
.focus\\:banana:focus { color: yellow; }
.focus\\:chocolate:focus { color: brown; }
}
`

6
src/lib/substituteVariantsAtRules.js
View File

@ -16,7 +16,11 @@ const variantGenerators = {
const cloned = container.clone()
cloned.walkRules(rule => {
rule.selector = `${buildClassVariant(rule.selector, 'active', config.options.separator)}:active`
rule.selector = `${buildClassVariant(
rule.selector,
'active',
config.options.separator
)}:active`
})
container.before(cloned.nodes)