Minify breaks calc()

[melinadonati]

Hi ! I am currently using your Gulp version and it's great. I encountered a problem with the minification though.

The CSS "calc()" function needs preserved spaces inside, or the browser won't be able to read the calcul. CSSNEXT currently turns "calc(100% + 44px)" into "calc(100%+44px)".

Could you update so it won't break anymore ? :-)

Thank you ! (❁´◡`❁)✲ﾟ

[bloodyowl]

this isn't the concerned repository, although:

this problem is that cssnano (the minifier) migrated to postcss 5, and created the fix for this after the migration, which makes it incompatible with cssnext in its current state. although the next version is created as postcss plugin: https://github.com/cssnext/postcss-cssnext. something like this should work

var gulp = require("gulp")
var postcss = require("gulp-postcss")

var cssnext = require("postcss-cssnext")
var cssnano = require("cssnano")

gulp.task("css", function () {
  var plugins = [
    cssnext({ ...options }),
    cssnano(),
  ]
  return gulp.src("source/**.css")
    .pipe(postcss(plugins))
    .pipe(gulp.dest("dist/css"))
})

[MoOx]

@bloodyowl the example with gulp is not the best since this repo is for brunch :) @melinadonati I must admit that cssnext is kind of outdated. My recommendation will be to use postcss-brunch instead of cssnext-brunch, and use the plugins mentionned here https://github.com/cssnext/postcss-cssnext#options in addition to postcss-cssnext in this order: postcss-import, postcss-url, postcss-cssnext, postcss-browser-reporter and cssnano when you want to minify. Note: if you want to help us to prepare official deprecation of cssnext, please share your snippet after upgrading to this recommended setup, that will help us (we have a lot of runners to deprecate in favor of postcss runners, see https://github.com/cssnext/cssnext/issues/208 if you want to know why)

[bloodyowl]

@moox

I am currently using your Gulp version and it's great.

[MoOx]

Oh sorry, I missed that :)