feat: respect user emitCss option (#41) - fixes #9

* respect user emitCss option - fixes #9

* ensure hmr keeps working with emitCss: false option, remove forced values for css and hydratable

* add changeset

* stabilize hmr test

* stabilize hmr test some more

Co-authored-by: dominikg <[email protected]>

Author: Rich Harris

.changeset/sharp-laws-leave.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Allow emitCss: false for production builds and customizable compilerOptions.css and hydratable - fixes #9

packages/playground/hmr/__tests__/hmr.spec.ts

@@ -5,7 +5,8 @@ import {
 	editFileAndWaitForHmrComplete,
 	untilUpdated,
 	sleep,
-	getColor
+	getColor,
+	editFile
 } from '../../testUtils';
 
 test('should render App', async () => {
@@ -86,8 +87,8 @@ if (!isBuild) {
 			await updateHmrTest((content) =>
 				content.replace('<!-- HMR-TEMPLATE-INJECT -->', '<span/>\n<!-- HMR-TEMPLATE-INJECT -->')
 			);
-			await expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
-			await expect(await getText(`#hmr-test-2 .counter`)).toBe('0');
+			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
+			expect(await getText(`#hmr-test-2 .counter`)).toBe('0');
 		});
 
 		test('should preserve state of external store used by HmrTest.svelte when editing App.svelte', async () => {
@@ -99,10 +100,10 @@ if (!isBuild) {
 				)
 			);
 			// counter state is preserved
-			await expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
-			await expect(await getText(`#hmr-test-2 .counter`)).toBe('0');
+			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
+			expect(await getText(`#hmr-test-2 .counter`)).toBe('0');
 			// a third instance has been added
-			await expect(await getText(`#hmr-test-3 .counter`)).toBe('0');
+			expect(await getText(`#hmr-test-3 .counter`)).toBe('0');
 		});
 
 		test('should preserve state of store when editing hmr-stores.js', async () => {
@@ -112,10 +113,25 @@ if (!isBuild) {
 			// update store
 			await updateStore((content) => `${content}\n/*trigger change*/\n`);
 			// counter state is preserved
-			await expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
-			await expect(await getText(`#hmr-test-2 .counter`)).toBe('1');
+			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
+			expect(await getText(`#hmr-test-2 .counter`)).toBe('1');
 			// a third instance has been added
-			await expect(await getText(`#hmr-test-3 .counter`)).toBe('0');
+			expect(await getText(`#hmr-test-3 .counter`)).toBe('0');
+		});
+
+		test('should work with emitCss: false', async () => {
+			await editFile('vite.config.js', (c) => c.replace('svelte()', 'svelte({emitCss:false})'));
+			await sleep(500); // editing vite config restarts server, give it some time
+			await page.goto(viteTestUrl, { waitUntil: 'networkidle' });
+			await sleep(50);
+			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');
+			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
 		});
 	});
 }

packages/vite-plugin-svelte/src/utils/compile.ts

@@ -18,11 +18,9 @@ const _createCompileSvelte = (makeHot: Function) =>
 		const finalCompilerOptions: CompileOptions = {
 			...options.compilerOptions,
 			filename,
-			generate: ssr ? 'ssr' : 'dom',
-			css: !emitCss,
-			hydratable: true
+			generate: ssr ? 'ssr' : 'dom'
 		};
-		if (options.hot) {
+		if (options.hot && options.emitCss) {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
 			log.debug(`setting cssHash ${hash} for ${normalizedFilename}`);
 			finalCompilerOptions.cssHash = () => hash;

packages/vite-plugin-svelte/src/utils/options.ts

@@ -23,7 +23,7 @@ function buildDefaultOptions(
 ): Partial<Options> {
 	const disableCssHmr = !!options?.disableCssHmr;
 	// emit for prod, emit in dev unless css hmr is disabled
-	const emitCss = isProduction || !disableCssHmr;
+	const emitCss = options?.emitCss != null ? options.emitCss : isProduction || !disableCssHmr;
 	// no hmr in prod, only inject css in dev if emitCss is false
 	const hot = isProduction
 		? false
@@ -37,7 +37,8 @@ function buildDefaultOptions(
 		compilerOptions: {
 			format: 'esm',
 			css: !emitCss,
-			dev: !isProduction
+			dev: !isProduction,
+			hydratable: true
 		}
 	};
 	log.debug(
@@ -73,6 +74,23 @@ function enforceOptionsForHmr(options: ResolvedOptions) {
 				);
 				options.compilerOptions.css = false;
 			}
+		} else {
+			if (options.hot === true || !options.hot.injectCss) {
+				log.warn(
+					'hmr with emitCss disabled requires option hot.injectCss to be enabled, forcing it to true'
+				);
+				if (options.hot === true) {
+					options.hot = { injectCss: true };
+				} else {
+					options.hot.injectCss = true;
+				}
+			}
+			if (!options.compilerOptions.css) {
+				log.warn(
+					'hmr with emitCss disabled requires compilerOptions.css to be enabled, forcing it to true'
+				);
+				options.compilerOptions.css = true;
+			}
 		}
 	}
 }
@@ -83,10 +101,6 @@ function enforceOptionsForProduction(options: ResolvedOptions) {
 			log.warn('options.hot is enabled but does not work on production build, forcing it to false');
 			options.hot = false;
 		}
-		if (!options.emitCss) {
-			log.warn('you are building for production but emitCss is disabled. forcing it to true');
-			options.emitCss = true;
-		}
 		if (options.compilerOptions.dev) {
 			log.warn(
 				'you are building for production but compilerOptions.dev is true, forcing it to false'
@@ -123,7 +137,6 @@ export async function resolveOptions(
 	viteConfig: ResolvedConfig
 ): Promise<ResolvedOptions> {
 	const defaultOptions = buildDefaultOptions(viteConfig, inlineOptions);
-	// TODO always load from vite root dir or make this configurable?
 	const svelteConfig = (await loadSvelteConfig(viteConfig, inlineOptions)) || {};
 	const resolvedOptions = mergeOptions(defaultOptions, svelteConfig, inlineOptions, viteConfig);