Plain imported css files and style tags are loaded twice

[nulladdict]

Describe the bug

Plain css files that are imported in __layout.svelte get duplicated in the resulting page.
In the demo app __layout.svelte contains import '../app.css', but the resulting index html page on the client has two corresponding <link rel="stylesheet" href="…" /> tags.

First comes from the SSR or pre-render, second gets added by the router when client-side javascript takes over.
Disabling javascript or using export const router = false on the index page gets rid of the second stylesheet.

Moving the import from __layout.svelte to the index.svelte seems to still add 2 stylesheets, but declarations no longer appear twice inside the inspector.

Upd: Moving the styles from app.css to the <style /> tag inside the __layout.svelte does not seem to help. So it seems like it's a general css loading issue.

It seems that browsers are smart enough to not re-download the stylesheet, so this bug is only a minor annoyance when looking at the dev tools.

Reproduction

• npm init svelte@next
• Choose demo app; no; no; no
• npm istall && npm run build && npm run preview
• Visit the index page and inspect any element
• :root declaration shows 2 times inside the Chrome's style inspector window
• There are 2 stylesheets:
  • <link rel="stylesheet" href="/./_app/assets/pages/__layout.svelte-hash.css">
  • <link rel="stylesheet" href="/_app/assets/pages/__layout.svelte-hash.css">

Logs

Shouldn't be necessary.

System Info

System:
    OS: macOS 11.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 14.40 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
Binaries:
    Node: 16.6.2 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.20.3 - /usr/local/bin/npm
Browsers:
    Chrome: 92.0.4515.131
    Firefox: 90.0.2
    Safari: 14.1.2
npmPackages:
    @sveltejs/kit: next => 1.0.0-next.147 
    svelte: ^3.34.0 => 3.42.1

Severity

annoyance

Additional Information

Issues #1214 and #2130 might be related, but if I understood them correctly they only happen in dev, while I noticed the bug in prod when using adapter-static

[benmccann]

I cannot reproduce this with 1.0.0-next.148. I'm guessing that Rich's recent improvement to asset handling fixed this

[nulladdict]

Yes, in 1.0.0-next.148 the first stylesheet no longer has a path starting with /./ and css gets deduplicated correctly

[mrtnbroder]

I'm actually getting the exact same issue with recent SvelteKit v1.0.0-next.236. Is the bug back for you as wel guys?

[nulladdict]

I can't seem to reproduce this exact issue on the demo app, but something might have been affected by the changes to base path handling (#3345, #3346)