Improve border output

[everdimension]

Hi!

Thanks for creating this package.

I stumbled upon an issue, though. The css code that was minified with CSSNANO gave me an incorrect result. Here's a demo:
https://codepen.io/everdimension/pen/XPbGQO?editors=1100

[alexander-akait]

Looks problem with border

[andyjansson]

I don't believe this issue persists in current master.

[alexander-akait]

@andyjansson maybe we can tests?

[andyjansson]

The following input..

border-style: solid;
border-width: 4px 0 5px 8px;
border-color: transparent transparent transparent var(--closed-color);

...produces the following output:

border-left: 8px solid var(--closed-color);
border-bottom: 5px solid transparent;
border-right: 0 solid transparent;
border-top: 4px solid transparent;

It's not optimal, but it's at least technically correct. I think we should keep the issue open as something to work on as an enhancement.

[eablokker]

I'm also having issues with border output

This gets transformed

border-width: 2px;
border-style: solid;
border-top: 0;
border-left: 0;

Into this

border-left: 0;
border-style: solid;
border-top: 0;
border-width: 2px;

The border-style: solid; negates the border-left: 0; rendering a broken result.

Why oh why is cssnano rearranging my properties and putting them in alphabetical order? Even if I turn off the cssDeclarationSorter option, it still sorts them this way.

[andyjansson]

@eablokker your issue with mergeLonghand should already been fixed. The only straggling issue in your case would be with cssDeclarationSorter.

[alexander-akait]

Close in favor #535