[Bug] : The default preset breaks border related styles by cssDeclarationSorter

[naruaway]

Describe the bug
The latest version of cssnano (5.0.1) 's default preset breaks border related styles by cssDeclarationSorter.

To Reproduce
Please take a look at the minimum reproducible example.

Expected behavior

.border-top-test {
  border-color: purple;
  border-top-width: 1px;
  border-top-style: solid;
}

should not be broken by cssnano's default preset.
Currently the output is

.border-top-test {
  border-color: purple;
  border-top: 1px solid;
}

and the top border color is no longer purple.

Additional info

• CSSNANO Version: 5.0.1
• Plugins/presets versions: cssnano-preset-default@5.0.0
• It is reproducible in several environments including Linux and macOS

[alan-agius4]

We can also see this issue in other cases

angular/angular-cli#20693
ionic-team/ionic-framework#23266

[ludofischer]

Could be a bug in css-declaration-sorter since cssnano uses the keepOverrides option that should prevent these problems:

cssnano/packages/cssnano-preset-default/src/index.js

Line 53 in 06730cd

keepOverrides: true,

Maybe we have to fix it in https://github.com/Siilwyn/css-declaration-sorter. The problem is that css-declaration-sorter has also dropped Node.js 10 compatibility. So it would be more difficult to update to a new release.

[alexander-akait]

@ludofischer maybe we should just change order of plugins

[ludofischer]

@ludofischer maybe we should just change order of plugins

Is there a reason besides improving gzip compression that cssnano uses css-declaration-sorter? Because in my tests so far it makes compression worse, so we could remove it.

[alexander-akait]

hm, I think we need test it, it always seemed to me that sorting reduces the gzip size

[ludofischer]

#1071 fixes this (the CSS in this issue has been added to the test cases)