CSS from dynamically imported components missing (^0.28.1)

When dynamically importing a component, that component's styles are not loaded. This regression was introduced in 0.28.1.

I have a repo that reproduces this here: https://github.com/Jayphen/sapper-preload-repro/pull/2/files

The above is based off the base svelte/sapper template, with no modifications.

It is deployed to Vercel here: https://sapper-preload-repro-git-dynamic-import-css.jayphen.vercel.app.

If you check out the above branch and fix the version to 0.28.0, you'll see the text in the header is styled as it should be.

Note that preserveEntrySignatures is still in the config in this repro, unlike the one I mentioned in #1446 (comment)

Dang I thought this was something I tested. There's even a test for it:

sapper/test/apps/css/test.ts

Line 43 in de87668

it('loads CSS for a lazily-rendered component', async () => {

I wonder how these cases are different

Ah, I think I know what's happening now. The issue is that the dynamic import is in the layout (in this case it's actually in the nav, which is used only in the layout). If it were in a route then it would work.

It seems we need to make the css rollup plugin aware of the routes and put all css that doesn't map to a route into the entry chunk's css. I'm not sure how I feel about that though. That's a very tight coupling between Sapper and the Rollup plugin and we were trying to add separation and possibly split the Rollup plugin into its own project. Another solution would be to handle dynamic imports differently depending whether svelte component being imported contains /routes/ in the path or not, which seems better to me. We can use the routes option in build.ts/dev.ts. The would be much easier to pass in as a configuration option when we split the Rollup plugin out into its own project and could be useful for non-sapper projects.

I also have this issue since 0.28.1 and also in 0.28.2, it's in all the routes i've used svelte:component in, just FYI