fix: expand local caching for compiled css to dev

Author: dominikg

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -98,7 +98,7 @@ describe('kit-node', () => {
 
 		it('should load dynamic import with css', async () => {
 			expect(await getText('#dynamic-imported')).toBe("i'm blue");
-			expect(await getColor('#css-transform')).toBe('blue');
+			expect(await getColor('#dynamic-imported')).toBe('blue');
 		});
 
 		it('should respect transforms', async () => {
@@ -198,14 +198,14 @@ describe('kit-node', () => {
 			it('should serve changes even after page reload', async () => {
 				expect(await getColor('h1')).toBe('green');
 				expect(await getText('#hmr-test2')).toBe('bar');
+				expect(await getText('#dynamic-imported')).toBe("i'm blue");
+				expect(await getColor('#dynamic-imported')).toBe('blue');
 				await reloadPage();
 				expect(await getColor('h1')).toBe('green');
 				expect(await getText('#hmr-test2')).toBe('bar');
-			});
-
-			it('should not have errors on reload', async () => {
-				expect(getServerErrors(), 'error log of `vite dev` is not empty before reload').toEqual([]);
-				await reloadPage();
+				await page.waitForSelector('#dynamic-imported', { strict: true });
+				expect(await getText('#dynamic-imported')).toBe("i'm blue");
+				expect(await getColor('#dynamic-imported')).toBe('blue');
 				expect(getServerErrors(), 'error log of `vite dev` is not empty after reload').toEqual([]);
 			});
 

packages/e2e-tests/kit-node/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
+    "dev": "svelte-kit sync && vite dev",
+    "build": "svelte-kit sync && vite build",
     "preview": "vite preview",
     "prepare": "svelte-kit sync || echo ''",
     "sync": "svelte-kit sync || echo ''",

packages/e2e-tests/kit-node/src/routes/DynamicImported.svelte

@@ -1,7 +1,7 @@
 <div id="dynamic-imported">i'm blue</div>
 
 <style lang="postcss">
-	#dynamic-import {
+	#dynamic-imported {
 		color: blue;
 	}
 </style>

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

@@ -8,14 +8,17 @@ const filter = { id: SVELTE_VIRTUAL_STYLE_ID_REGEX };
  * @returns {import('vite').Plugin}
  */
 export function loadCompiledCss(api) {
-	let isBuildWatch = false;
+	let useLocalCache = false;
+
 	/** @type{Map<string,any>} */
 	const buildWatchCssCache = new Map();
 	return {
 		name: 'vite-plugin-svelte:load-compiled-css',
 
 		configResolved(c) {
-			isBuildWatch = !!c.build?.watch;
+			const isDev = c.command === 'serve';
+			const isBuildWatch = !!c.build?.watch;
+			useLocalCache = isDev || isBuildWatch;
 		},
 
 		resolveId: {
@@ -34,9 +37,9 @@ export function loadCompiledCss(api) {
 					return;
 				}
 				let cachedCss = this.getModuleInfo(svelteRequest.filename)?.meta.svelte?.css;
-				// in build --watch getModuleInfo only returns changed module data.
+				// in `build --watch` or dev ssr reloads getModuleInfo only returns changed module data.
 				// To ensure virtual css is loaded unchanged, we cache it here separately
-				if (isBuildWatch) {
+				if (useLocalCache) {
 					if (cachedCss) {
 						buildWatchCssCache.set(svelteRequest.filename, cachedCss);
 					} else {