Initial commit

Author: benface

.gitignore

@@ -0,0 +1 @@
+/node_modules/

.release-it.json

@@ -0,0 +1,5 @@
+{
+  "git": {
+    "tagName": "v%s"
+  }
+}

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+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).
+
+## [1.0.0] - 2019-12-20
+
+Initial release
+
+[Unreleased]: https://github.com/benface/tailwindcss-alt/compare/v1.0.0...HEAD
+[1.0.0]: https://github.com/benface/tailwindcss-alt/releases/tag/v1.0.0

README.md

@@ -0,0 +1,100 @@
+# Alt Variant Plugin for Tailwind CSS
+
+## Installation
+
+```bash
+npm install tailwindcss-alt
+```
+
+## Usage
+
+```js
+// tailwind.config.js
+{
+  variants: {
+    display: ['alt', 'alt-hover', 'alt-focus', 'alt-focus-within', 'alt-active', 'alt-visited', 'alt-disabled', 'alt-group-hover', 'alt-group-focus', 'alt-group-focus-within', 'alt-group-active', 'alt-group-visited', 'alt-group-disabled', 'responsive'],
+  },
+  plugins: [
+    require('tailwindcss-alt')({
+      className: 'alt', // defaults to this value
+    }),
+  ],
+}
+```
+
+The above configuration would generate the following CSS:
+
+```css
+.block {
+  display: block;
+}
+
+.alt .alt\:block {
+  display: block;
+}
+
+.alt .alt\:hover\:block:hover {
+  display: block;
+}
+
+.alt .alt\:focus\:block:focus {
+  display: block;
+}
+
+.alt .alt\:focus-within\:block:focus-within {
+  display: block;
+}
+
+.alt .alt\:active\:block:active {
+  display: block;
+}
+
+.alt .alt\:visited\:block:visited {
+  display: block;
+}
+
+.alt .alt\:disabled\:block:disabled {
+  display: block;
+}
+
+.alt .group:hover .alt\:group-hover\:block {
+  display: block;
+}
+
+.alt .group:focus .alt\:group-focus\:block {
+  display: block;
+}
+
+.alt .group:focus-within .alt\:group-focus-within\:block {
+  display: block;
+}
+
+.alt .group:active .alt\:group-active\:block {
+  display: block;
+}
+
+.alt .group:visited .alt\:group-visited\:block {
+  display: block;
+}
+
+.alt .group:disabled .alt\:group-disabled\:block {
+  display: block;
+}
+
+/* etc. */
+```
+
+Which you can then use in your HTML like this:
+
+```html
+<header class="alt">
+  <img class="block alt:hidden" src="logo.png">
+  <img class="hidden alt:block" src="alt-logo.png">
+
+  <a class="text-black hover:text-blue alt:text-white alt:hover:text-green">Home</a>
+
+  <div class="group">
+    <div class="group-hover:opacity-50 alt:group-hover:opacity-100">...</div>
+  </div>
+</header>
+```

index.js

@@ -0,0 +1,62 @@
+const _ = require('lodash');
+const selectorParser = require('postcss-selector-parser');
+
+module.exports = function(options = {}) {
+  return ({ addVariant }) => {
+    const defaultOptions = {
+      className: 'alt',
+    };
+    options = _.defaults({}, options, defaultOptions);
+
+    const altPseudoClassVariant = function(pseudoClass) {
+      return ({ modifySelectors, separator }) => {
+        modifySelectors(({ selector }) => {
+          return selectorParser(selectors => {
+            selectors.walkClasses(classNode => {
+              classNode.value = `${options.className}${separator}${pseudoClass}${separator}${classNode.value}`;
+              classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${options.className} `));
+              classNode.parent.insertAfter(classNode, selectorParser.pseudo({ value: `:${pseudoClass}` }));
+            });
+          }).processSync(selector);
+        });
+      };
+    };
+
+    const altGroupPseudoClassVariant = function(pseudoClass) {
+      return ({ modifySelectors, separator }) => {
+        modifySelectors(({ selector }) => {
+          return selectorParser(selectors => {
+            selectors.walkClasses(classNode => {
+              classNode.value = `${options.className}${separator}group-${pseudoClass}${separator}${classNode.value}`;
+              classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${options.className} .group:${pseudoClass} `));
+            });
+          }).processSync(selector);
+        });
+      };
+    };
+
+    addVariant('alt', ({ modifySelectors, separator }) => {
+      modifySelectors(({ selector }) => {
+        return selectorParser(selectors => {
+          selectors.walkClasses(classNode => {
+            classNode.value = `${options.className}${separator}${classNode.value}`;
+            classNode.parent.insertBefore(classNode, selectorParser().astSync(`.${options.className} `));
+          });
+        }).processSync(selector);
+      });
+    });
+
+    addVariant('alt-hover', altPseudoClassVariant('hover'));
+    addVariant('alt-focus', altPseudoClassVariant('focus'));
+    addVariant('alt-focus-within', altPseudoClassVariant('focus-within'));
+    addVariant('alt-active', altPseudoClassVariant('active'));
+    addVariant('alt-visited', altPseudoClassVariant('visited'));
+    addVariant('alt-disabled', altPseudoClassVariant('disabled'));
+    addVariant('alt-group-hover', altGroupPseudoClassVariant('hover'));
+    addVariant('alt-group-focus', altGroupPseudoClassVariant('focus'));
+    addVariant('alt-group-focus-within', altGroupPseudoClassVariant('focus-within'));
+    addVariant('alt-group-active', altGroupPseudoClassVariant('active'));
+    addVariant('alt-group-visited', altGroupPseudoClassVariant('visited'));
+    addVariant('alt-group-disabled', altGroupPseudoClassVariant('disabled'));
+  };
+};