sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.45k stars 1.89k forks source link

Global styling from other routes is not unloaded #10895

Closed unbiased-dev closed 11 months ago

unbiased-dev commented 11 months ago

Describe the bug

If you have a route with global styling, it is injected into the head when you navigate to it. That's good. Navigate back and the global from the nested route is not unloaded.

Even worse, hovering on a URL by default is preloading the route. Good. This also fetches the global styling and injects it. Not that good.

Reproduction

/routes/+page.svelte

<h1>Home</h1>
<a href="/about">Go to About</a>

/routes/about/+page.svelte


<h1>About</h1>
<a href="/">Go home</a>
Repro:
1. Go to home
2. Text is black 👍 
3. Go to /about
4. Text is red 👍 
5. Go back to home
6. Text is still red 👎 
7. Refresh page
8. Text is black again 👍 

Shorter repro (assuming preloading on URLs is on):
1. Go to home
2. Text is black 👍 
3. Hover on /about
4. Text is red 👎 

Provided bellow is a stackblitz with repro in action

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

### Logs

_No response_

### System Info

```Shell
System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.9.2 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/kit: ^1.20.4 => 1.26.0 
    svelte: ^4.0.5 => 4.2.1 
    vite: ^4.4.2 => 4.5.0 


### Severity

serious, but I can work around it

### Additional Information

_No response_
Conduitry commented 11 months ago

See previous issues - for example #2783. This is the intended behavior. It's not worth it to count how many instances of a component exist so we can unload their styles. Global styles that are loaded as part of a particular component are a bad idea generally.

unbiased-dev commented 11 months ago

@Conduitry So how does one style the body tag only on certain routes without using global?

steve-taylor commented 2 months ago

@Conduitry how can a resource leak be intended behaviour?