Allow overridden styles to re-order in generated CSS

We ran into a weird scenario, where if you passed the following two
objects to css() in this order:

```js
{
  '@media all and (min-width: 1128px)': {},
},
{
  '@media all and (min-width: 744px)': {
    backgroundColor: 'red',
  },
  '@media all and (min-width: 1128px)': {
    backgroundColor: 'blue',
  },
}
```

you would normally expect it to produce a style that has the 744px
min-width media query first. Unfortunately, because the first object
already had that media query as an ordered key in its OrderedElements
object, it maintained its original position. This caused the 1128px
media query to be output first, which is unexpected and ended up causing
a visual bug.

To fix this, I modified OrderedElements to always move overridden keys
to the end. This now behaves more like you would expect regular CSS to
work.

I needed to add a special case for string handlers, since they aren't
actually overriding a style but rather replacing a property with a newly
computed value.

Author: lencioni

src/generate.js

@@ -219,7 +219,12 @@ const runStringHandlers = (
             // handlers are very specialized and do complex things.
             declarations.set(
                 key,
-                stringHandlers[key](declarations.get(key), selectorHandlers)
+                stringHandlers[key](declarations.get(key), selectorHandlers),
+
+                // Preserve order here, since we are really replacing an
+                // unprocessed style with a processed style, not overriding an
+                // earlier style
+                true
             );
         }
     }

src/ordered-elements.js

@@ -19,9 +19,13 @@ export default class OrderedElements {
         }
     }
 
-    set(key /* : string */, value /* : any */) {
+    set(key /* : string */, value /* : any */, preserveOrder /* : ?boolean */) {
         if (!this.elements.hasOwnProperty(key)) {
             this.keyOrder.push(key);
+        } else if (!preserveOrder) {
+            const index = this.keyOrder.indexOf(key);
+            this.keyOrder.splice(index, 1);
+            this.keyOrder.push(key);
         }
 
         if (value == null) {

tests/generate_test.js

@@ -258,6 +258,34 @@ ${formatStyles(actual)}
         }`, defaultSelectorHandlers);
     });
 
+    it('orders overrides in the expected way', () => {
+        assertCSS('.foo', [
+            {
+                "@media (min-width: 400px)": {
+                    padding: 10,
+                }
+            },
+            {
+                "@media (min-width: 200px)": {
+                    padding: 20,
+                },
+                "@media (min-width: 400px)": {
+                    padding: 30,
+                }
+            }
+        ], `
+        @media (min-width: 200px){
+            .foo{
+                padding:20px !important;
+            }
+        }
+        @media (min-width: 400px){
+            .foo{
+                padding:30px !important;
+            }
+        }`, defaultSelectorHandlers);
+    });
+
     it('supports custom string handlers', () => {
         assertCSS('.foo', [{
             fontFamily: ["Helvetica", "sans-serif"]

tests/ordered-elements_test.js

@@ -53,6 +53,38 @@ describe("OrderedElements", () => {
         }, elems);
     });
 
+    it('moves overridden elements to the end', () => {
+        const elems = new OrderedElements();
+
+        elems.set("a", 1);
+        elems.set("b", 1);
+        elems.set("a", 2);
+
+        assert.deepEqual({
+            elements: {
+                b: 1,
+                a: 2,
+            },
+            keyOrder: ["b", "a"],
+        }, elems);
+    });
+
+    it('can preserve order when setting', () => {
+        const elems = new OrderedElements();
+
+        elems.set("a", 1);
+        elems.set("b", 1);
+        elems.set("a", 2, true);
+
+        assert.deepEqual({
+            elements: {
+                a: 2,
+                b: 1,
+            },
+            keyOrder: ["a", "b"],
+        }, elems);
+    });
+
     it("iterates over the elements in the correct order", () => {
         const elems = new OrderedElements();