Properly handle pseudo-elements with group-hover variant

Author: adamwathan

__tests__/variantsAtRule.test.js

@@ -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 => {

src/lib/substituteVariantsAtRules.js

@@ -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'),