postcss-zindex-order/README.md

A PostCSS plugin that helps order your z-index values.

[PostCSS]:                 https://github.com/postcss/postcss

# PostCSS z-index order

<img align="right" width="135" height="95"
     title="Philosopher’s stone, logo of PostCSS"
     src="http://postcss.github.io/postcss/logo-leftp.png">

[PostCSS] plugin that helps order your z-index values.

Sometimes keeping track of all your z-index values can be confusing. They are scattered all through your css. This plugin will let you keep your z-index css where they are but allow you to see the values in one place.

```css
.modal{
    z-index: zOrder('modal');
}

.tip{
    z-index: zOrder('tip');
}
```
Options in your gulpfile.js
```js
zindexOrder({
    zLayerValues: {
        'modal': 9,
        'tip': 10
    }
})
```

Will output:
```css
.modal{
    z-index: 9;
}

.tip{
    z-index: 10;
}
```

## Usage

```
npm install postcss-zindex-order --save-dev
```

### Gulp
```js
var postcss = require('gulp-postcss');
var zindexOrder = require('postcss-zindex-order');

gulp.task('css', function () {
    var processors = [
        zindexOrder({
            zLayerValues: {
                'modal': 9,
                'tip': 10
            }
        })
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});
```