Using cx in order to use two css blocks on one div is not working in react-emotion 9

Question

Due to limits on other packages I have a solution that's using react-emotion 9.

I'm trying to implement one div using two css blocks through the cx functionality described here: https://emotion.sh/docs/migrating-to-emotion-10

Only one of the css blocks seems to be applied.

import { css, cx } from 'react-emotion';

const foo = css`{
   font-size: small;
   font-weight: bold;
   padding: 8px;
 }`

const bar = css`{
  background-color: #def5de;
  color: #42c542;
}`

return (<div>
          <div className={cx(foo, bar)}>
            Text
          </div>
        </div>
       );

According to the documentation this should work however in practise only foo is used. bar seems to be generated with a generic name but doesn't contain any css.

Any help would be appreciated