Skip to content

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

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions