Apply configured prefix to the .group class for group-hover variants

Author: adamwathan

__tests__/variantsAtRule.test.js

@@ -240,6 +240,30 @@ test('it can generate group-hover variants', () => {
   })
 })
 
+test('group-hover variants respect any configured prefix', () => {
+  const input = `
+    @variants group-hover {
+      .tw-banana { color: yellow; }
+      .tw-chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .tw-banana { color: yellow; }
+    .tw-chocolate { color: brown; }
+    .tw-group:hover .group-hover\\:tw-banana { color: yellow; }
+    .tw-group:hover .group-hover\\:tw-chocolate { color: brown; }
+  `
+
+  return run(input, {
+    ...config,
+    prefix: 'tw-',
+  }).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate hover, active and focus variants', () => {
   const input = `
     @variants group-hover, hover, focus, active {

src/lib/substituteVariantsAtRules.js

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import generateVariantFunction from '../util/generateVariantFunction'
+import prefixSelector from '../util/prefixSelector'
 
 function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) {
   return generateVariantFunction(({ modifySelectors, separator }) => {
@@ -20,14 +21,17 @@ function ensureIncludesDefault(variants) {
   return variants.includes('default') ? variants : ['default', ...variants]
 }
 
-const defaultVariantGenerators = {
+const defaultVariantGenerators = config => ({
   default: generateVariantFunction(() => {}),
   'group-hover': generateVariantFunction(({ modifySelectors, separator }) => {
     return modifySelectors(({ selector }) => {
       return selectorParser(selectors => {
         selectors.walkClasses(sel => {
           sel.value = `group-hover${separator}${sel.value}`
-          sel.parent.insertBefore(sel, selectorParser().astSync('.group:hover '))
+          sel.parent.insertBefore(
+            sel,
+            selectorParser().astSync(prefixSelector(config.prefix, '.group:hover '))
+          )
         })
       }).processSync(selector)
     })
@@ -42,12 +46,12 @@ const defaultVariantGenerators = {
   last: generatePseudoClassVariant('last-child', 'last'),
   odd: generatePseudoClassVariant('nth-child(odd)', 'odd'),
   even: generatePseudoClassVariant('nth-child(even)', 'even'),
-}
+})
 
 export default function(config, { variantGenerators: pluginVariantGenerators }) {
   return function(css) {
     const variantGenerators = {
-      ...defaultVariantGenerators,
+      ...defaultVariantGenerators(config),
       ...pluginVariantGenerators,
     }