Prevent ordering issues with media queries

[mihalik]

Fixes #47. See issue for discussions of other ways to solve the issue.

Due to how rules are rendered and cached in cxs, the ordering of rules for a specific element is nondeterministic. This is not a problem in most cases due to css specificity, but media queries don't increase specificity so the ordering is important. This PR enforces a specific ordering of media queries by always putting them into a second style block on the page.

This has a chance of being a breaking change if someone is relying on a media query to be included before the base rule. But, I think most people write their css with media rules at the end and the previous resolution was nondeterministic.

I have tested this in the example and my own application which has a number of media rules and everything works well. But, there might be a different usage pattern that I might have missed that would cause problems.

A few other notes:

• This is only needed for the two atomic modes, not monolithic.
• I added a media query to the example and fixed css() => getCss() that seemed like it changed at some point
• This always injects a second style object, even if no media rules are being used. I considered having this happen only when a media rule is encountered. I like the fact the current version guarantees that the two style blocks are injected together but could be convinced it is not worth the overhead for users not using media rules.

[gingur]

+1

[asilvas]

+1

[jxnblk]

LGTM thanks!