CSS processing order matters

[carlosrovira]

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.