title: Use props inside emotion's css string template
body: <p>I'm in the middle of migrating my design system from styled-components to emotion.</p>
  <p>In SC, The following syntax is considered valid:</p>
  <pre class="lang-js prettyprint-override"><code>export interface AvatarProps {
    // ...
    shape: AvatarShape;
    size: AvatarSize;
  }
  
  const borderRadiusByShape = css&lt;Pick&lt;AvatarProps, &quot;shape&quot; | &quot;size&quot;&gt;&gt;`
    border-radius: ${(props) =&gt; {
      return match(props.shape)
        .with(&quot;circle&quot;, () =&gt; `${props.size}px`)
        .with(&quot;square&quot;, () =&gt; &quot;0px&quot;)
        ...
        .exhaustive();
    }}
  `;
  
  const StyledAvatar = styled.div&lt;AvatarProps&gt;`
    /* ... */
    ${borderRadiusByShape};
  `;
  </code></pre>
  <p>This pattern allows me to reuse my <code>borderRadius</code> across multiple <code>styled.[x]</code> declarations.</p>
  <p>Looking at emotion's <code>css</code> function, it looks like emotion doesn't support that syntax. Is there any workaround that won't require me to wrap this functionality with a new component?</p>