fix: ensure compiled css is loaded correctly when rebuilding in watch mode

Author: dominikg

.changeset/spotty-mirrors-pick.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix: ensure compiled svelte css is loaded correctly when rebuilding in `build --watch`

.gitignore

@@ -52,3 +52,5 @@ coverage
 packages/playground/**/*
 !packages/playground/README.md
 
+# vite plugin inspect
+.vite-inspect

.prettierrc.js

@@ -25,7 +25,8 @@ export default {
 				'**/vite.config.js.timestamp-*.mjs',
 				'packages/e2e-tests/dynamic-compile-options/src/components/A.svelte',
 				'packages/playground/big/src/pages/**', // lots of generated files
-				'packages/e2e-tests/scan-deps/src/Svelte*.svelte' // various syntax tests that require no format
+				'packages/e2e-tests/scan-deps/src/Svelte*.svelte', // various syntax tests that require no format
+				'**/.vite-inspect/**'
 			],
 			options: {
 				rangeEnd: 0

eslint.config.js

@@ -15,7 +15,8 @@ export default [
 			'packages/*/types/index.d.ts',
 			'packages/*/types/index.d.ts.map',
 			'packages/*/CHANGELOG.md',
-			'packages/e2e-tests/**/logs/**'
+			'packages/e2e-tests/**/logs/**',
+			'**/.vite-inspect/**'
 		]
 	},
 	...svelteOrgEslintConfig, // contains setup for svelte and typescript

package.json

@@ -79,7 +79,8 @@
       "vite": "$vite",
       "@types/node@<=20.12.0": "20.19.9",
       "send@<0.19.0": "^0.19.1",
