Wrong @-rule Resolution

[robinweser]

I have only tested this with media queries only, but I guess it's also true for @container and @support rules.
Actually, there are 2 different issues. The first one I'd consider an actual bug:

const App = (
  <>
    <Box
      style={{
        backgroundColor: 'red',
        '@media (min-width: 600px)': {
          backgroundColor: 'blue',
        },
      }}>
      Box 1
    </Box>
    <Box
      style={{
        backgroundColor: 'blue',
        '@media (min-width: 600px)': {
          backgroundColor: 'red',
        },
      }}>
      Box 2
    </Box>
  </>
)

Both boxes are red by default and turn blue at 600px.

---

The second one is yet another ordering issue.
Media queries are rendered in the order they appear, so if I mix it up and render a smaller one after a bigger one, I will never actually reach the bigger one as the latter overwrites it entirely.

const App = (
  <>
    <Box
      style={{
        backgroundColor: 'red',
        '@media (min-width: 420px)': {
          backgroundColor: 'blue',
        },
        '@media (min-width: 600px)': {
          backgroundColor: 'green',
        },
      }}>
      This works
    </Box>
    <Box
      style={{
        backgroundColor: 'yellow',
        '@media (min-width: 600px)': {
          backgroundColor: 'gray',
        },
        '@media (min-width: 420px)': {
          backgroundColor: 'purple',
        },
      }}>
      This doesn't work
    </Box>
  </>
) 

While this might be technically right, I would personally mobile-first order. Since this would be another opinionated option, this might be yet another use case for a createCSS factory with some config options.

[souporserious]

Thanks for testing, that was a bug in the cache key! It should be fixed now in 1.0.1 😎

As for the second issue, I agree, I think media queries should be sorted, but I think this is an implementation detail for the consumer. Yeah, factory function is the way to go. I want to add one that returns the pragmas as well something like const { css, jsx, jsxs, jsxDEV } = createSystem(...)

[robinweser]

😍
In that case, I might build a wrapper that supports most existing Fela plugins including RTL conversion, responsive values, media query order and more.
Only downside is that you'd have to bundle your configured css as well if you wanna ship to npm, so probably more of a solution for e.g. design systems and component libraries.

[souporserious]

Yeah, exactly where I want to land with this library since it mostly shines for other library authors that want to ship CSS to NPM. So it should be just good enough to inject CSS reliably with a small footprint and let others build solutions on top for more control.

[souporserious]

Closing this since the original issue has been fixed. When the transformer lands I'll add a guide for how to sort media queries yourself.