loadable-components example requires JS enabled to display CSS in development

[thomasjm]

🐛 Bug report

Current Behavior

Normally I like to debug server-side rendering by disabling Javascript in my browser and loading the page to see how it looks.

Unfortunately, this isn't working with the examples/with-loadable-components example when I use CSS modules like Tachyons, because the CSS goes into the main client.js file in some code connected to css_loader. Thus, rendering the page without JS enabled doesn't accurately reflect what a server-side render should look like.

In production builds on the other hand, we get <style> tags inserted into the page.

Expected behavior

All CSS should always be inserted into the server-rendered page in a non-JS-requiring way, including in development.

Reproducible example

https://github.com/thomasjm/razzle/tree/loadable-components-css/examples/with-loadable-components

Repro is as follows:

git clone [email protected]:thomasjm/razzle.git --branch loadable-components-css
cd razzle/examples/with-loadable-components

npm install
npm run build
npm run start

# Open localhost:3000 in browser
# Notice that the heading has a red color due to a CSS rule from Tachyons

# Now, open browser dev tools, disable Javascript, and refresh the page
# You should see that the heading isn't red, because the CSS isn't there anymore.

Suggested solution(s)

Perhaps don't use the Webpack CSS loader in development? Not sure what the implications of that would be.

[thomasjm]

Oh, I just discovered the staticCssInDev: true option, which resolves the issue.

I guess the question is, could we both have our cake and eat it too? I'd like to have both CSS hot loading and have my CSS extracted into separate CSS files.

If not, would it be possible to automatically apply the staticCssInDev behavior to CSS files that live in node_modules?