[system] Wrong order of media queries

[caticodev]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When using Box the generated media queries should be in correct order

Current Behavior 😯

When property display is added only for higher media query and not for lower, the order of media queries is wrong

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/green-brook-6itw1

1. In the demo change window size to see the described bug
2. Check the inspector that media queries are in fact in wrong order

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.2.0
React	v.16.8.0
Browser	Chrome 75

[oliviertassinari]

@cat-ico Thank you for the reproduction, I can confirm the problem with:

import { palette } from '@material-ui/system';

describe.only('palette', () => {
  it('borken', () => {
    console.log(
      palette({
        theme: {},
        bgcolor: { xs: 'white', sm: 'pink' },
        color: { sm: 'flex' },
      }),
    );
  });
});

It outputs:

{ '@media (min-width:600px)': { color: 'flex', backgroundColor: 'pink' },
  '@media (min-width:0px)': { backgroundColor: 'white' } }

[jonasms]

I'm running into this bug as well. It may be the case that re-running the build process fixed the issue? It's not consistently reproducible in my case 🤔.

[mark-tate]

I've a fix for this... will push up a PR later