CSS processing order matters

Hi,

while doing Jewel SimpleLoader component I discover the following css rule:

```
.jewel.loader {
border: 16px solid #f3f3f3
border-radius: 50%
border-top: 16px solid #3498db
}
```

doesn't work as expected. The "border-top" is output before "border" and this make it border takes precedence, while if we left the current order, the browser finds first border and then border-top so making the border top blue instead of grey.

Workaround for now is:

```
.jewel.loader {
border: 16px solid #f3f3f3
border-radius: 50%
}
.jewel.loader.segment {
border-top: 16px solid #3498db
}
```

butis very limiting and cumbersome.

I think we're doing some kind of rule ordering while processing, since no matter how I define the CSS, I get always the same order. I think we should prevent any ordering to avoid this kind of problems that are valid CSS and becomes invalid.

Start by reproducing the Jewel SimpleLoader CSS case and trace the compiler's CSS rule-processing path to find where declaration order changes. Done means valid CSS preserves the intended order so border-top is emitted after border, with a regression test for the reported input.

Written by the indexing model from the issue text.