How to keep duplicate properties in compiled CSS file when use LESS?

Question

LESS code

.foo {
  background-size: 200px; //for old browsers
  background-size: cover;
}

CSS expected

.foo {
  background-size: 200px; 
  background-size: cover;
}

but less.js remove the first background-size property in compiled CSS file.

Answer 1

AS already pointed out by @seven-phases-max clean-css removes these properties.

Notice that the --advanced has been set by default. You should use the --skip-advanced option to prevent your double properties from being removed.

According to https://github.com/less/less-plugin-clean-css the advanced option has been set to false by default.

lessc foo.less outputs:

.foo {
  background-size: 200px;
  background-size: cover;
}

lessc --clean-css foo.less outputs:

.foo{background-size:200px;background-size:cover}

lessc --clean-css="advanced" foo.less outputs:

 .foo{background-size:cover}

Alternatively you could run lessc -x foo.less which also outputs:

.foo{background-size:200px;background-size:cover}