Improve predictability of ordering

[AKST]

Problem outline

Currently ordering is handled pretty well, except there are a few cases where it can fall apart. Take this sample for example using module values.

@value $verticalPadding: media-value(case: "a" as: "10px", else: "5px");
@value $horizontalPadding: media-value(case: "b" as: "10px", else: "5px");

.rule {
  padding: $verticalPadding $horizontalPadding;
}

It isn't immediately clear what the ordering of this will be from looking at it, but the output will produced will be something like.

.rule { padding: 5px 5px; }

@media a {
  .rule { padding: 10px 5px; }
}

@media b {
  .rule { padding: 5px 10px; }
}

Current implementation

At the moment there is no way explicitly define an ordering for them, it'll just output them in the order that it is processed. Since it processes properties from left to right, it encounters the $verticalPadding first which defines "a", next it encounters $horizontalPadding which defines "b", and as it's processing them it builds up the output for each case in a map, and javascript maps retains insert ordering on iteration.

When this isn't an issue

This works fine when there is only one value in a declaration value or two values with the exact same cases with the exact same ordering, however it's not unreasonable to assume that this isn't always the case. However if the rules are defined in a way that they clearly outline a minimum & maximum with no overlap this won't be an issue. So it isn't completely the wild west and the output is deterministic, but yeah... It could be better.