Unpredictable responsive class overrides

[Patrick Stoica]

Using arrays for responsive properties has issues if you do something like this:

<div>
  <Box bg="red"></Box>
  {/* later... */}
  <Box bg={['red', 'white']}></Box>
</div>

I think the .bg-red class gets created before the white responsive class because of the rendering order, meaning the second box is only ever red.

Maybe a solution is to use important in responsive classes and make sure those are sorted by breakpoint?

EDIT: sorry, I think this belongs in https://github.com/jxnblk/cxs