npm i --save-dev postcss @lodder/grunt-postcss

grunt.loadNpmTasks('@lodder/grunt-postcss');

npm i @lodder/grunt-postcss autoprefixer cssnano

grunt.initConfig({postcss:{options:{map:true,// inline sourcemaps// ormap:{inline:false,// save all sourcemaps as separate files...annotation:'dist/css/maps/'// ...to the specified directory},processors:[require('autoprefixer')(),require('cssnano')()// minify the result]},dist:{src:'css/*.css'}}});

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

• Type:Array|Function
• Default value:[]

An array of PostCSS compatible post-processors. You can also use a function that returns an array of PostCSS post-processors.

• Type:Boolean|Object
• Default value:false

If themap option isn't defined or is set tofalse, PostCSS won't create or update sourcemaps.

Iftrue is specified, PostCSS will try to locate a sourcemap from a previous compilation step using an annotation comment (e.g. from Sass) and create a new sourcemap based on the found one (or just create a new inlined sourcemap). The created sourcemap can be either a separate file or an inlined map depending on what the previous sourcemap was.

You can gain more control over sourcemap generation by assigning an object to themap option:

• prev (string orfalse): a path to a directory where a previous sourcemap is (e.g.path/). By default, PostCSS will try to find a previous sourcemap using a path from the annotation comment (or using the annotation comment itself if the map is inlined). You can also set this option tofalse to delete the previous sourcemap.
• inline (boolean): whether a sourcemap will be inlined or not. By default, it will be the same as a previous sourcemap or inlined.
• annotation (boolean or string): by default, PostCSS will always add annotation comments with a path to a sourcemap file unless it is inlined or the input CSS does not have an annotation comment. PostCSS presumes that you want to save sourcemaps next to your output CSS files, but you can override this behavior and set a path to a directory as a string value for the option.
• sourcesContent (boolean): whether original file contents (e.g. Sass sources) will be included to a sourcemap. By default, it'strue unless a sourcemap from a previous compilation step has the original contents missing.

• Type:Boolean|String
• Default value:false

Set it totrue if you want to get a patch file:

options:{diff:true// or 'custom/path/to/file.css.patch'}

You can also specify a path where you want the file to be saved.

• Type:Boolean
• Default value:false

By default grunt-postcss will load all passed CSS files and immediately process them. Set this totrue if you want files to be processed one by one.This can help in case when you have a lot of CSS files and processing them causes anout of memory error.

• Type:Boolean
• Default value:false

Set it totrue if you want grunt to exit with an error on detecting a warning or error.

• Type:Boolean
• Default value:true

Set it tofalse if you do not want the destination files to be written. This does not affect the processing of themap anddiff options.

• Type:Function
• Default value:null

This function is called when an error occurs and passes the error data.

Options to controlPostCSS custom syntaxes.

options:{parser:require('postcss-safe-parser')// instead of a removed `safe` option}

options:{syntax:require('postcss-scss')// work with SCSS directly}

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.

Autoprefixer is a PostCSS plugin, so first replacegrunt-autoprefixer withgrunt-postcss andautoprefixer plugin.

npm remove --save-dev grunt-autoprefixernpm install --save-dev @lodder/grunt-postcss autoprefixer

Assuming you have a config like this:

autoprefixer:{options:{map:true,browsers:['last 1 version']},dist:{src:'...'}}

Replace it with:

postcss:{options:{map:true,processors:[require('autoprefixer')()]},dist:{src:'...'}}

And add thebrowsers to either yourpackage.json or.browserslistrc file.

browsers,cascade andremove options are plugin-specific, so we pass them as an argument while require the plugin.