PostCSS plugin that to refer previous selector by &
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
test
.babelrc
.coveralls.yml
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
gulpfile.babel.js
index.js
package.json

README.md

postcss-preref

npm version Build Status Code Climate Coverage Status

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