Reset layouts still inherit their parents' styles

[GauBen]

Describe the bug

__layout.reset.svelte does not reset the style stack

Reproduction

/src/routes/__layout.svelte

<h1>Root layout</h1>
<slot/>

<style>
  :global(html) {
    background: skyblue
  }
</style>

/src/routes/nested/__layout(.reset)?.svelte

<h1>Nested layout</h1>
<slot/>

Without .reset:

With .reset:

(It should not have the blue background)

Logs

No response

System Info

devDependencies:
  '@sveltejs/adapter-auto': 1.0.0-next.17
  '@sveltejs/kit': 1.0.0-next.250_svelte@3.46.3
  svelte: 3.46.3

Severity

annoyance

Additional Information

I'm not sure if this is the intended behavior, but it seems inconsistent

[babichjacob]

Reason in #1356 (comment)

Is this only when using client side navigation (e.x. by clicking links to go from a page using the root layout to one using the nested layout), or do you still see the unexpected background color after refreshing the page?

[GauBen]

Both, that's why I considered it not being a bug but a feature

[Rich-Harris]

This is a consequence of how styles work in SvelteKit — if you import a component, its CSS will be applied to the page, regardless of whether it is rendered or not (and it won't be removed when the component is destroyed), because the contents of <style> are ultimately turned into a <link rel="stylesheet">, as if you had an explicit import './styles.css' declaration. You could definitely make the case that this is a bug, but changing that behaviour would make performance worse in the general case.

Styles from the root layout will therefore always apply, because the root layout is always imported eagerly (along with the root error component). You'll have to work around it by avoiding global body styles there.

Realistically this would be very difficult to change, so I'm going to close this issue. (Note that layout resets have been replaced by named layouts.)

[GauBen]

This makes sense, thanks for answering