The serialization for declaration block with variable reference in shorthand while some longhand is set differently can lead to undesired result, i.e. it would produce non-idempotent result.

For example, for a declaration block like

margin: var(--foo);
margin-top: 10px;

in the current algorithm would be serialized to something like

margin-right: ;
margin-bottom: ;
margin-left: ;
margin-top: 10px;

which apparently doesn't have the same meaning as before. This is unfortunate.

We should probably change the serialization algorithm to that, when we find a longhand which is expanded from some shorthand with variable reference, the shorthand reference is always serialized. If there are longhands that have been changed from the expansion of shorthand (like margin-top in the case above), the longhands are not added to already serialized, so that their value is still preserved and will be serialized later.

The above algorithm should works fine with declaration block from parsing, since the parsing result uses specified order, and thus any update to longhand which was expanded from a shorthand would always come after the shorthand. However, there is currently some problem with CSSOM setters, because in the spec they still set in place rather than append.

For that, we've resolved in #1898 (comment) that setters should append rather than set in place, so this is probably not a problem anyway. We may still want that change to happen first, though.

cc @csnardi