postcss-preref

PostCSS plugin that to refer previous selector by &

## Install

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 {}
.item + .item {}

img {}
img:hover {}

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

Change log

version	log
1.0.1	Fix & + &
1.0.0	Rewrite with es2015