Add group-visited and group-disabled variants (fix #2)

Author: benface

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.4.0] - 2019-12-20
+
+### Added
+- Added `group-visited` and `group-disabled` variants
+
 ## [2.3.0] - 2019-11-29
 
 ### Added
@@ -33,7 +38,8 @@ No change since 2.0.0-beta.1
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-interaction-variants/compare/v2.3.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-interaction-variants/compare/v2.4.0...HEAD
+[2.4.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v2.3.0...v2.4.0
 [2.3.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v2.2.0...v2.3.0
 [2.2.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v2.1.0...v2.2.0
 [2.1.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v2.0.0...v2.1.0

README.md

@@ -17,7 +17,7 @@ npm install tailwindcss-interaction-variants
     },
   },
   variants: {
-    backgroundColor: ['group-focus', 'group-focus-within', 'group-active', 'hocus', 'group-hocus'],
+    backgroundColor: ['group-focus', 'group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus'],
   },
   plugins: [
     require('tailwindcss-interaction-variants')(),
@@ -44,6 +44,14 @@ The above configuration would generate the following CSS:
   background-color: black;
 }
 
+.group:visited .group-visited\:bg-black {
+  background-color: black;
+}
+
+.group:disabled .group-disabled\:bg-black {
+  background-color: black;
+}
+
 .hocus\:bg-black:hover, .hocus\:bg-black:focus {
   background-color: black;
 }

index.js

@@ -19,6 +19,8 @@ module.exports = function() {
     addVariant('group-focus', groupPseudoClassVariant('focus'));
     addVariant('group-focus-within', groupPseudoClassVariant('focus-within'));
     addVariant('group-active', groupPseudoClassVariant('active'));
+    addVariant('group-visited', groupPseudoClassVariant('visited'));
+    addVariant('group-disabled', groupPseudoClassVariant('disabled'));
 
     addVariant('hocus', ({ modifySelectors, separator }) => {
       modifySelectors(({ selector }) => {

test.js

@@ -18,7 +18,7 @@ const generatePluginCss = (variants = [], css = null) => {
         ({ addUtilities }) => {
           addUtilities(css ? css : {
             '.test': {
-              'display': 'none',
+              'display': 'block',
             },
           }, variants);
         },
@@ -41,7 +41,7 @@ test('the plugin doesn’t do anything if the variants aren’t used', () => {
   return generatePluginCss().then(css => {
     expect(css).toMatchCss(`
       .test {
-        display: none;
+        display: block;
       }
     `);
   });
@@ -51,36 +51,10 @@ test('the group-focus variant is working', () => {
   return generatePluginCss(['group-focus']).then(css => {
     expect(css).toMatchCss(`
       .test {
-        display: none;
+        display: block;
       }
       .group:focus .group-focus\\:test {
-        display: none;
-      }
-    `);
-  });
-});
-
-test('the group-focus-within variant is working', () => {
-  return generatePluginCss(['group-focus-within']).then(css => {
-    expect(css).toMatchCss(`
-      .test {
-        display: none;
-      }
-      .group:focus-within .group-focus-within\\:test {
-        display: none;
-      }
-    `);
-  });
-});
-
-test('the group-active variant is working', () => {
-  return generatePluginCss(['group-active']).then(css => {
-    expect(css).toMatchCss(`
-      .test {
-        display: none;
-      }
-      .group:active .group-active\\:test {
-        display: none;
+        display: block;
       }
     `);
   });
@@ -90,10 +64,10 @@ test('the hocus variant is working', () => {
   return generatePluginCss(['hocus']).then(css => {
     expect(css).toMatchCss(`
       .test {
-        display: none;
+        display: block;
       }
       .hocus\\:test:hover, .hocus\\:test:focus {
-        display: none;
+        display: block;
       }
     `);
   });
@@ -103,48 +77,66 @@ test('the group-hocus variant is working', () => {
   return generatePluginCss(['group-hocus']).then(css => {
     expect(css).toMatchCss(`
       .test {
-        display: none;
+        display: block;
       }
       .group:hover .group-hocus\\:test, .group:focus .group-hocus\\:test {
-        display: none;
+        display: block;
       }
     `);
   });
 });
 
-test('multiple variants can be used together', () => {
-  return generatePluginCss(['responsive', 'hocus', 'group-active', 'group-focus', 'group-focus-within']).then(css => {
+test('all the variants are working', () => {
+  return generatePluginCss(['responsive', 'group-focus', 'group-focus-within', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus']).then(css => {
     expect(css).toMatchCss(`
       .test {
-        display: none;
+        display: block;
       }
-      .hocus\\:test:hover, .hocus\\:test:focus {
-        display: none;
+      .group:focus .group-focus\\:test {
+        display: block;
+      }
+      .group:focus-within .group-focus-within\\:test {
+        display: block;
       }
       .group:active .group-active\\:test {
-        display: none;
+        display: block;
       }
-      .group:focus .group-focus\\:test {
-        display: none;
+      .group:visited .group-visited\\:test {
+        display: block;
       }
-      .group:focus-within .group-focus-within\\:test {
-        display: none;
+      .group:disabled .group-disabled\\:test {
+        display: block;
+      }
+      .hocus\\:test:hover, .hocus\\:test:focus {
+        display: block;
+      }
+      .group:hover .group-hocus\\:test, .group:focus .group-hocus\\:test {
+        display: block;
       }
       @media (min-width: 640px) {
         .sm\\:test {
-          display: none;
+          display: block;
         }
-        .sm\\:hocus\\:test:hover, .sm\\:hocus\\:test:focus {
-          display: none;
+        .group:focus .sm\\:group-focus\\:test {
+          display: block;
+        }
+        .group:focus-within .sm\\:group-focus-within\\:test {
+          display: block;
         }
         .group:active .sm\\:group-active\\:test {
-          display: none;
+          display: block;
         }
-        .group:focus .sm\\:group-focus\\:test {
-          display: none;
+        .group:visited .sm\\:group-visited\\:test {
+          display: block;
         }
-        .group:focus-within .sm\\:group-focus-within\\:test {
-          display: none;
+        .group:disabled .sm\\:group-disabled\\:test {
+          display: block;
+        }
+        .sm\\:hocus\\:test:hover, .sm\\:hocus\\:test:focus {
+          display: block;
+        }
+        .group:hover .sm\\:group-hocus\\:test, .group:focus .sm\\:group-hocus\\:test {
+          display: block;
         }
       }
     `);