CSS is missing when importing one route from another
Closed this issue · 4 comments
Describe the bug
Since 0.28.3 when having a route that imports and renders the component of another route, the resulting page will not include the CSS of the imported route.
To Reproduce
Repo: https://github.com/sfriedel/sapper-bug-repro
This is a fresh repo created from the sapper template. I've only added a index2.svelte route to demonstrate the problem.
- Run sapper dev server
- Go to http://localhost:3000/
- Go to http://localhost:3000/index2 and compare with previous page
You will see that on index2 the layout changes because the CSS from index.svelte does not get loaded.
Expected behavior
http://localhost:3000/ and http://localhost:3000/index2 should look identical.
Information about your Sapper Installation:
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 331.77 MB / 15.34 GB
Container: Yes
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.9.0 - /usr/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.8 - /usr/bin/npm
Watchman: 4.9.0 - /home/sef/.local/opt/watchman/bin/watchman
Browsers:
Chrome: 85.0.4183.83
Firefox: 80.0
npmPackages:
rollup: ^2.3.4 => 2.26.10
sapper: ^0.28.0 => 0.28.4
svelte: ^3.17.3 => 3.24.1
Severity
This is blocking me from upgrading beyond 0.28.2 in 2 projects.
Additional context
My usecase for importing routes from other routes is multilinguality. The projects where I use this have their primary language on the root and then have subtrees for each other supported language (like example.com/de/..., example.com/fr/...). The language prefixed routes simply import and use the component of the top-level route, e.g. routes/de/index.svelte imports the routes/index.svelte component and uses it. Until 0.28.2 this was working very well.
Hope this can be fixed and thank you for your awesome work on sapper 👍
@benmccann I tried it out and it does avoid the issue but also introduces a new problem in that the styles don't get applied to the SSR output leading to a FOUC and completely unstyled page for users with JS disabled.
Ignore my last comment, there was something wrong with my setup.
The only problem I see now is that the generated global.css does not seem to reference the svelte-**** classes used for component scoped styles.
Ok I now realized that the global.css is just the static file from the sapper-template repo and not the generated CSS. With that cleared up I think that everything would work nicely with the changes in that PR.