title: Server-side rendering of CSS modules
body: <p>I am going to import styles with <strong>CSS Module</strong> and make it work with server-side rendering. I tried the following methods but each one has its own caveat. What is the best possible way to <code>require('.style.scss')</code> if any side effects?</p>
  
  <ol>
  <li><p>Using the <a href="https://github.com/css-modules/css-modules-require-hook" rel="nofollow noreferrer">css-modules-require-hook</a>:</p>
  
  <p><strong>Advantage</strong>: Easy to configure. You just need to call the hook at the beginning of server code. You don't need to modify components.</p>
  
  <p><strong>Caveat</strong>: It modifies the <code>require.extensions</code> global object, which is <strong>deprecated</strong>.</p></li>
  <li><p>Using the <a href="https://github.com/kriasoft/isomorphic-style-loader" rel="nofollow noreferrer">isomorphic-style-loader</a>:</p>
  
  <p><strong>Advantage</strong>: No more hooks to <code>require.extensions</code>.</p>
  
  <p><strong>Caveat</strong>: Wrapping components with HOCs that uses the React <code>Context</code>, which is an <strong>experimental</strong> API and likely to break in future releases of React.</p></li>
  <li><p>Using the <a href="https://github.com/halt-hammerzeit/webpack-isomorphic-tools" rel="nofollow noreferrer">webpack-isomorphic-tools</a>:</p>
  
  <p><strong>Advantage</strong>: No dependency on <code>require.extensions</code> or <code>Context</code> (AFAIK).</p>
  
  <p><strong>Caveat</strong>: Wrapping server inside webpack-isomorphic-tools instance. And can we please get rid of <strong>webpack-assets.json</strong>?</p></li>
  <li><p>Bundling server with <strong>Webpack</strong>:</p>
  
  <p><strong>Advantage</strong>: No more hooks or injections.</p>
  
  <p><strong>Caveat</strong>: In development, it is very cumbersome to bundle everything whenever the code changes and even makes it <strong>harder</strong> to debug in a large bundled <code>.js</code> file. Not sure - you may need to pass a bundled <code>.js</code> to test runner.</p></li>
  </ol>
  
  <p><strong>Disclaimer</strong>: </p>
  
  <ul>
  <li>The advantages and caveats below are just my two cents, and actually I love all the libraries, plugins and approaches they took to solve the problem and really appreciate their efforts. </li>
  <li>I am not a native English speaker, please correct me if I misrepresent myself.</li>
  </ul>