Importing CSS file in route applies it on hover, and the style is not cleaned up when navigating away from the route

Describe the bug

If you do something like import '$lib/layout1.css'; in a +layout or +page, the CSS is incorrectly applied on hover (probably due to the preload functionality).

Additionally when navigating away from the route, the style tag is not properly unmounted, leaving the CSS in place.

For reference, I also included a css import using svelte-preprocess, which shows that scoped CSS does work as intended.

This is a question that has come up many times in the Svelte Discord, and is usually unexpected by the user.

https://github.com/user-attachments/assets/aef78df0-4c56-4551-b1e4-05605199c340

Reproduction

https://github.com/khromov/sveltekit-css-import-repro

npm i && npm run dev

Logs

-

System Info

System:
    OS: macOS 15.0
    CPU: (12) arm64 Apple M2 Pro
    Memory: 212.53 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.8.0 - ~/.nvm/versions/node/v22.8.0/bin/node
    npm: 10.8.3 - ~/node_modules/.bin/npm
    bun: 1.1.25 - ~/.bun/bin/bun
  Browsers:
    Safari: 18.0
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/kit: ^2.0.0 => 2.7.3 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0 
    svelte: ^5.0.0 => 5.1.9 
    vite: ^5.0.3 => 5.4.10

Severity

annoyance

Additional Information

No response

Run the linked reproduction with npm i && npm run dev and compare the direct CSS import with the svelte-preprocess example. Trace how imported route CSS is handled during preload, route navigation, and unmounting; done means it does not apply on hover and is removed when leaving the route.