From ebd157f16e7aa2bba34ca9232b2168771c3747df Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 16 Apr 2020 12:51:12 -0400
Subject: [PATCH] Add group-focus variant

---
 __tests__/variantsAtRule.test.js     | 45 ++++++++++++++++++++++++++++
 src/lib/substituteVariantsAtRules.js | 13 ++++++++
 2 files changed, 58 insertions(+)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 7433a90cb..ed1dc210e 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -264,6 +264,51 @@ test('group-hover variants respect any configured prefix', () => {
   })
 })
 
+test('it can generate group-focus variants', () => {
+  const input = `
+    @variants group-focus {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .banana { color: yellow; }
+    .chocolate { color: brown; }
+    .group:focus .group-focus\\:banana { color: yellow; }
+    .group:focus .group-focus\\:chocolate { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test('group-focus variants respect any configured prefix', () => {
+  const input = `
+    @variants group-focus {
+      .tw-banana { color: yellow; }
+      .tw-chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .tw-banana { color: yellow; }
+    .tw-chocolate { color: brown; }
+    .tw-group:focus .group-focus\\:tw-banana { color: yellow; }
+    .tw-group:focus .group-focus\\: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 {
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index 6cfca755d..931ebacfc 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -36,6 +36,19 @@ const defaultVariantGenerators = config => ({
       }).processSync(selector)
     })
   }),
+  'group-focus': generateVariantFunction(({ modifySelectors, separator }) => {
+    return modifySelectors(({ selector }) => {
+      return selectorParser(selectors => {
+        selectors.walkClasses(sel => {
+          sel.value = `group-focus${separator}${sel.value}`
+          sel.parent.insertBefore(
+            sel,
+            selectorParser().astSync(prefixSelector(config.prefix, '.group:focus '))
+          )
+        })
+      }).processSync(selector)
+    })
+  }),
   hover: generatePseudoClassVariant('hover'),
   'focus-within': generatePseudoClassVariant('focus-within'),
   focus: generatePseudoClassVariant('focus'),