Add can-hover and no-hover variants (fix #5)

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).
 
+## [3.1.0] - 2020-02-13
+
+### Added
+- Added `can-hover` and `no-hover` variants
+
 ## [3.0.0] - 2020-02-05
 
 ### Added
@@ -49,7 +54,8 @@ No change since 2.0.0-beta.1
 
 Initial release
 
-[Unreleased]: https://github.com/benface/tailwindcss-interaction-variants/compare/v3.0.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-interaction-variants/compare/v3.1.0...HEAD
+[3.1.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v3.0.0...v3.1.0
 [3.0.0]: https://github.com/benface/tailwindcss-interaction-variants/compare/v2.4.0...v3.0.0
 [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

README.md

@@ -21,7 +21,7 @@ module.exports = {
     },
   },
   variants: {
-    backgroundColor: ['checked', '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', 'can-hover', 'no-hover'],
   },
   plugins: [
     require('tailwindcss-interaction-variants'),
@@ -67,4 +67,16 @@ The above configuration would generate the following CSS:
 .group:hover .group-hocus\:bg-black, .group:focus .group-hocus\:bg-black {
   background-color: black;
 }
+
+@media (hover: hover) {
+  .can-hover\:bg-black {
+    background-color: black;
+  }
+}
+
+@media (hover: none) {
+  .no-hover\:bg-black {
+    background-color: black;
+  }
+}
 ```

index.js

@@ -2,7 +2,7 @@ const plugin = require('tailwindcss/plugin');
 const _ = require('lodash');
 const selectorParser = require('postcss-selector-parser');
 
-module.exports = plugin(function({ addVariant, config }) {
+module.exports = plugin(function({ addVariant, config, e, postcss }) {
   const prefixClass = function(className) {
     const prefix = config('prefix');
     const getPrefix = typeof prefix === 'function' ? prefix : () => prefix;
@@ -71,4 +71,22 @@ module.exports = plugin(function({ addVariant, config }) {
       }).processSync(selector)
     });
   });
+
+  addVariant('can-hover', ({ container, separator }) => {
+    const atRule = postcss.atRule({ name: 'media', params: '(hover: hover)' });
+    atRule.append(container.nodes);
+    container.append(atRule);
+    atRule.walkRules(rule => {
+      rule.selector = `.${e(`can-hover${separator}`)}${rule.selector.slice(1)}`;
+    });
+  });
+
+  addVariant('no-hover', ({ container, separator }) => {
+    const atRule = postcss.atRule({ name: 'media', params: '(hover: none)' });
+    atRule.append(container.nodes);
+    container.append(atRule);
+    atRule.walkRules(rule => {
+      rule.selector = `.${e(`no-hover${separator}`)}${rule.selector.slice(1)}`;
+    });
+  });
 });