Skip to content

Commit e17c056

Browse files
dominikgdominikg
committed
feat: scope css to js module to allow treeshaking it (requires vite 6.2)
1 parent 5ddbcb2 commit e17c056

File tree

17 files changed

+181
-4
lines changed

17 files changed

+181
-4
lines changed

‎.changeset/plenty-eyes-talk.md

Lines changed: 5 additions & 0 deletions
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

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

Lines changed: 37 additions & 0 deletions
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

Lines changed: 13 additions & 0 deletions
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

Lines changed: 17 additions & 0 deletions
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

Lines changed: 7 additions & 0 deletions
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

Lines changed: 13 additions & 0 deletions
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

Lines changed: 10 additions & 0 deletions
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

Lines changed: 14 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 7 additions & 0 deletions
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/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@
4646
"deepmerge": "^4.3.1",
4747
"kleur": "^4.1.5",
4848
"magic-string": "^0.30.17",
49-
"vitefu": "^1.0.6"
49+
"vitefu": "^1.0.6",
50+
"zimmerframe": "^1.1.2"
5051
},
5152
"peerDependencies": {
5253
"svelte": "^5.0.0",

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,20 @@ export function svelte(inlineOptions) {
118118
};
119119
} else {
120120
if (query.svelte && query.type === 'style') {
121-
const css = cache.getCSS(svelteRequest);
121+
// @ts-expect-error __meta does not exist
122+
const { __meta, ...css } = cache.getCSS(svelteRequest);
122123
if (css) {
123-
return css;
124+
if (__meta?.hasUnscopedGlobalCss) {
125+
return css; // css contains unscoped global, do not scope to component
126+
}
127+
return {
128+
...css,
129+
meta: {
130+
vite: {
131+
cssScopeTo: [svelteRequest.filename, 'default']
132+
}
133+
}
134+
};
124135
}
125136
}
126137
// prevent vite asset plugin from loading files as url that should be compiled in transform

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ export interface Code {
1212
code: string;
1313
map?: any;
1414
dependencies?: any[];
15+
__meta?: {
16+
hasUnscopedGlobalCss?: boolean;
17+
};
1518
}
1619

1720
export interface CompileData {

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as svelte from 'svelte/compiler';
2-
32
import { safeBase64Hash } from './hash.js';
43
import { log } from './log.js';
4+
import { walk } from 'zimmerframe';
55

66
import {
77
checkPreprocessDependencies,
@@ -133,6 +133,31 @@ export function createCompileSvelte() {
133133
let compiled;
134134
try {
135135
compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename });
136+
if (compiled.css) {
137+
if (finalCode.includes(':global') && compiled.ast.css) {
138+
walk(
139+
compiled.ast.css,
140+
{},
141+
{
142+
Selector(node, { stop }) {
143+
if (
144+
node.children?.[0].type === 'PseudoClassSelector' &&
145+
node.children[0].name === 'global'
146+
) {
147+
Object.defineProperty(compiled.css, '__meta', {
148+
value: { hasUnscopedGlobalCss: true },
149+
writable: false,
150+
enumerable: false,
151+
configurable: false
152+
});
153+
stop();
154+
}
155+
}
156+
}
157+
);
158+
}
159+
}
160+
136161
// patch output with partial accept until svelte does it
137162
// TODO remove later
138163
if (

0 commit comments

Comments
 (0)