Fix issue where motion variants incorrectly stack with group-hover variants

Author: adamwathan

__tests__/responsiveAtRule.test.js

@@ -111,32 +111,37 @@ test('it can generate responsive variants when classes have non-standard charact
     @responsive {
       .hover\\:banana { color: yellow; }
       .chocolate-2\\.5 { color: brown; }
+      .group:hover .group-hover\\:toast { color: black; }
     }
 
     @tailwind screens;
-  `
+    `
 
   const output = `
     @layer utilities {
       .hover\\:banana { color: yellow; }
       .chocolate-2\\.5 { color: brown; }
+      .group:hover .group-hover\\:toast { color: black; }
     }
     @media (min-width: 500px) {
       @layer utilities {
         .sm\\:hover\\:banana { color: yellow; }
         .sm\\:chocolate-2\\.5 { color: brown; }
+        .group:hover .sm\\:group-hover\\:toast { color: black; }
       }
     }
     @media (min-width: 750px) {
       @layer utilities {
         .md\\:hover\\:banana { color: yellow; }
         .md\\:chocolate-2\\.5 { color: brown; }
+        .group:hover .md\\:group-hover\\:toast { color: black; }
       }
     }
     @media (min-width: 1000px) {
       @layer utilities {
         .lg\\:hover\\:banana { color: yellow; }
         .lg\\:chocolate-2\\.5 { color: brown; }
+        .group:hover .lg\\:group-hover\\:toast { color: black; }
       }
     }
   `

__tests__/variantsAtRule.test.js

@@ -252,7 +252,7 @@ test('it can generate motion-safe and motion-reduce variants', () => {
 
 test('motion-reduce variants stack with basic variants', () => {
   const input = `
-    @variants motion-reduce, hover {
+    @variants motion-reduce, hover, group-hover {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -263,11 +263,15 @@ test('motion-reduce variants stack with basic variants', () => {
     .chocolate { color: brown; }
     .hover\\:banana:hover { color: yellow; }
     .hover\\:chocolate:hover { color: brown; }
+    .group:hover .group-hover\\:banana { color: yellow; }
+    .group:hover .group-hover\\:chocolate { color: brown; }
     @media (prefers-reduced-motion: reduce) {
       .motion-reduce\\:banana { color: yellow; }
       .motion-reduce\\:chocolate { color: brown; }
       .motion-reduce\\:hover\\:banana:hover { color: yellow; }
       .motion-reduce\\:hover\\:chocolate:hover { color: brown; }
+      .group:hover .motion-reduce\\:group-hover\\:banana { color: yellow; }
+      .group:hover .motion-reduce\\:group-hover\\:chocolate { color: brown; }
     }
   `
 
@@ -279,7 +283,7 @@ test('motion-reduce variants stack with basic variants', () => {
 
 test('motion-safe variants stack with basic variants', () => {
   const input = `
-    @variants motion-safe, hover {
+    @variants motion-safe, hover, group-hover {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -290,11 +294,15 @@ test('motion-safe variants stack with basic variants', () => {
     .chocolate { color: brown; }
     .hover\\:banana:hover { color: yellow; }
     .hover\\:chocolate:hover { color: brown; }
+    .group:hover .group-hover\\:banana { color: yellow; }
+    .group:hover .group-hover\\:chocolate { color: brown; }
     @media (prefers-reduced-motion: no-preference) {
       .motion-safe\\:banana { color: yellow; }
       .motion-safe\\:chocolate { color: brown; }
       .motion-safe\\:hover\\:banana:hover { color: yellow; }
       .motion-safe\\:hover\\:chocolate:hover { color: brown; }
+      .group:hover .motion-safe\\:group-hover\\:banana { color: yellow; }
+      .group:hover .motion-safe\\:group-hover\\:chocolate { color: brown; }
     }
   `
 

src/lib/substituteVariantsAtRules.js

@@ -3,6 +3,7 @@ import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import generateVariantFunction from '../util/generateVariantFunction'
 import prefixSelector from '../util/prefixSelector'
+import buildSelectorVariant from '../util/buildSelectorVariant'
 
 function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) {
   return generateVariantFunction(({ modifySelectors, separator }) => {
@@ -25,11 +26,9 @@ const defaultVariantGenerators = config => ({
   default: generateVariantFunction(() => {}),
   'motion-safe': generateVariantFunction(({ container, separator, modifySelectors }) => {
     const modified = modifySelectors(({ selector }) => {
-      return selectorParser(selectors => {
-        selectors.walkClasses(sel => {
-          sel.value = `motion-safe${separator}${sel.value}`
-        })
-      }).processSync(selector)
+      return buildSelectorVariant(selector, 'motion-safe', separator, message => {
+        throw container.error(message)
+      })
     })
     const mediaQuery = postcss.atRule({
       name: 'media',
@@ -40,11 +39,9 @@ const defaultVariantGenerators = config => ({
   }),
   'motion-reduce': generateVariantFunction(({ container, separator, modifySelectors }) => {
     const modified = modifySelectors(({ selector }) => {
-      return selectorParser(selectors => {
-        selectors.walkClasses(sel => {
-          sel.value = `motion-reduce${separator}${sel.value}`
-        })
-      }).processSync(selector)
+      return buildSelectorVariant(selector, 'motion-reduce', separator, message => {
+        throw container.error(message)
+      })
     })
     const mediaQuery = postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
     mediaQuery.append(modified)