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 focus variants last and group-hover variants first

Browse Source
This commit is contained in:
Adam Wathan 2018-03-12 12:21:51 -04:00
parent 02bac50589
commit fa0e06c2dd
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
__tests__/variantsAtRule.test.js
View File

@ -69,9 +69,9 @@ test('it can generate group-hover variants', () => {
})
})
test('it can generate hover and focus variants', () => {
test('it can generate all variants', () => {
const input = `
@variants hover, focus {
@variants hover, focus, group-hover {
.banana { color: yellow; }
.chocolate { color: brown; }
}
@ -80,10 +80,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; }
.group:hover .group-hover\\:banana { color: yellow; }
.group:hover .group-hover\\:chocolate { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
.focus\\:banana:focus { color: yellow; }
.focus\\:chocolate:focus { color: brown; }
`
return run(input).then(result => {
@ -104,10 +106,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; }
}
`

2
src/lib/substituteVariantsAtRules.js
View File

@ -48,7 +48,7 @@ export default function(config) {
atRule.before(atRule.clone().nodes)
_.forEach(['focus', 'hover', 'group-hover'], variant => {
_.forEach(['group-hover', 'hover', 'focus'], variant => {
if (variants.includes(variant)) {
variantGenerators[variant](atRule, unwrappedConfig)
}