Only the first one of multiple comma-separated animations is played

Current behavior:

I’m migrating from styled-components to emotion and a few of my animations broke: only the first one of multiple comma-separated animations is applied to the component. Specifying multiple keyframes work as expected.

To reproduce:

CodeSandbox: https://codesandbox.io/s/emotion-multiple-animations-error-srnk1?file=/src/App.tsx

Expected behavior:

All of the animations are applied to the component.

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.4.0
• @emotion/styled version: 11.3.0

[Andarist]

@iChenLei thank you for investigating this - the provided information was helpful to me and I could start thinking about the problem sooner thank that

The line in question has fixed some other issues that were there in the past: https://github.com/emotion-js/emotion/pull/1560 . I’m afraid that given how things are handled it’s not really possible to fix this issue here easily. I’m also not really sure if this is an issue - it might differ from what was working in Styled Components but conceptually the result of css has always been a class name. Class names represent valid CSS declarations and smth like this (spin 4s infinite linear) ain’t a valid declaration (or a declaration list~).

I’ve quickly hacked some helpers that could be used to pass around animation definitions like this: https://codesandbox.io/s/emotion-multiple-animations-error-forked-bl9r4?file=/src/App.tsx:1728-1763 . The code in this codesandbox could be probably vastly improved and I won’t guarantee that it works for all cases - this is just a very quick experiment.

All things considered - I don’t think it’s a bug in Emotion, the behavior is just different from Styled Components.

[Andarist]

@Andarist I didn’t know the result of css is a class name,

To make it clear - this is not technically true for css coming from @emotion/react. It is true for css from @emotion/css - but conceptually they represent the same thing (in case of @emotion/react it’s just an alternative representation of a class name).

The emotion docs didn’t explicitly mention that combining essentially CSS partials

If you think we could improve our docs anyhow - let us know.