Fix declaration-block-no-redundant-longhand-properties autofix for border-width shorthand

[timkuehnlein]

What steps are needed to reproduce the bug?

This syntax will raise the warning Expected shorthand property "border-width" (declaration-block-no-redundant-longhand-properties)Stylelint[declaration-block-no-redundant-longhand-properties](https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties).

div {
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 3px;
}

It will be fixed to the following code. (The order of the original items is not relevant.)

div {
    border-width: 0 2px 3px 1px;
}

If two values should be combined, this leads to the same error:

div {
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 1px;
}

becomes:

div {
    border-width: 0 2px 1px 1px;
}

What Stylelint configuration is needed to reproduce the bug?

{
"extends": [
"stylelint-config-standard"
]
}

How did you run Stylelint?

Stylelint demo

Which version of Stylelint or dependencies are you using?

stylelint@15.8.0
stylelint-config-standard@33.0.0

What did you expect to happen?

div {
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 3px;
}

Should become:

div {
    border-width: 0 1px 2px 3px;
}

If two values should be combined, this leads to the same error:

div {
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 1px;
}

Should become:

div {
    border-width: 0 1px 2px;
}

What actually happened?

div {
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 3px;
}

Wrongly becomes:

div {
    border-width: 0 2px 3px 1px;
}

If two values should be combined, this leads to the same error:

div {
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 1px;
}

Wrongly becomes:

div {
    border-width: 0 2px 1px 1px;
}

Does the bug relate to non-standard syntax?

No response

Proposal to fix the bug

No response

[ybiquitous]

@timkuehnlein Thanks for the report with reproducible examples! I can reproduce the bug with this demo. 👍🏼

I've labeled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to fix a bug in a rule in the Developer guide.

[mattxwang]

@timkuehnlein a PR is welcome, but I will also likely add this to my own personal backlog of autofix issues to resolve. Let us know either way!

[Mouvedia]

If the autofix really does top | bottom | left | right instead of top | right | bottom | left this is a major bug.