PostCSS z-index order

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.

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

Options in your gulpfile.js

zindexOrder({
    zLayerValues: {
        'modal': 9,
        'tip': 10
    }
})

Will output:

.modal{
    z-index: 9;
}
 
.tip{
    z-index: 10;
}

Usage

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

Gulp

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