O0 is not equivalent to O1 all:off

Environment

• clean-css version - npm ls clean-css: 4.1.5
• node.js version - node -v: 8.1.0
• operating system: macOS 10.12.5

Configuration options

-O0

cleancss public/styles.css -o public/clean.css -O0

-O1 all:off

cleancss public/styles.css -o public/clean.css -O1 all:off

Input CSS

* {
  min-width: 0%;
}

Actual output CSS

-O0

*{min-width:0%}

-O1 all:off

*{min-width:0}

Note that the % unit has been removed.

Expected output CSS

*{min-width:0%}

Why does this matter? Because, due to flexbox bugs in IE11, min-width: 0 is interpreted as min-width: 0px, which is not evaluated the same way as min-width: 0% (even though they are, to the best of my knowledge, equivalent according to the spec). I have a repro where 0px causes a layout glitch in IE11, and 0% does not! You can use the IE11 web dev tools to change the unit back and forth between 0px and 0% and see things break and unbreak. Maddening, hey?

What’s doubly painful for me is… I can’t find which clean-css configuration option is causing the % unit to be stripped. I’d like to turn that config option off, but it doesn’t seem to be documented, and I haven’t be able to find it by doing a brief source dive. If I can’t turn this unit stripping off, I’m afraid I’ll be stuck using O0 to compile my projects, which basically defeats the purpose of using clean-css at all.

So, two things I’d love:

1. I’d love -O1 all:off to be equivalent to -O0, or alternatively for the difference to be documented.
2. I’d love to know why unit are being stripped when run with -O1 all:off, and what config option I can set to stop units from being stripped.

Cheers!

[jakubpawlowicz]

This issue has been long overdue, but in clean-css 5.x 1) the level 1 optimizations are applied on a much more fine-grained level, see https://github.com/clean-css/clean-css/blob/master/lib/optimizer/configuration.js#L1172, and 2) zeroUnits compatibility flag is always respected, see https://github.com/clean-css/clean-css/blob/master/lib/optimizer/level-1/value-optimizers/zero.js#L36

One can run now this and they will be fine:

var CleanCSS = require('clean-css');
new CleanCSS({compatibility: {properties: {zeroUnits: false}}, level: {1: {all: false}}}).minify('*{min-width:0%}')

Hope it still helps someone.

[jakubpawlowicz]

Given there are restrictions when units are removed you are probably right!