Add checked variant (fix #4)

Author: benface

.release-it.json

@@ -1,5 +1,6 @@
 {
   "git": {
-    "tagName": "v%s"
+    "tagName": "v%s",
+    "requireCleanWorkingDir": false
   }
 }

CHANGELOG.md

@@ -5,7 +5,10 @@ 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).
 
-## [3.0.0] - XXXX-XX-XX
+## [3.0.0] - 2020-02-05
+
+### Added
+- Added a `checked` variant
 
 ### Changed
 - Changed to use Tailwind 1.2’s new plugin definition syntax

README.md

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

index.js

@@ -9,6 +9,19 @@ module.exports = plugin(function({ addVariant, config }) {
     return `${getPrefix(`.${className}`)}${className}`;
   };
 
+  const pseudoClassVariant = function(pseudoClass) {
+    return ({ modifySelectors, separator }) => {
+      return modifySelectors(({ selector }) => {
+        return selectorParser(selectors => {
+          selectors.walkClasses(classNode => {
+            classNode.value = `${pseudoClass}${separator}${classNode.value}`;
+            classNode.parent.insertAfter(classNode, selectorParser.pseudo({ value: `:${pseudoClass}` }));
+          });
+        }).processSync(selector);
+      });
+    };
+  };
+
   const groupPseudoClassVariant = function(pseudoClass) {
     return ({ modifySelectors, separator }) => {
       return modifySelectors(({ selector }) => {
@@ -22,6 +35,7 @@ module.exports = plugin(function({ addVariant, config }) {
     };
   };
 
+  addVariant('checked', pseudoClassVariant('checked'));
   addVariant('group-focus', groupPseudoClassVariant('focus'));
   addVariant('group-focus-within', groupPseudoClassVariant('focus-within'));
   addVariant('group-active', groupPseudoClassVariant('active'));