css composition with template liters results in different styles when compiled for production

[mike1808]

Current behavior:

When I use @emotion/css to compose class in the following way the end result is different in the development environment and in the production environment transpired with babel via webpack.

import { css } from '@emotion/css'

const classA = css`
    height: 100%;
    flex-grow: 1;
    pointer-events: auto;
`
const classB = css`
    ${classA}
     width: 40%;
     flex-grow: 0;
`;

In the development environment this works as expected and the final styles for classB are { flex-grow: 0 }. However, in the production environment it's { flex-grow: 1 }.

To reproduce:

It's actually very hard to reproduce in code sandbox and I couldn't reproduce this in a separate project with a simple webpack --mode=production script.

Expected behavior:

The later class styles should override previous styles.

Environment information:

• react version: 16.14.0
• @emotion/react version: 11.7.0
• @emotion/css version: 11.5.0