Khan / aphrodite / 423

100%

master: 0%

push

travis-ci

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.

117 of 117 branches covered (100.0%)

4 of 4 new or added lines in 1 file covered. (100.0%)

268 of 268 relevant lines covered (100.0%)

49.26 hits per line