Cssnano: Which Optimization Removes Spaces between Selectors and Brackets?

[tohuw]

Which of the optimizations removes whitespace between selector names and brackets, such that e.g. div { color: red } becomes div{color:red}? I'd have thought that was 'normalizeWhitespace' or 'rawCache', but nope, already disabled those.

I'm trying to create a dev configuration, which will do many cssnano processing rules but not minifying ones: output nice, readable css without whitespace tinkering too much.

[andyjansson]

What version are you running and what's your configuration?

[tohuw]

Version is 4.0.0-rc.2

Here's my gulpfile.js:

var gulp = require('gulp');

gulp.task('css', function () {
    var sourcemaps = require('gulp-sourcemaps');
    var postcss    = require('gulp-postcss');
    var csssource = './themes/qalal/build/css/*.css';
    var cssdest = './themes/qalal/static/css';

    return gulp.src(csssource)
        .pipe( sourcemaps.init() )
        .pipe( postcss([
            require('precss')({}),
            require('postcss-assets')({
                basePath: './output',
                cache: true,
                cachebuster: true,
                loadPaths: ['./images', './theme/images'],
            }),
            require('postcss-font-magician')({
                hosted: ['./themes/qalal/static/fonts/', '/themes/fonts/'],
                // foundries: 'hosted, custom',
            }),
            require('postcss-short')({}),
            require('postcss-cssnext')({
                autoprefixer: {
                    browsers: ['last 2 versions'],
                },
            }),
            require('cssnano')({
                preset: ['default', {
                    normalizeWhitespace: false,
                    rawCache: false,
                }],
            }),
        ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest(cssdest) );
});

gulp.task('default', ['css']);

[tohuw]

I've come to realize the transforms are not being excluded as I expect. I was sure they were before... what have I started doing wrongly?

EDIT: Disregard this, I accidentally didn't install cssnano@next when rebuilding, so I wasn't on 4.x code yet... my original question persists, though.

[yoannisj]

I have stumbled upon a similar problem, trying to enable/disable normalizeWhitespace depending on the environment I am running in.

In development environment, I want to enable some of the optimisations only in order to anticipate problems that could occur when minifying in production. But not all of them, so my code stays readable.

var options = { zindex: true, normalizeWhitespace: false };
if (environment == 'prod') options.normalizeWhitespace = true;

cssnano({ preset: ['default', options] });

When the environment variable is set to 'dev', this works as expected. But it does NOT apply the normalizeWhitespace optimisation when the environment variable is set to 'prod'.

It seems like passing the normalizeWhitespace key in the options always disables this optimisation, no matter if the passed value is true or false.

This was tested with nanocss 4.1.0

[andyjansson]

@yoannisj You should create a separate issue for this. Additionally, have you tried setting exclude?

var options = {
  ...
  normalizeWhitespace: {
    exclude: true,
  }
  ...
};
if (environment === 'prod') {
  options.normalizeWhitespace.exclude = false;
}

[andyjansson]

Closing this in favour of #600