fix: handle emitCss in svelte config (#194)

Author: bluwy

.changeset/red-experts-work.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Fix emitCss behaviour in a svelte config

packages/e2e-tests/hmr/__tests__/hmr.spec.ts

@@ -32,6 +32,7 @@ test('should render dynamic import', async () => {
 	await dynamicImportButton.click();
 	await untilUpdated(() => getText('#dynamic-import .label'), 'dynamic-import');
 });
+
 test('should not have failed requests', async () => {
 	browserLogs.forEach((msg) => {
 		expect(msg).not.toMatch('404');
@@ -123,7 +124,7 @@ if (!isBuild) {
 			expect(await getText(`#hmr-test-3 .counter`)).toBe('0');
 		});
 
-		test('should work with emitCss: false', async () => {
+		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');
@@ -135,6 +136,15 @@ if (!isBuild) {
 			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
 		});
 
+		test('should work with emitCss: false in svelte config', async () => {
+			addFile('svelte.config.cjs', `module.exports={emitCss:false}`);
+			await sleep(isWin ? 1000 : 500); // adding config restarts server, give it some time
+			await page.goto(viteTestUrl, { waitUntil: 'networkidle' });
+			await sleep(50);
+			expect(await getColor(`#hmr-test-1 .label`)).toBe('red');
+			removeFile('svelte.config.cjs');
+		});
+
 		test('should detect changes in svelte config and restart', async () => {
 			const injectPreprocessor = ({ content, filename }) => {
 				if (filename && filename.includes('App.svelte')) {

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

@@ -31,13 +31,12 @@ const knownOptions = new Set([
 	'experimental'
 ]);
 
-function buildDefaultOptions(isProduction: boolean, options: Partial<Options>): Partial<Options> {
-	// emit for prod, emit in dev unless css hmr is disabled
-	const emitCss = options?.emitCss != null ? options.emitCss : true;
+function buildDefaultOptions(isProduction: boolean, emitCss = true): Partial<Options> {
 	// no hmr in prod, only inject css in dev if emitCss is false
 	const hot = isProduction
 		? false
 		: {
+				// emit for prod, emit in dev unless css hmr is disabled
 				injectCss: !emitCss
 		  };
 	const defaultOptions: Partial<Options> = {
@@ -156,8 +155,11 @@ export async function resolveOptions(
 		...viteConfig,
 		root: resolveViteRoot(viteConfig)
 	};
-	const defaultOptions = buildDefaultOptions(viteEnv.mode === 'production', inlineOptions);
 	const svelteConfig = (await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions)) || {};
+	const defaultOptions = buildDefaultOptions(
+		viteEnv.mode === 'production',
+		inlineOptions.emitCss ?? svelteConfig.emitCss
+	);
 	const resolvedOptions = mergeOptions(
 		defaultOptions,
 		svelteConfig,