title: styled-components: worried about FOUC
body: <p>I've been into the <a href="https://github.com/styled-components/styled-components" rel="nofollow noreferrer">styled-components</a> package and I think the developer-friendliness is awesome!</p>
  
  <p>However, I'm worried about 1 thing: <strong>Flash Of Unstyled Content</strong>.</p>
  
  <p>Since in production, as well as in development, the styles get packaged with the javascript chunks; When a component is loaded, the styles are generated and appended (at the bottom of) the <code>&lt;head&gt;</code>.<br>
  This is inherently the same as how CSS Modules work.</p>
  
  <p>Referring to a post of <a href="https://survivejs.com/webpack/styling/separating-css/" rel="nofollow noreferrer">surviveJS</a> I learned to use ExtractTextPlugin to create separate stylesheets (css files) during the production build step.</p>
  
  <p>However, in <code>styled-components</code> CSS is just JS, so we can't use that technique (at least, I couldn't get it to work).</p>
  
  <p>So before I start building my next project with styled-components, can someone take my worries away?</p>