Rule list order should be preserved after Emotion.makeDict

[wegry]

On current master, the order of properties is backwards from how it ultimately ends up in CSS.

  Css.[
    background(red),
    borderBottom(px(5), solid, black),
    width(px(50)),
    height(px(50)),
    margin(px(10)),
];

margin: 10px;
height: 50px;
width: 50px;
border-bottom: 5px solid #000000;
background: #FF0000;

Presumably this is because here we reverse the rule list before passing it into the JS object creator.

I noticed this because of the interaction between properties like border and border left. Order matters in this case.

Changing the order to match existing CSS was part of #92, but was stripped out with the merge changes I'd added. I've been using my own fork because of this, but I'd like to have it patched upstream. What better than a major release?

[giraud]

The reverse has been introduced here #23 with the rewrite of bs-css and is discussed in the issue.
It's about merging styles (list), but the arguments are not very strong imo so I feel it's ok to remove that reverse operation.

[baldurh]

This will have to be explained very well in the changelog/release notes since this changes how rules override other rules. Meaning if you have

let base = Css.([color(blue)]);
let style = Css.([color(red), ...base]);

version 8 will end up with color: blue whereas earlier versions will get color: red

[wegry]

The fact that the previous styling was backwards is a headache, but fixing it is essential to #86 I think.

[giraud]

yes, it needs to be written in release notes, but if you don't reverse the list you get exactly what you write, it's less magic

[baldurh]

I agree it was completely unintuitive. Overriding rules in the reverse order makes no sense and this was mainly added so that you could override rules and use the spread operator. This will not fix #86 though since you always lose duplicate selectors using this method. I’m working on a PR for new merge methods which will definitely solve this. I’m just doing final refinements to it :)