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'))
};