Sort media queries mobile-first

[bensmithett]

Fela doesn't necessarily respect the order in which you write media queries, since all the rules for each media query get bundled up into a single <style> tag for SSR.

E.g...

<div className={css({
  color: 'red',
  '@media (min-width: 500px)': { color: 'blue' },
  '@media (min-width: 900px)': { color: 'green' }
})}>

...can result in this HTML...

<style>.a { color: red; }</style>
<style media="(min-width: 900px)">.c { color: green; }</style>
<style media="(min-width: 500px)">.b { color: blue; }</style>

On a 1000px viewport, both media queries match so the one you see depends on HTML ordering.

This is a bit of an issue with mobile-first CSS itself - our intent is usually to scope styles to a specific range but the @media rules we write don't actually reflect that. It just kind of works in traditional CSS because the order you write rules is maintained in the output.

This can be fixed by scoping rules more accurately to a media query where they're expected to apply. In the example above, we really mean we want blue in the 500-899px range, so let's adjust our media query to reflect that:

<div className={css({
  color: 'red',
  '@media (min-width: 500px) and (max-width: 899px)': { color: 'blue' },
  '@media (min-width: 900px)': { color: 'green' }
})}>

However mobile-first is super prevalent and people are going to write styles like that, so we can make things behave a bit more intuitively with https://github.com/robinweser/fela/tree/master/packages/fela-sort-media-query-mobile-first