Auto adapter arbitrarily removes linked CSS or parts of it from external JS modules

[brgrz]

Describe the bug

I am unsure how to properly describe or name this bug but it only manifests when using the default auto adapter.

Auto adapter seems to be removing styles from external JS modules, in this case it would be Shoelace modules/chunks coming from jsdelivr CDN.

Clone, run npm i, then npm run dev, browse to the default url and inspect the button component (which is coming from the awesome Shoelace component library as a custom element/web component) which wonn't have default styles applied (missing padding, border radius). You should be able to see it as FOUC also.

Switching to adapter-static in svelte config fixes this issue.

Reproduction

https://github.com/brgrz/sveltekit-css-bug

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) ia32 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 2.79 GB / 15.78 GB
  Binaries:
    Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE
    npm: 7.22.0 - C:\Program Files (x86)\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.3
    @sveltejs/kit: next => 1.0.0-next.201
    svelte: ^3.44.0 => 3.44.2

Severity

serious, but I can work around it

Additional Information

No response

[Rich-Harris]

I can guarantee that changing to adapter-static doesn't fix it, because adapters aren't involved in dev at all. I see the same outcome when I use adapter-static with the repro, both in dev and when I serve the output of svelte-kit build.

This, unfortunately, is just the reality of using web components, and it's part of why I strongly recommend that developers avoid them. More details here: #2666 (comment). There's nothing SvelteKit can do to work around the limitations of web components, so I'll close this issue.

As an aside: I would always recommend self-hosting the assets your app needs. No matter how fast jsdelivr is, you will pay a performance penalty for loading resources from a different domain.