Apply several post-processors to your CSS using PostCSS.

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-postcss --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-postcss');

$ npm install grunt-postcss autoprefixer-core csswring

grunt.initConfig({
  postcss: {
    options: {
      map: true,
      processors: [
        require('autoprefixer-core')({browsers: 'last 1 version'}).postcss,
        require('csswring').postcss
      ]
    },
    dist: {
      src: 'css/*.css'
    }
  }
});

The usage and options are similar with grunt-autoprefixer (except browsers option). The only new option is:

require('postcss-plugin')({option: value}).postcss

Type: Array Default value: []

An array of PostCSS compatible post-processors.

Unlike the traditional approach with separate plugins, grunt-postcss allows you to parse and save CSS only once applying all post-processors in memory and thus reducing your build time. PostCSS is also a simple tool for writing your own CSS post-processors.