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

Properly handle pseudo-elements with group-hover variant

Browse Source
This commit is contained in:
Adam Wathan 2019-06-13 07:52:37 -04:00
parent 737f1ecde0
commit eeb2947204
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
__tests__/variantsAtRule.test.js
View File

@ -220,7 +220,7 @@ test('variants are generated in the order specified', () => {
test('the built-in variant pseudo-selectors are appended before any pseudo-elements', () => {
const input = `
@variants hover, focus-within, focus, active {
@variants hover, focus-within, focus, active, group-hover {
.placeholder-yellow::placeholder { color: yellow; }
}
`
@ -231,6 +231,7 @@ test('the built-in variant pseudo-selectors are appended before any pseudo-eleme
.focus-within\\:placeholder-yellow:focus-within::placeholder { color: yellow; }
.focus\\:placeholder-yellow:focus::placeholder { color: yellow; }
.active\\:placeholder-yellow:active::placeholder { color: yellow; }
.group:hover .group-hover\\:placeholder-yellow::placeholder { color: yellow; }
`
return run(input).then(result => {

9
src/lib/substituteVariantsAtRules.js
View File

@ -24,8 +24,13 @@ function ensureIncludesDefault(variants) {
const defaultVariantGenerators = {
default: generateVariantFunction(() => {}),
'group-hover': generateVariantFunction(({ modifySelectors, separator }) => {
return modifySelectors(({ className }) => {
return `.group:hover .${e(`group-hover${separator}${className}`)}`
return modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `group-hover${separator}${sel.value}`
sel.parent.insertBefore(sel, selectorParser().astSync('.group:hover '))
})
}).processSync(selector)
})
}),
hover: generatePseudoClassVariant('hover'),