[webpack] styles not loaded for async component

[nolanlawson]

I've written a minimal repro on top of the sapper-template to demonstrate. Also here's a video demonstration.

Steps to reproduce

git clone https://github.com/nolanlawson/sapper-template --branch repro-style-bug
cd sapper-template
npm i
npm run build
npm start

1. Navigate to localhost:3000
2. Click "settings"

Expected: the header should be red.

Actual: the header is not red.

Interestingly if you refresh, then the header does become red. So apparently the server-rendered version includes the style correctly.

The presence or absence of a sibling page seems to affect this. If you delete routes/settings/more-settings.html then the bug goes away.

Repros in Chrome and Firefox using macOS. Sapper v0.3.2.

[jbmoelker]

I experience the same issue. This only happens in production mode as @nolanlawson describes. For what it's worth, I notice .sapper/client/main.css is never loaded. When you refresh the styles for that page are correctly inlined as critical CSS. However when you navigate to another route, the additionally required styles are not loaded.

[nolanlawson]

Has anyone found a workaround besides disabling ExtractTextPlugin?

[nolanlawson]

On second thought, this may be an issue with sapper-template, as I'm not even sure if ExtractTextPlugin is doing anything here. On my builds at least, I'm just getting critical CSS inlined, and it's not creating any styles.css.

So maybe the fix is just to remove ExtractTextPlugin? Then we're left with global.css + inline critical CSS, then async CSS loaded via style-loader/css-loader.

[Rich-Harris]

As mentioned over on sveltejs/sapper-template#31 (comment), I've been having some issues getting this stuff to behave correctly. For now, the template is configured not to extract CSS at all — the CSS is just inlined with the JavaScript. Obviously that's frowned upon so I'll leave this issue open to remind us to figure out a robust fix (with sourcemap support, ideally!) but for now at least async styles should work in both dev and prod modes, because Svelte is handling it directly.

[rob-balfre]

Any further thoughts on this? Having components responsible for importing CSS via <:Head> means if you have more than one instance of a component on a page it duplicates the and you have to manually copy the external styles into the assets folder.

[nolanlawson]

I have async working fine in pinafore.social using mini-css-extract-plugin, albeit with a fork of Sapper so I'm not sure if it works in latest Sapper.

My feeling is that ExtractTextPlugin should be removed from sapper-template because mini-css-exact-plugin is more performant (no double parse), more secure (allows use of CSS CSP), and makes more sense (it loads CSS as... CSS).