In preview, all svelte components gets their styles loaded regardless if they aren't used or lazy loaded

Describe the bug

In preview, styles of all the components are added to the head, even if the component is never used or dynamically lazy loaded. In my case, it triggers conflicts from global styles between the home page and an admin page for a CMS. It also add unecessary load to the initial requests

Reproduction

Run the following in preview: https://stackblitz.com/edit/sveltejs-kit-template-default-gsrshq?file=src/routes/index.svelte

Two components have been added : $lib/components/Test.svelte is loaded dynamically $lib/components/Test2.svelte is not used at all

Test1-xxx.css is added regardless if it’s loaded later. Test2-xxx.css is added but the component is never used.

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (1) x64 Intel(R) Xeon(R) CPU           X5570  @ 2.93GHz
    Memory: 2.84 GB / 12.68 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
  Browsers:
    Firefox: 102.0.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.63
    @sveltejs/kit: next => 1.0.0-next.386
    svelte: ^3.44.0 => 3.49.0
    vite: ^3.0.0 => 3.0.2

Severity

annoyance

Additional Information

No response

[dominikg]

to include css in the js for a component, you can set compileOptions.css=true.

This can be done for all svelte components

// svelte.config.js
export default {
  compilerOptions: {css: true},
  vitePlugin: { emitCss: false}
});

or dynamically for some with an experimental option in vite-plugin-svelte: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions

// svelte.config.js
export default {
  vitePlugin: {
    experimental: {
      dynamicCompileOptions({ filename, compileOptions }) {
        // Dynamically set per Svelte file
        if (includeStylesInJS(filename) && !compileOptions.css) {
          return { css: true };
        }
      }
    }
  }
});

note that this is really not recommended. emitting css into separate files is very much prefered, so i suggest you look into different options how to build your application so that the styles are working the way you want without resorting to styles in js.

#svelte-kit on https://svelte.dev/chat is a great place to ask for advice

[PlopTheReal]

I’ve been able to use the dynamicCompileOptions but the css file will always be emitted with emitCss. Is there is a way to include the style in JS and not emit the CSS file for the cherry picked ones?