+error.svelte css import bleeds into normal layout

[andreasnuesslein]

Describe the bug

within the +error.svelte, I have an import "error.css".

This error.css gets loaded on any normal page, regardless of the route. It seems to ALWAYS get injected.

The same even happens when i use a component within the +error.svelte and import it (i.e. i create a ErrorPage.svelte and use that within +error.svelte.

Even more annoyingly it gets loaded after the +layout.svelte's import 'main.css' .

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-dcy91icn?file=src%2Froutes%2F%2Bpage.svelte

Logs

System Info

System:
    OS: Linux 6.11 TUXEDO OS 24.04.1 LTS
    CPU: (16) x64 AMD Ryzen 7 8845HS w/ Radeon 780M Graphics
    Memory: 37.31 GB / 60.62 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.15.0 - /usr/bin/node
    npm: 10.9.2 - /usr/bin/npm
    pnpm: 9.15.0 - /usr/bin/pnpm
  Browsers:
    Brave Browser: 135.1.77.101
  npmPackages:
    @sveltejs/adapter-node: ^5.2.12 => 5.2.12 
    @sveltejs/kit: ^2.20.7 => 2.20.7 
    @sveltejs/vite-plugin-svelte: ^5.0.3 => 5.0.3 
    svelte: ^5.27.3 => 5.27.3 
    vite: ^6.3.2 => 6.3.2

Severity

serious, but I can work around it

Additional Information

Thanks. Seriously thanks for svelte and svelteKit and all of it. cheers

[Conduitry]

I believe +error.svelte files are eagerly loaded so that they can be displayed later if an error happens, even if that error is because of a loss of network connectivity. And loading a component applies all of its global styles. This should perhaps be documented somewhere.

Even if these styles were loaded lazily somehow, they would still persist if you did a client-side navigation to another page from the error page. The solution to all of these sorts of issues is to not use global styles for things that should only apply to a specific page - and to instead use component-scoped styles.

[andreasnuesslein]

Thanks @Conduitry for your quick reply! Yeah I had a feeling i was gonna have to do something like that.

The thing is that I have all my styles in a global app.css that does all the tailwind magic. Only for a specific routes-folder I need that NOT to be loaded, so I load it normally somewhere further down in (folderA)/+layout.svelte

basically I have:

• (folderA)/+layout.svelte has app.css
• (folderB)/+layout.svelte has different.css
• and for the +error.svelte I simply wanted app.css as well but couldn't put it in (folderA)

but yes, I'll work around it, cheers 👍