From 9e4e8a6d054c9c3a6907ab05480b0cf21325a823 Mon Sep 17 00:00:00 2001
From: Paulo <hi@paulo.is>
Date: Fri, 4 May 2018 14:47:28 +0200
Subject: [PATCH] Add focus-within variant

---
 __tests__/variantsAtRule.test.js     | 21 +++++++++++++++++++++
 defaultConfig.stub.js                |  1 +
 src/lib/substituteVariantsAtRules.js |  3 ++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 51a462a723ce..fb00f418dd35 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -69,6 +69,27 @@ test('it can generate focus variants', () => {
   })
 })
 
+test('it can generate focus-within variants', () => {
+  const input = `
+    @variants focus-within {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus-within\\:banana:focus-within { color: yellow; }
+      .focus-within\\:chocolate:focus-within { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate group-hover variants', () => {
   const input = `
     @variants group-hover {
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index b2cf9fc6ebad..5c604958dca7 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -828,6 +828,7 @@ module.exports = {
   |   - responsive
   |   - hover
   |   - focus
+  |   - focus-within
   |   - active
   |   - group-hover
   |
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index 7d42537f115d..976b42137e43 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -30,6 +30,7 @@ const variantGenerators = {
   },
   hover: generatePseudoClassVariant('hover'),
   focus: generatePseudoClassVariant('focus'),
+  'focus-within': generatePseudoClassVariant('focus-within'),
   active: generatePseudoClassVariant('active'),
 }
 
@@ -48,7 +49,7 @@ export default function(config) {
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(['group-hover', 'hover', 'focus', 'active'], variant => {
+      _.forEach(['group-hover', 'hover', 'focus', 'focus-within', 'active'], variant => {
         if (variants.includes(variant)) {
           variantGenerators[variant](atRule, unwrappedConfig)
         }