-      "@sveltejs/kit>cookie@<0.7.0": "^0.7.2"
+      "@sveltejs/kit>cookie@<0.7.0": "^0.7.2",
+      "vite-plugin-inspect": "/home/dominikg/develop/vite-plugin-inspect"
     },
     "onlyBuiltDependencies": [
       "esbuild"

packages/e2e-tests/build-watch/__tests__/build-watch.spec.ts

@@ -7,51 +7,48 @@ import {
 	untilMatches,
 	sleep,
 	getColor,
-	editFile,
-	addFile,
-	removeFile,
-	editViteConfig,
 	browserLogs,
-	waitForBuildWatchAndPageReload
+	e2eServer
 } from '~utils';
+import { describe, test, expect } from 'vitest';
 
-test('should render App', async () => {
-	expect(await getText('#app-header')).toBe('Test-App');
-});
+describe.runIf(isBuildWatch)('build-watch', () => {
+	test('should render App', async () => {
+		expect(await getText('#app-header')).toBe('Test-App');
+	});
 
-test('should render static import', async () => {
-	expect(await getText('#static-import .label')).toBe('static-import');
-});
+	test('should render static import', async () => {
+		expect(await getText('#static-import .label')).toBe('static-import');
+	});
 
-test('should render dependency import', async () => {
-	expect(await getText('#dependency-import .label')).toBe('dependency-import');
-});
+	test('should render dependency import', async () => {
+		expect(await getText('#dependency-import .label')).toBe('dependency-import');
+	});
 
-test('should render dynamic import', async () => {
-	expect(await getEl('#dynamic-import')).toBe(null);
-	const dynamicImportButton = await getEl('#button-import-dynamic');
-	expect(dynamicImportButton).toBeDefined();
-	await dynamicImportButton.click();
-	await untilMatches(
-		() => getText('#dynamic-import .label'),
-		'dynamic-import',
-		'dynamic import loaded after click'
-	);
-});
+	test('should render dynamic import', async () => {
+		expect(await getEl('#dynamic-import')).toBe(null);
+		const dynamicImportButton = await getEl('#button-import-dynamic');
+		expect(dynamicImportButton).toBeDefined();
+		await dynamicImportButton.click();
+		await untilMatches(
+			() => getText('#dynamic-import .label'),
+			'dynamic-import',
+			'dynamic import loaded after click'
+		);
+	});
 
-test('should not have failed requests', async () => {
-	browserLogs.forEach((msg) => {
-		expect(msg).not.toMatch('404');
+	test('should not have failed requests', async () => {
+		browserLogs.forEach((msg) => {
+			expect(msg).not.toMatch('404');
+		});
 	});
-});
 
-test('should respect transforms', async () => {
-	expect(await getText('#js-transform')).toBe('Hello world');
-	expect(await getColor('#css-transform')).toBe('red');
-});
+	test('should respect transforms', async () => {
+		expect(await getText('#js-transform')).toBe('Hello world');
+		expect(await getColor('#css-transform')).toBe('red');
+	});
 
-if (isBuildWatch) {
-	describe('build --watch', () => {
+	describe('edit files', () => {
 		const updateHmrTest = editFileAndWaitForBuildWatchComplete.bind(
 			null,
 			'src/components/HmrTest.svelte'
@@ -90,6 +87,7 @@ if (isBuildWatch) {
 			// color should have changed
 			expect(await getColor('#hmr-test-1 .label')).toBe('green');
 			expect(await getColor('#hmr-test-2 .label')).toBe('green');
+			expect(e2eServer.logs.watch.err, 'error log of `build --watch` is not empty').toEqual([]);
 		});
 
 		test('should apply js change in HmrTest.svelte ', async () => {
@@ -99,6 +97,7 @@ if (isBuildWatch) {
 			);
 			expect(await getText('#hmr-test-1 .label')).toBe('hmr-test-updated');
 			expect(await getText('#hmr-test-2 .label')).toBe('hmr-test-updated');
+			expect(e2eServer.logs.watch.err, 'error log of `build --watch` is not empty').toEqual([]);
 		});
 
 		test('should reset state of external store used by HmrTest.svelte when editing App.svelte', async () => {
@@ -114,6 +113,7 @@ if (isBuildWatch) {
 			expect(await getText('#hmr-test-2 .counter')).toBe('0');
 			// a third instance has been added
 			expect(await getText('#hmr-test-3 .counter')).toBe('0');
+			expect(e2eServer.logs.watch.err, 'error log of `build --watch` is not empty').toEqual([]);
 		});
 
 		test('should reset state of store when editing hmr-stores.js', async () => {
@@ -124,6 +124,7 @@ if (isBuildWatch) {
 			await updateStore((content) => `${content}\n/*trigger change*/\n`);
 			// counter state is reset
 			expect(await getText('#hmr-test-2 .counter')).toBe('0');
+			expect(e2eServer.logs.watch.err, 'error log of `build --watch` is not empty').toEqual([]);
 		});
 
 		test('should work when editing script context="module"', async () => {
@@ -134,79 +135,9 @@ if (isBuildWatch) {
 			await updateModuleContext((content) => content.replace('y = 1', 'y = 2'));
 			expect(await getText('#hmr-with-context')).toContain('x=0 y=2 slot=2');
 			expect(await getText('#hmr-without-context')).toContain('x=0 y=2 slot=');
-			expect(hmrCount('UsingNamed.svelte'), 'updates for UsingNamed.svelte').toBe(1);
+			expect(hmrCount('UsingNamed.svelte'), 'updates for UsingNamed.svelte').toBe(0);
 			expect(hmrCount('UsingDefault.svelte'), 'updates for UsingDefault.svelte').toBe(0);
-		});
-
-		test('should work with emitCss: false in vite config', async () => {
-			await editViteConfig((c) => c.replace('svelte()', 'svelte({emitCss:false})'));
-			expect(await getText('#hmr-test-1 .counter')).toBe('0');
-			expect(await getColor('#hmr-test-1 .label')).toBe('green');
-			await (await getEl('#hmr-test-1 .increment')).click();
-			await sleep(50);
-			expect(await getText('#hmr-test-1 .counter')).toBe('1');
-			await updateHmrTest((content) => content.replace('color: green', 'color: red'));
-			expect(await getColor('#hmr-test-1 .label')).toBe('red');
-			// counter value is reset
-			expect(await getText('#hmr-test-1 .counter')).toBe('0');
-		});
-
-		test('should work with emitCss: false in svelte config', async () => {
-			addFile('svelte.config.js', 'export default {vitePlugin:{emitCss:false}}');
-			await waitForBuildWatchAndPageReload();
-			expect(await getColor('#hmr-test-1 .label')).toBe('red');
-			removeFile('svelte.config.js');
-			await waitForBuildWatchAndPageReload();
-		});
-
-		test('should detect changes in svelte config and rebuild', async () => {
-			const injectPreprocessor = ({ content, filename }) => {
-				if (filename && filename.includes('App.svelte')) {
-					return {
-						code: content.replace(
-							'<!-- HMR-TEMPLATE-INJECT -->',
-							'<div id="preprocess-inject">Injected</div>\n<!-- HMR-TEMPLATE-INJECT -->'
-						)
-					};
-				}
-			};
-			await addFile(
-				'svelte.config.js',
-				`export default {
-			  preprocess:[{markup:${injectPreprocessor.toString()}}]};`
-			);
-			await waitForBuildWatchAndPageReload();
-			expect(await getText('#preprocess-inject')).toBe('Injected');
-			expect(await getText('#hmr-test-1 .counter')).toBe('0');
-			expect(await getColor('#hmr-test-1 .label')).toBe('red');
-			await (await getEl('#hmr-test-1 .increment')).click();
-			await sleep(50);
-			expect(await getText('#hmr-test-1 .counter')).toBe('1');
-			await updateHmrTest((content) => content.replace('color: red', 'color: green'));
-			expect(await getColor('#hmr-test-1 .label')).toBe('green');
-			expect(await getText('#hmr-test-1 .counter')).toBe('0');
-			await editFile('svelte.config.js', (content) =>
-				content
-					.replace('preprocess-inject', 'preprocess-inject-2')
-					.replace('Injected', 'Injected 2')
-			);
-			await waitForBuildWatchAndPageReload();
-			expect(await getText('#preprocess-inject-2')).toBe('Injected 2');
-			expect(await getEl('#preprocess-inject')).toBe(null);
-			expect(await getColor('#hmr-test-1 .label')).toBe('green');
-			expect(await getText('#hmr-test-1 .counter')).toBe('0');
-			await (await getEl('#hmr-test-1 .increment')).click();
-			await sleep(50);
-			expect(await getText('#hmr-test-1 .counter')).toBe('1');
-			await updateHmrTest((content) => content.replace('color: green', 'color: red'));
-			expect(await getColor('#hmr-test-1 .label')).toBe('red');
-			expect(await getText('#hmr-test-1 .counter')).toBe('0');
-			await removeFile('svelte.config.js');
-			await waitForBuildWatchAndPageReload();
-			expect(await getEl('#preprocess-inject-2')).toBe(null);
-			expect(await getEl('#preprocess-inject')).toBe(null);
-			expect(await getColor('#hmr-test-1 .label')).toBe('red');
-			expect(await getText('#hmr-test-1 .counter')).toBe('0');
+			expect(e2eServer.logs.watch.err, 'error log of `build --watch` is not empty').toEqual([]);
 		});
 	});
-}
+});

packages/e2e-tests/build-watch/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "build:watch": "vite build --watch",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -15,7 +16,8 @@
     "e2e-test-dep-vite-plugins": "file:../_test_dependencies/vite-plugins",
     "node-fetch": "^3.3.2",
     "svelte": "^5.36.13",
-    "vite": "^7.0.5"
+    "vite": "^7.0.5",
+    "vite-plugin-inspect": "^11.3.2"
   },
   "type": "module"
 }

packages/e2e-tests/build-watch/src/App.svelte

@@ -10,7 +10,7 @@
 	}
 </script>
 
-<h1 id="app-header">Test-App 2</h1>
+<h1 id="app-header">Test-App</h1>
 <!-- to be transformed into "Hello world!" text -->
 <p id="js-transform">{jsTransform}</p>
 <!-- to be transformed into "hello-world" class -->

packages/e2e-tests/build-watch/vite.config.js

@@ -1,10 +1,27 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { defineConfig } from 'vite';
 import { transformValidation } from 'e2e-test-dep-vite-plugins';
+// import inspect from 'vite-plugin-inspect';
 
 export default defineConfig(({ command, mode }) => {
 	return {
-		plugins: [transformValidation(), svelte()],
+		plugins: [
+			transformValidation(),
+			svelte()
+			/*
+			inspect({ build: true, outputDir: '.vite-inspect' }),
+			{
+				name: 'vite-plugin-no-ssr-fallback-env',
+				enforce: 'post',
+				config: {
+					order: 'post',
+					handler(c) {
+						delete c.ssr; // workaround to avoid vite-plugin-inspect never finishing due to unused ssr build
+					}
+				}
+			}
+			 */
+		],
 		build: {
 			minify: false,
 			target: 'esnext',

packages/vite-plugin-svelte/src/plugins/load-compiled-css.js

@@ -8,9 +8,16 @@ const filter = { id: SVELTE_VIRTUAL_STYLE_ID_REGEX };
  * @returns {import('vite').Plugin}
  */
 export function loadCompiledCss(api) {
+	let isBuildWatch = false;
+	/** @type{Map<string,any>} */
+	const buildWatchCssCache = new Map();
 	return {
 		name: 'vite-plugin-svelte:load-compiled-css',
 
+		configResolved(c) {
+			isBuildWatch = !!c.build?.watch;
+		},
+
 		resolveId: {
 			filter, // same filter in load to ensure minimal work
 			handler(id) {
@@ -26,7 +33,17 @@ export function loadCompiledCss(api) {
 				if (!svelteRequest) {
 					return;
 				}
-				const cachedCss = this.getModuleInfo(svelteRequest.filename)?.meta.svelte?.css;
+				let cachedCss = this.getModuleInfo(svelteRequest.filename)?.meta.svelte?.css;
+				// in build --watch getModuleInfo only returns changed module data.
+				// To ensure virtual css is loaded unchanged, we cache it here separately
+				if (isBuildWatch) {
+					if (cachedCss) {
+						buildWatchCssCache.set(svelteRequest.filename, cachedCss);
+					} else {
+						cachedCss = buildWatchCssCache.get(svelteRequest.filename);
+					}
+				}
+
 				if (cachedCss) {
 					const { hasGlobal, ...css } = cachedCss;
 					if (hasGlobal === false) {
@@ -37,6 +54,8 @@ export function loadCompiledCss(api) {
 					}
 					css.moduleType = 'css';
 					return css;
+				} else {
+					log.warn(`failed to load virtual css module ${id}`, undefined, 'load');
 				}
 			}
 		}