Conditional options (optimizations)

[ghost]

Thank you for the amazing tool!

I learned the list of cssnano optimizations: it includes autoprefixer (not default), cssnano-util-raw-cache, etc.

Next I look the your documentation: it has the following example:

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var plugins = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano()
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

Well, although it has been said that autoprefixer is one of cssnano optimizations, in the above example it was defined separately. However, I can't to understand from the above example, how to set the desired optimizations from the first link (list of cssnano optimizations).

E. g. I want to use postcss-calc in both development and production builds, however I need to use postcss-normalize-whitespace only in production build. How I should to complete the below code?

const   gulp = require('gulp'),
        gulpIf = require('gulp-if'),
        sass = require('gulp-sass'),
        postcss = require('gulp-postcss')；

const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV === 'develpment';

gulp.task('styles', function(){

    // first the optimizations for both Development and production
    let plugins = [
        autoprefixer({ browsers: ['>= 1%', 'last 5 major versions', 'ie >= 6']}),
        // ...
    ];

    if (isDevelopment) {
        plugins.push(/* plugins for development build */);
    }
    else {
      plugins.push(/* plugins for production build */);   
    }

    return gulp.src(HPath.sassSourceFilesSelection)
        .pipe(gulpIf(isDevelopment, sourcemaps.init()))
        .pipe(sass())
        .pipe(postcss(plugins))

        // ...

});

[michael-ciniawsky]

const env = process.env.NODE_ENV

const plugins = [
   require('postcss-calc')(),
   require('autoprefixer')(...options),
   env === 'production' ? require('postcss-normalize-whitespace')() : false
].filter(Boolean)

[ghost]

Great! I knew what it is possible! Thank you for the quick answer!