When importing one component of a component library, all the styles of all the components are bundled in the css file

[Ennoriel]

Describe the bug

I have a component library based on kit. On one of my project, I only use one component of my component library. In this situation, all the styles of all the components are loaded on the page where I use the component.

I am expecting that the styles of the components used only would be bundled in the app.

I tested this with the version of svelte & kit of the init command (3.59.2 & 1.23.0) then updated (4.2.0 & 1.23.0) but the result are still the same.

Reproduction

The repro repo is here: https://github.com/Ennoriel/bug-all-lib-style-included (use pnpm). I deliberately commited the dist and .svelte-kit folders if you want to see what is generated without cloning the repo.

There are 2 projects, the first one use the library with a link: import in its package.json but the behavior is the same when importing the library from npm.

The library exports 2 components:

<!-- CompoA.Svelte -->
<p>Hello</p>

<style>
	p {
		color: red;
	}
</style>

<!-- CompoB.Svelte -->
<p>hello</p>

<style>
	p {
		color: blue;
	}
</style>

// index.js

export { default as CompoA } from './CompoA.svelte';
export { default as CompoB } from './CompoB.svelte';

The other project uses CompoA:

<script>
	import { CompoA } from 'skeleton-23-08-27-library';
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<CompoA />

The css file generated id:

p.svelte-1a7i8ec {
    color: red
}

p.svelte-yb161z {
    color: #00f
}

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 8.40 GB / 15.85 GB
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.12 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: ^2.1.0 => 2.1.0
    @sveltejs/kit: ^1.23.0 => 1.23.0
    svelte: ^4.2.0 => 4.2.0
    vite: ^4.4.9 => 4.4.9

Severity

annoyance

Additional Information

No response

[ghostdevv]

I don't think is SvelteKit specific, it happens in a vanilla Vite + Svelte app. @dominikg any ideas?

[dominikg]

I guess the index.js file listing all components leads to all of them getting compiled, which leads to a lot of import style from 'Component.svelte?svelte&type=style&lang.css' statements that are picked up and added to css output. Treeshaking might be able to omit the unused components js code again, but not the css.

[dominikg]

You can try to use a deep import import CompA from 'some-library/CompA.svelte' so that only styles from used components get included.

Another option would be to compile the library components without externalizing css.

[benmccann]

Closing in favor of vitejs/vite#4389