fix(breakpoints): multiple responsive style props

[EmilioAiolfi]

Summary

Hello folks!
There is a bug when passing several responsive style props, the order of the resulting media queries is wrong.
More details on this in issue #119
Example
Code:

<Box 
  pt={{ sm: 0, lg: 60 }}
  pb={{ md: 20, lg: 60 }}
  bg={{ xs: 'blue', md: 'red', lg: 'green', xl: '#000000'}}
>
  hello
</Box>

Test plan

The idea is to organize the order of @Medias based on the breakpoint values. A function was created to guarantee the order of the breakpoints, without the need to add complexity to the merge function.

[gregberge]

Hello @EmilioAiolfi, thanks for this fix! I have to find a way to test it and I think it could alter performances. All xstyled code is heavily optimized, I see a reduce, etc.. It is probably not as performant as expected. I will give a deeper look to fix it based on your work.

[EmilioAiolfi]

Hi @gregberge
I tried to help with this bug by understanding it as something serious, by compromising the use of breakpoints. The problem is to expect a responsibility that I believe would not be the 'util/merge' function. Something like being responsible for @media's orders, and it's something that the merge function really shouldn't know.
About the approach I suggested. it is just one option among so many, but I expected a code review to help with this bug and we managed to solve it.

About this bug is the point of attention about the use of util/merge in reduceBreakpoints and compose

Thanks for @xstyled! I believe in the approach it offers and I insist on trying to help improve it more and more.

[gregberge]

Small perf improvements.

[gregberge]

Thanks!