how can you set grunt postCSS options?

Question

Setup postCSS in my gruntfile, primarily as a convenient way to handle autoprefixing and minification, using the following code.

postcss: {
  options: {
    map: false, // inline sourcemaps

    processors: [
      require('autoprefixer-core')({
      browsers: ['last 10 versions', 'ie 9'],
      remove: false,
      map: true,
    }), // add vendor prefixes
    require('cssnano')() // minify the result
  ]
},
style: {
  src: '<%= dirs.sassBuild %>/style.css',
  dest: '<%= dirs.publicCss %>/style.min.css'
},
admin: {
  src: '<%= dirs.sassBuild %>/admin.css',
  dest: '<%= dirs.publicCss %>/admin.min.css'
}

},

The to my horror, I discovered that its mangling my RGBA values, making them HSLA, converting my carefully crafted REM units to pc, adjusting my z-indexes, and god knows what else.

I understand that these are all "features" of postCSS, none of which I want.

Having had a look at some of the documentation its not obvious to me that a) I can disable this behaviour, or b) how to do it with grunt.

is it possible to take back control of these features specifically?

score 1 · Accepted Answer · answered Dec 01 '15 at 20:59

The optimisations for CSSnano can be found at: http://cssnano.co/optimisations/.

You can disable some optimisations be setting the option to false. So for instance to disable postcss-calc:

require('cssnano')({calc: false}) // minify the result

You also wrote that your rem values are converted to px values as far as i do understand neither autoprefixer nor cssnano does perform this conversion.

score 1 · Answer 2 · answered Feb 11 '16 at 08:43

1

I discovered that its mangling my RGBA values, making them HSLA

To fix this use

cssnano({ colormin: false })

answered Feb 11 '16 at 08:43

hvab

11
2

how can you set grunt postCSS options?

2 Answers2