Minifying 0px within calc statements breaks them

[appsforartists]

See webpack/webpack#666

Chrome (and probably others) chokes on the unitless 0 in calc:

width:calc(100vw/2 - 6px + 0)

[ben-eb]

@appsforartists Just curious, why would you use a selector such as this (with the 0px)?

div {
    width: calc(100vw / 2 - 6px + 0px);
}

[appsforartists]

@ben-eb It'd be generated by a tool like SASS if you set a variable to 0px.

[ben-eb]

@appsforartists Ideally then, CSSO should minify this to:

div {
    width: calc(100vw / 2 - 6px);
}

Or, just leave it alone. 😄

[appsforartists]

Yup!

[jsor]

Looks like it is also mangling time values like 0s or 0ms to 0 which is invalid.

[azamat-sharapov]

It's breaking calc()s generated by https://github.com/corysimmons/lost/
Using webpack also. Any workaround?

[ben-eb]

@azamat-sharapov I maintain https://github.com/ben-eb/cssnano, a modern alternative to CSSO which is based on PostCSS.

[azamat-sharapov]

@ben-eb thanks! So, for this case, workaround would be disabling css-loader's internal minification and compile CSS through your cssnano?

[ben-eb]

New installs of css-loader use cssnano. 😄

[azamat-sharapov]

You are right. Then I should check if it's cssnano breaking calc() or something else ;)

[ben-eb]

@azamat-sharapov Seems it was a regression introduced some time ago. I've added a test for it, try 3.0.2. 😄

[azamat-sharapov]

@ben-eb thanks for the quick fix! it's working now!