Invalid CSS output from function based dynamic styles

Current behavior:

Using an array of styles leads to invalid CSS properties in the DOM named label, name, and styles.

On the first style passed, the invalid CSS prop label does not appear in the DOM, but for subsequent styles it does. Additionally the first rule in the CSS in each style passed is nested invalidly like so: styles: color: red;

To reproduce:

Can’t reproduce this issue on CodeSandbox - so possibly related to babel or webpack would be my guess. Does the order of babel plugins matter when including the emotion plugin? I get this issue whether I use the plugin or not.

Expected behavior:

No invalid props in the DOM and the first rule is not mangled and ignored.

Environment information:

• react version: 16.9.0
• emotion version: 10.0.17

[Dajust]

Just encountered this problem while migrating from v9 to v11. Removing emotion from babel plugins fixed it for me as I already have @emotion/babel-preset-css-prop in babel presets.

[Andarist]

Unfortunately, nothing comes to my mind as to what we could do to warn about smth like this.