React Server side rendering of CSS modules : <p>The current practice for CSS with React components seems to be using webpack's style-loader to load it into the page in.</p>

<pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            &lt;div className={style.demo}&gt;Hello world!&lt;/div&gt;
        );
    }
}
</code></pre>

<p>By doing this the style-loader will inject a <code>&lt;style&gt;</code> element into the DOM. However, the <code>&lt;style&gt;</code> will not be in the virtual DOM and so if doing server side rendering, the <code>&lt;style&gt;</code> will be omitted. This cause the page to have <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content" rel="noreferrer">FOUC</a>.</p>

<p>Is there any other methods to load <a href="https://github.com/css-modules/css-modules" rel="noreferrer">CSS modules</a> that work on both server and client side?</p>
