sveltejs / kit

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

Global styles in prefetched page get wrongly applied to current page #10158

Closed loukamb closed 1 year ago

loukamb commented 1 year ago

Describe the bug

Linking to a page with a :global(...) style will wrongly apply that page's global styles to the current page when the link is hovered due to prefetching. While I understand global styles are meant to be global, this is a somewhat unexpected behavior when developing a +layout file that needs to style specific elements of <slot/>'d pages (e.g. we want to style all h1 elements that use the +layout of this route, so we use :global to prevent scoping the style to the layout itself, but this ends up impacting pages that link to the page using the +layout, which is unexpected and erroneous).

Reproduction

  1. Create a new SvelteKit project.
  2. Create a new page at /global/+page.svelte, then add the following contents:
    
    <h1>Hello world from route!</h1>
3. In the default route at `/+page.svelte`, add a `<a>` pointing to `/global`, then add a `<h1>` element with any content anywhere in the page.
4. Hover over the link, and the `<h1>`  will turn red.

Here's a StackBlitz which reproduces the issue: https://stackblitz.com/edit/sveltejs-kit-template-default-ptzm73?file=src%2Froutes%2F%2Bpage.svelte

### System Info

```Shell
System:
    OS: Windows 10 10.0.22621
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900KS
    Memory: 47.98 GB / 63.75 GB
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (114.0.1823.37)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0
    @sveltejs/kit: ^1.5.0 => 1.20.2
    svelte: ^3.54.0 => 3.59.1
    vite: ^4.3.0 => 4.3.9

Severity

Serious, but I can work around it.

Conduitry commented 1 year ago

Duplicate of #8867.