Library styles in custom element component and discarded in instantiated component

[FilipJakab]

Describe the bug

I am doing a PoC with custom elements in Svelte. It involves single component marked as custom element that uses photoviewer library to preview images.

Library's directions are to add @use 'photoviewer' into styles:

<style lang="scss">
	@use 'photoviewer';

	.image-viewer-parent {
...
</style>

Which resulted in following style output:

As you can see, all acutal class names of the library are missing and only the svelte style's "hash" remained.

When I try same component with the last style configuration mentioned inside App.svelte (as standard component, not as custom element)
it works...

Reproduction

https://github.com/FilipJakab/image-viewer

Just run npm i and npm run dev

App runs on port 5173 where there are 2 image-viewer instances, first inside App.svelte as a regular component and second as custom element in index.html.

Clicking on the first one initiates library and opens image's preview, while the second image does instantiate the library but without styles...

Logs

No response

System Info

System:
    OS: Linux 6.7 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 37.73 GB / 62.71 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.asdf/installs/nodejs/18.12.0/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 8.19.2 - ~/.asdf/plugins/nodejs/shims/npm
  npmPackages:
    svelte: ^4.2.8 => 4.2.9

### Severity

blocking all usage of svelte

[dummdidumm]

This is expected because Svelte's script tag is scoped by default, in other words any classes that are not used in the component directly are removed. To get the behavior you want, you have to make the styles globally available. In Vite you can do that by putting this into a separate .scss file and put the @use .. directive in there, and then import it into your component like import './photostyles.scss';

[FilipJakab]

Thanks for the reply.

Just tried your proposal. Where should I import this local photostyle.scss file? I tried putting it in the <script> tag of the svelte component, then tried importing it in the app's entrypoint main.js and even tried putting in <style> block as @import '../assets/image-viewer.scss'.

And none of these attempts work. result is either same, or in case of importing it in style not even the standard component is styled.

[FilipJakab]

Oh, just found out, that now the console says those library styles are unused... Does Svelte's default vite config automatically removes unused CSS styles? (The library uses these styles in runtime..)