Server rendering with dynamic imports and CSS

So I’ve got loadable-components working wonderfully with almost everything - Webpack 4 is happy, HMR (for dev) is happy, tests where dynamic imports need to resolve first are happy, etc.

But the part I’m a bit stuck on is server-side rendering with dynamic imports and per-module CSS files. I’m using MiniCssExtractPlugin, as ExtractTextPlugin is now deprecated. The CSS is splitting just fine. As an example, if I log the Webpack assets that are generated, I can see things like:

Descriptions:
   { css: 'Descriptions.efb10258987bd945.css',
     js: 'Descriptions.46113354beab1663.js' },

…but this is a problem, as whilst loadable-components does a brilliant job of splitting the JS and then recombining it server-side, the split CSS (and I presume other assets such as images?) isn’t coming along for the ride. As a result, only the “non-dynamic” CSS is delivered with a pure SSR render (client-side JS disabled to test, as the client will insert the CSS once it starts up).

I’ve tried as a hacky solution getting MiniCssExtractPlugin to combine all the CSS into one file, avoiding the issue entirely, but when I do that it breaks JS entry points and all SPA functionality is lost.

Is there a recommended or known way to deal with this issue, where non-JS assets aren’t brought along for SSR? I can write some super-hacky code to parse the script tag string and then match chunk names against Webpack’s assets, and that’ll probably work temporarily. But if there’s a better way to handle this, it’d be great to know.

[theKashey]

The isolation provided by CSS-in-JS pattern just makes it super easy to handle style ordering, as well as Emotion just inlines all styles in the HTML. But broadly speaking correct CSS ordering might be VERY complicated.

[jcklpe]

I suggest you to use CSS in JS library like Styled Components or Emotion in order to solve this problem. Loadable Components is focused on JS only and will not provide a solution for CSS.

@neoziro That’s a little disappointing to hear. I understand why some devs like CSS in JS but there are still many devs who prefer using a SCSS/CSS build system. While many features of SCSS can be replicated in CSS in JS with some work, it’s also a pain and often produces mark up which is ugly and not aligned with the original design spec of CSS.