Declarations in between duplicate properties are removed (!) leading to data loss

[mathiasbynens]

The following CSS is incorrectly minified:

canvas {
    -ms-interpolation-mode: nearest-neighbor; /* IE */
    image-rendering: -webkit-optimize-contrast; /* Old Android, Safari, UC Browser */
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: crisp-edges; /* Safari */
    -ms-interpolation-mode: nearest-neighbor; /* Note: this is a duplicate! This triggers the bug */
    image-rendering: pixelated; /* Chrome & Opera */
}

Note that -ms-interpolation-mode property appears twice (this is code generated by Autoprefixer — don’t ask). In this case, it seems that everything in between the two duplicate properties is removed while minifying!

Actual minified output:

canvas{-ms-interpolation-mode:nearest-neighbor;image-rendering:pixelated}

Expected minified output:

canvas{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}

Simple test case to reproduce the issue:

'use strict';
const CleanCSS = require('clean-css');
const source = `
canvas {
    -ms-interpolation-mode: nearest-neighbor; /* IE */
    image-rendering: -webkit-optimize-contrast; /* Old Android, Safari, UC Browser */
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: crisp-edges; /* Safari */
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated; /* Chrome & Opera */
}
`;

const minified = new CleanCSS().minify(source).styles;
console.log(minified);

[mathiasbynens]

I’ve managed to narrow down the problem some more. It has to do with properties getting several different values (as happens frequently with vendor-prefixed values). Everything works fine if all the properties follow one another directly:

example {
    foo: -webkit-bar;
    foo: -moz-bar;
    foo: -ms-bar;
    foo: bar;
}

This gets minified correctly, as expected.

However, throw in any other property between the sequential foo declarations, and the bug kicks in:

example {
    foo: -webkit-bar;
    foo: -moz-bar;
    foo: -ms-bar;
    c-c-c-combo: breaker;
    foo: bar;
}

This results in example{c-c-c-combo:breaker;foo:bar}, i.e. all the declarations with vendor-prefixed values are gone. 😢

---

Updated/simplified test case:

'use strict';
const CleanCSS = require('clean-css');
const source = `
example {
    foo: -webkit-bar;
    foo: -moz-bar;
    foo: -ms-bar;
    c-c-c-combo: breaker;
    foo: bar;
}
`;

const minified = new CleanCSS().minify(source).styles;
console.log(minified);

[jakubpawlowicz]

Currently clean-css expects same properties to be declared in a successive order (which is a good practice anyway), however there's an outstanding bug opened to make it more flexible: #290.

You can use --skip-aggressive-merging in the meantime.
Closing this bug as a duplicate.