title: Duplicate style render on SSR
body: <p>I'm currently developing CMS with Gatsby and emotion.
  Style is duplicately generated even same class is allocated.</p>
  
  <p>I think there's multiple of solution(like using postCSS), but I'd like to grasp the cause of it.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import tw from 'twin.macro';
  import styled from '@emotion/styled';
  const StyledComponent = styled.section``;
  const Section = ({ component: Component, children, ...other }) =&gt; (
    &lt;StyledComponent css={tw`bg-white`} {...other}&gt;
      {children}
    &lt;/StyledComponent&gt;
  );
  </code></pre>
  
  <p>Here's rendered result on browser(CSS Style is literally duplicated)</p>
  
  <p><a href="https://i.stack.imgur.com/mpLpj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mpLpj.jpg" alt="enter image description here"></a></p>
  
  <p>Above problem occurs only in production environment.</p>