@media styles are applied in the wrong order

Current behavior:

When using the ‘@media…’ selector, the styles are always applied after non-media styles, regardless of their order in the styles array.

To reproduce:

Here’s a simple example:

<div css={[
  { '@media screen': { color: 'blue' } },
  { color: 'red' }
]}>Text</div>

I would expect the text to be red, but it comes out blue!

Here’s a live example: https://codesandbox.io/s/emotion-issue-template-l9u7q?file=/src/index.js

Expected behavior:

I’d expect media selectors to be applied based on their order in the array instead of always being applied to the end of the list.

Here’s the equivalent example written with plain css to show what it should work like: https://jsfiddle.net/boe1k3zt/1/

Environment information:

• react version: 16.13.1
• emotion version: 10.0.28

[garronej]

Hi @Andarist,
Just to reiterate on the discussion we have here This strategy is problematic for component libraries that uses emotion (bigger of them being MUI),
because of this behaviour there is no way for users to predictably overwrite the component style.

Take for example this component:

LibButton.tsx

import { css, cx } from "@emotion/css";

type Props = {
	className?: string;
	text: string;
	onClick: () => void;
};

export function LibButton(props: Props) {

    const { className, text, onClick } = props;

    return (
        <button
            className={cx(
                css({
                    "@media screen and (min-width: 800px)": {
                        "width": 200
                    },
                    "width": 100
                }),
                className
            )}
            onClick={onClick}
        >{text}</button>
    );

}

The end user has no easy way to overwrite the button width using @emotion. If he writes:

import { LibButton } from "lib/Button";
import { css, cx } from "@emotion/css";

render(
        <LibButton 
            className={css({ "width": 600 })} 
            onClick={() => { }}
        >
            Hello world
        </LibButton>
)

The button will only take a width of 600px on small screens.

Anyway, thanks for all your work.

[Andarist]

Closing this because it’s not something that we plan on changing - the current strategy has been proven rather successful given this is the only created issue about this behavior.