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,12 @@
+# 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-02-14
+
+Initial release
+
+[Unreleased]: https://github.com/benface/tailwindcss-layout/compare/v1.0.0...HEAD

README.md

@@ -0,0 +1,58 @@
+# Interaction Variants Plugin for Tailwind CSS
+
+## Installation
+
+```bash
+npm install tailwindcss-interaction-variants
+```
+
+## Usage
+
+```js
+// In your Tailwind CSS config
+{
+  backgroundColors: {
+    'black': 'black',
+  },
+  
+  // ...
+
+  modules: {
+    backgroundColors: ['hocus', 'group-hocus', 'group-focus', 'group-active', 'visited'],
+  },
+
+  // ...
+
+  plugins: [
+    require('tailwindcss-interaction-variants')(), // nothing to configure!
+  ],
+}
+```
+
+The above configuration would generate the following classes:
+
+```css
+.bg-black {
+  background-color: black;
+}
+
+.hocus\:bg-black:hover, .hocus\:bg-black:focus {
+  background-color: black;
+}
+
+.group:hover .group-hocus\:bg-black, .group:focus .group-hocus\:bg-black {
+  background-color: black;
+}
+
+.group:focus .group-focus\:bg-black {
+  background-color: black;
+}
+
+.group:active .group-active\:bg-black {
+  background-color: black;
+}
+
+.visited\:bg-black:visited {
+  background-color: black;
+}
+```

index.js

@@ -0,0 +1,29 @@
+const _ = require('lodash');
+
+module.exports = () => ({ e, addVariant }) => {
+  addVariant('hocus', ({ modifySelectors, separator }) => {
+    modifySelectors(({ className }) => {
+      return `.hocus${separator}${className}:hover, .hocus${separator}${className}:focus`;
+    });
+  });
+  addVariant('group-hocus', ({ modifySelectors, separator }) => {
+    modifySelectors(({ className }) => {
+      return `.group:hover .group-hocus${separator}${className}, .group:focus .group-hocus${separator}${className}`;
+    });
+  });
+  addVariant('group-focus', ({ modifySelectors, separator }) => {
+    modifySelectors(({ className }) => {
+      return `.group:focus .group-focus${separator}${className}`;
+    });
+  });
+  addVariant('group-active', ({ modifySelectors, separator }) => {
+    modifySelectors(({ className }) => {
+      return `.group:active .group-active${separator}${className}`;
+    });
+  });
+  addVariant('visited', ({ modifySelectors, separator }) => {
+    modifySelectors(({ className }) => {
+      return `.visited${separator}${className}:visited`;
+    });
+  });
+};