Empty @keyframes declaration is removed in production mode

import { Global } from '@emotion/react';

function App() {
  return (
    <div>
      <Global
        styles={{
          '@keyframes test-animation': {},
        }}
      />
      <div
        id="test-el"
        style={{
          animationName: 'test-animation',
          animationDuration: '10ms',
        }}
        onAnimationStart={(event) => {
          console.log(event.animationName);
        }}
      />
    </div>
  );
}

export default App;

Expected behavior: 'test-animation' is logged in console. This works fine in development mode, but not in production.

Demo repository: https://github.com/michal-perlakowski/emotion-test

This is causing a bug in Material-UI.

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.4.0

[michal-perlakowski]

@Andarist Stylis’ owner hasn’t replied to the issue and has been inactive on GitHub in general for a few months. Maybe we should fix this in emotion?

[Andarist]

A new version of Stylis has been published - we are going to bump the declared dependency range in Emotion packages sometime later but you should be able to already leverage the fix by pruning Stylis from your lock file and reinstalling packages.