Add group-focus-visible variant (fix #9)

Author: benface

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
 
 ## [5.0.0] - 2020-08-04
 
+### Added
+- Added a `group-focus-visible` variant
+
 ### Removed
 - Removed the `checked` variant since it is built into Tailwind as of v1.5
 
@@ -69,7 +72,8 @@ No change since 2.0.0-beta.1
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-interaction-variants/compare/v4.0.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-interaction-variants/compare/v5.0.0...HEAD
+[5.0.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v4.0.0...v5.0.0
 [4.0.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v3.1.1...v4.0.0
 [3.1.1]: https://github.com/benface/tailwindcss-interaction-variants/compare/v3.1.0...v3.1.1
 [3.1.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v3.0.0...v3.1.0

README.md

@@ -25,7 +25,7 @@ module.exports = {
     },
   },
   variants: {
-    backgroundColor: ['group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover'],
+    backgroundColor: ['group-focus-within', 'group-focus-visible', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover'],
   },
   plugins: [
     require('tailwindcss-interaction-variants'),
@@ -44,6 +44,10 @@ The above configuration would generate the following CSS:
   background-color: black;
 }
 
+.group:focus-visible .group-focus-visible\:bg-black {
+  background-color: black;
+}
+
 .group:active .group-active\:bg-black {
   background-color: black;
 }

index.js

@@ -38,6 +38,7 @@ module.exports = plugin(function({ addVariant, config, e, postcss }) {
   };
 
   addVariant('group-focus-within', groupPseudoClassVariant('focus-within'));
+  addVariant('group-focus-visible', groupPseudoClassVariant('focus-visible'));
   addVariant('group-active', groupPseudoClassVariant('active'));
   addVariant('group-visited', groupPseudoClassVariant('visited'));
   addVariant('group-disabled', groupPseudoClassVariant('disabled'));

test.js

@@ -105,14 +105,17 @@ test('the no-hover variant is working', () => {
 });
 
 test('all the variants are working', () => {
-  return generatePluginCss(['group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover']).then(css => {
+  return generatePluginCss(['group-focus-within', 'group-focus-visible', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover']).then(css => {
     expect(css).toMatchCss(`
       .w-1\\/2 {
         width: 50%;
       }
       .group:focus-within .group-focus-within\\:w-1\\/2 {
         width: 50%;
       }
+      .group:focus-visible .group-focus-visible\\:w-1\\/2 {
+        width: 50%;
+      }
       .group:active .group-active\\:w-1\\/2 {
         width: 50%;
       }
@@ -143,14 +146,17 @@ test('all the variants are working', () => {
 });
 
 test('all variants can be chained with the responsive variant', () => {
-  return generatePluginCss(['group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover', 'responsive']).then(css => {
+  return generatePluginCss(['group-focus-within', 'group-focus-visible', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover', 'responsive']).then(css => {
     expect(css).toMatchCss(`
       .w-1\\/2 {
         width: 50%;
       }
       .group:focus-within .group-focus-within\\:w-1\\/2 {
         width: 50%;
       }
+      .group:focus-visible .group-focus-visible\\:w-1\\/2 {
+        width: 50%;
+      }
       .group:active .group-active\\:w-1\\/2 {
         width: 50%;
       }
@@ -183,6 +189,9 @@ test('all variants can be chained with the responsive variant', () => {
         .group:focus-within .sm\\:group-focus-within\\:w-1\\/2 {
           width: 50%;
         }
+        .group:focus-visible .sm\\:group-focus-visible\\:w-1\\/2 {
+          width: 50%;
+        }
         .group:active .sm\\:group-active\\:w-1\\/2 {
           width: 50%;
         }