postcss-preref v1.0.1

postcss-preref

npm i -D postcss-preref

Usage

Add a new rule to css. This is possible to write so as &:hover. instead of previous selector. (e.g. input.css)

.item {}
&:hover {}
&:hover span {}
&:visited {}

img {}
&:hover {}

.selector-1 .child,
.selector-2 .child {}
&:hover {}

Use postcss-preref plugin in PostCSS (e.g.)

const fs = require('fs');
const postcss = require('postcss');
const preref = require('..');

const css = fs.readFileSync('./sample.css', 'utf-8');

postcss([preref])
  .process(css)
  .then(result => console.log(result.css));

output like this

.item {}
.item:hover {}
.item:hover span {}
.item:visited {}

img {}
img:hover {}

.selector-1 .child,
.selector-2 .child {}
.selector-1 .child:hover,
.selector-2 .child:hover {}

Change log