postcss-hover-prefix

A PostCSS plugin to prefix selectors that use :hover pseudoelements.

Useful to not letting hover effects on apps when browsing from a mobile device

Example input

.Component { /* ... */ }
.Component--modifier:hover { /* ... */ }
.Component-descendent { /* ... */ }

Example output classPrefix('pfx')

.Component { /* ... */ }
.pfx .Component--modifier { /* ... */ }
.Component-descendent { /* ... */ }

Usage

var fs        = require('fs');
var postcss   = require('postcss');
var hoverPrfx = require('postcss-hover-prefix');
 
var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = postcss()
          .use(hoverPrfx('.my-prefix'))
          .process(css);

License

MIT

Acknowledgements

• Based on postcss-class-prefix