Skip to content

Commit fc19a92

Browse files
dominikgdominikg
authored
feat: scope css to js module to allow treeshaking it (requires vite 6.2) (#1092)
* feat: scope css to js module to allow treeshaking it (requires vite 6.2) * chore: improve condition and add comment * refactor: replace zimmerframe+walk with regex test in preprocessor * chore: remove extraneous check * refactor: use svelte 5.26 hasGlobal flag instead of custom impl * chore: revert code change from previous impl * chore: update changeset
1 parent 876c1c5 commit fc19a92

File tree

17 files changed

+167
-3
lines changed

17 files changed

+167
-3
lines changed

‎.changeset/plenty-eyes-talk.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/vite-plugin-svelte': minor
3+
---
4+
5+
scope css to js module to enable treeshaking scoped css from unused components. Requires vite 6.2 and svelte 5.26

‎packages/e2e-tests/css-treeshake/__tests__/css-treeshake.spec.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { browserLogs, findAssetFile, getColor, getEl, getText, isBuild } from '~utils';
2+
import { expect } from 'vitest';
3+
4+
test('should not have failed requests', async () => {
5+
browserLogs.forEach((msg) => {
6+
expect(msg).not.toMatch('404');
7+
});
8+
});
9+
10+
test('should apply css from used components', async () => {
11+
expect(await getText('#app')).toBe('App');
12+
expect(await getColor('#app')).toBe('blue');
13+
expect(await getText('#a')).toBe('A');
14+
expect(await getColor('#a')).toBe('red');
15+
});
16+
17+
test('should apply css from unused components that contain global styles', async () => {
18+
expect(await getEl('head style[src]'));
19+
expect(await getColor('#test')).toBe('green'); // from B.svelte
20+
});
21+
22+
test('should not render unused components', async () => {
23+
expect(await getEl('#b')).toBeNull();
24+
expect(await getEl('#c')).toBeNull();
25+
});
26+
27+
if (isBuild) {
28+
test('should include unscoped global styles from unused components', async () => {
29+
const cssOutput = findAssetFile(/index-.*\.css/);
30+
expect(cssOutput).toContain('#test{color:green}'); // from B.svelte
31+
});
32+
test('should not include scoped styles from unused components', async () => {
33+
const cssOutput = findAssetFile(/index-.*\.css/);
34+
// from C.svelte
35+
expect(cssOutput).not.toContain('.unused');
36+
});
37+
}

‎packages/e2e-tests/css-treeshake/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
7+
<title>Svelte app</title>
8+
9+
<script type="module" src="/src/main.js"></script>
10+
</head>
11+
12+
<body></body>
13+
</html>

‎packages/e2e-tests/css-treeshake/package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "e2e-tests-css-treeshake",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"@sveltejs/vite-plugin-svelte": "workspace:^",
13+
"sass": "^1.85.1",
14+
"svelte": "^5.20.5",
15+
"vite": "^6.2.0"
16+
}
17+
}

‎packages/e2e-tests/css-treeshake/src/A.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<h1 id="a">A</h1>
2+
3+
<style>
4+
h1 {
5+
color: red;
6+
}
7+
</style>

‎packages/e2e-tests/css-treeshake/src/App.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import { A } from './barrel.js';
3+
</script>
4+
5+
<div id="test">test</div>
6+
<h1 id="app">App</h1>
7+
<A />
8+
9+
<style>
10+
#app {
11+
color: blue;
12+
}
13+
</style>

‎packages/e2e-tests/css-treeshake/src/B.svelte

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<h1 id="b">B</h1>
2+
3+
<style>
4+
h1 {
5+
color: green;
6+
}
7+
:global(#test) {
8+
color: green;
9+
}
10+
</style>

‎packages/e2e-tests/css-treeshake/src/C.svelte

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<h1 id="c" class="unused"><strong>C</strong></h1>
2+
3+
<style>
4+
.unused {
5+
color: magenta;
6+
}
7+
h1 :global {
8+
background: blue;
9+
}
10+
11+
h1 :global(strong) {
12+
color: magenta;
13+
}
14+
</style>

‎packages/e2e-tests/css-treeshake/src/barrel.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default as A } from './A.svelte';
2+
// B and C are unused, their css should not be included
3+
export { default as B } from './B.svelte';
4+
export { default as C } from './C.svelte';

‎packages/e2e-tests/css-treeshake/src/main.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import App from './App.svelte';
2+
import { mount } from 'svelte';
3+
mount(App, { target: document.body });

‎packages/e2e-tests/css-treeshake/src/vite-env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="svelte" />
2+
/// <reference types="vite/client" />

‎packages/e2e-tests/css-treeshake/svelte.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
2+
3+
export default {
4+
preprocess: [vitePreprocess()]
5+
};

‎packages/e2e-tests/css-treeshake/vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite';
2+
import { svelte } from '@sveltejs/vite-plugin-svelte';
3+
import { env } from 'node:process';
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [svelte()]
7+
});

‎packages/vite-plugin-svelte/src/index.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,15 @@ export function svelte(inlineOptions) {
118118
};
119119
} else {
120120
if (query.svelte && query.type === 'style') {
121-
const css = cache.getCSS(svelteRequest);
122-
if (css) {
121+
const cachedCss = cache.getCSS(svelteRequest);
122+
if (cachedCss) {
123+
const { hasGlobal, ...css } = cachedCss;
124+
if (hasGlobal === false) {
125+
// hasGlobal was added in svelte 5.26.0, so make sure it is boolean false
126+
css.meta ??= {};
127+
css.meta.vite ??= {};
128+
css.meta.vite.cssScopeTo = [svelteRequest.filename, 'default'];
129+
}
123130
return css;
124131
}
125132
}

‎packages/vite-plugin-svelte/src/types/compile.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Processed, CompileResult } from 'svelte/compiler';
22
import type { SvelteRequest } from './id.d.ts';
33
import type { ResolvedOptions } from './options.d.ts';
4+
import type { CustomPluginOptionsVite } from 'vite';
45

56
export type CompileSvelte = (
67
svelteRequest: SvelteRequest,
@@ -12,6 +13,10 @@ export interface Code {
1213
code: string;
1314
map?: any;
1415
dependencies?: any[];
16+
hasGlobal?: boolean;
17+
meta?: {
18+
vite?: CustomPluginOptionsVite;
19+
};
1520
}
1621

1722
export interface CompileData {

‎packages/vite-plugin-svelte/src/utils/compile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as svelte from 'svelte/compiler';
2-
32
import { safeBase64Hash } from './hash.js';
43
import { log } from './log.js';
54

@@ -133,6 +132,7 @@ export function createCompileSvelte() {
133132
let compiled;
134133
try {
135134
compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename });
135+
136136
// patch output with partial accept until svelte does it
137137
// TODO remove later
138138
if (

‎pnpm-lock.yaml

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)