postcss-hover-media-grouper

Finds, separates, and wraps :hover selectors into @media(hover) {} rule.

Usage

const srcCss = 'a:hover, a:focus { text-decoration: none } button:hover { background-color: red }';

const result = hovermediagrouper.process(srcCss).toString();
// => a:focus { text-decoration: none }@media(hover) {a:hover { text-decoration: none }} @media(hover) { button:hover { background-color: red }}

Use as PostCSS plugins

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const hovermediagrouper = require('postcss-hover-media-grouper');

exports.default = () => {
    const plugins = [
        hovermediagrouper
    ];
    gulp.src('src/css/main.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('dist/css'))
};