feat: compilerOptions as function in root of svelte.config.js

.changeset/fresh-hotels-behave.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+allow compilerOptions in svelte.config.js to be a function ({filename,code})=>CompileOptions

.prettierrc.js

@@ -24,6 +24,7 @@ export default {
 				'.changeset/pre.json',
 				'**/vite.config.js.timestamp-*.mjs',
 				'packages/e2e-tests/dynamic-compile-options/src/components/A.svelte',
+				'packages/e2e-tests/dynamic-compile-options/src/components/C.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/dynamic-compile-options/__tests__/dynamic-compile-options.spec.ts

@@ -1,6 +1,7 @@
 import { getText } from '~utils';
 
-test('should respect dynamic compile option preserveWhitespace: true for A', async () => {
+test('should respect dynamic compile option preserveWhitespace: true', async () => {
 	expect(await getText('#A')).toBe('    preserved leading whitespace');
 	expect(await getText('#B')).toBe('removed leading whitespace');
+	expect(await getText('#C')).toBe('    preserved leading whitespace');
 });

packages/e2e-tests/dynamic-compile-options/src/App.svelte

@@ -1,7 +1,9 @@
 <script>
 	import A from './components/A.svelte';
 	import B from './components/B.svelte';
+	import C from './components/C.svelte';
 </script>
 
 <A />
 <B />
+<C />

packages/e2e-tests/dynamic-compile-options/src/components/C.svelte

@@ -0,0 +1 @@
+<div id="C">    preserved leading whitespace</div>

packages/e2e-tests/dynamic-compile-options/vite.config.js

@@ -11,6 +11,18 @@ export default defineConfig(() => {
 							preserveWhitespace: true
 						};
 					}
+				},
+				compilerOptions({ filename }) {
+					if (filename.endsWith('A.svelte')) {
+						return {
+							preserveWhitespace: false // should be overridden by dynamicCompileOptions above
+						};
+					}
+					if (filename.endsWith('C.svelte')) {
+						return {
+							preserveWhitespace: true
+						};
+					}
 				}
 			})
 		],

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

@@ -190,9 +190,6 @@ export function svelte(inlineOptions) {
 			},
 
 			handleHotUpdate(ctx) {
-				if (!options.compilerOptions.hmr || !options.emitCss) {
-					return;
-				}
 				const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
 				if (svelteRequest) {
 					return handleHotUpdate(compileSvelte, ctx, svelteRequest, cache, options);

packages/vite-plugin-svelte/src/public.d.ts

@@ -1,6 +1,7 @@
 import type { InlineConfig, ResolvedConfig } from 'vite';
 import type { CompileOptions, Warning, PreprocessorGroup } from 'svelte/compiler';
 import type { Options as InspectorOptions } from '@sveltejs/vite-plugin-svelte-inspector';
+import type { DynamicRestrictedSvelteCompileOptions } from './types/options.d.ts';
 
 export type Options = Omit<SvelteConfig, 'vitePlugin'> & PluginOptionsInline;
 
@@ -131,7 +132,7 @@ export interface SvelteConfig {
 	 *
 	 * @see https://svelte.dev/docs#svelte_compile
 	 */
-	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
+	compilerOptions?: DynamicRestrictedSvelteCompileOptions;
 
 	/**
 	 * Handles warning emitted from the Svelte compiler

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

@@ -5,7 +5,7 @@ import type { ResolvedOptions } from './options.d.ts';
 export type CompileSvelte = (
 	svelteRequest: SvelteRequest,
 	code: string,
-	options: Partial<ResolvedOptions>
+	options: ResolvedOptions
 ) => Promise<CompileData>;
 
 export interface Code {

packages/vite-plugin-svelte/src/types/options.d.ts

@@ -4,9 +4,17 @@ import type { ViteDevServer } from 'vite';
 import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
 import type { Options } from '../public.d.ts';
 
+export type RestrictedSvelteCompileOptions = Omit<
+	CompileOptions,
+	'filename' | 'format' | 'generate'
+>;
+export type DynamicRestrictedSvelteCompileOptions =
+	| RestrictedSvelteCompileOptions
+	| ((args: { filename: string; code: string }) => RestrictedSvelteCompileOptions);
+
 export interface PreResolvedOptions extends Options {
 	// these options are non-nullable after resolve
-	compilerOptions: CompileOptions;
+	compilerOptions: DynamicRestrictedSvelteCompileOptions;
 	// extra options
 	root: string;
 	isBuild: boolean;

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

@@ -3,12 +3,10 @@ import * as svelte from 'svelte/compiler';
 import { safeBase64Hash } from './hash.js';
 import { log } from './log.js';
 
-import {
-	checkPreprocessDependencies,
-	createInjectScopeEverythingRulePreprocessorGroup
-} from './preprocess.js';
+import { checkPreprocessDependencies } from './preprocess.js';
 import { mapToRelative } from './sourcemaps.js';
 import { enhanceCompileError } from './error.js';
+import { enforceCompilerOptions } from './options.js';
 
 // TODO this is a patched version of https://github.com/sveltejs/vite-plugin-svelte/pull/796/files#diff-3bce0b33034aad4b35ca094893671f7e7ddf4d27254ae7b9b0f912027a001b15R10
 // which is closer to the other regexes in at least not falling into commented script
@@ -22,11 +20,10 @@ const scriptLangRE =
 export function createCompileSvelte() {
 	/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
 	let stats;
-	const devStylePreprocessor = createInjectScopeEverythingRulePreprocessorGroup();
 	/** @type {import('../types/compile.d.ts').CompileSvelte} */
 	return async function compileSvelte(svelteRequest, code, options) {
 		const { filename, normalizedFilename, cssId, ssr, raw } = svelteRequest;
-		const { emitCss = true } = options;
+
 		/** @type {string[]} */
 		const dependencies = [];
 		/** @type {import('svelte/compiler').Warning[]} */
@@ -56,30 +53,10 @@ export function createCompileSvelte() {
 				// also they for hmr updates too
 			}
 		}
-		/** @type {import('svelte/compiler').CompileOptions} */
-		const compileOptions = {
-			...options.compilerOptions,
-			filename,
-			generate: ssr ? 'server' : 'client'
-		};
-
-		if (compileOptions.hmr && options.emitCss) {
-			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
-			compileOptions.cssHash = () => hash;
-		}
 
 		let preprocessed;
-		let preprocessors = options.preprocess;
-		if (!options.isBuild && options.emitCss && compileOptions.hmr) {
-			// inject preprocessor that ensures css hmr works better
-			if (!Array.isArray(preprocessors)) {
-				preprocessors = preprocessors
-					? [preprocessors, devStylePreprocessor]
-					: [devStylePreprocessor];
-			} else {
-				preprocessors = preprocessors.concat(devStylePreprocessor);
-			}
-		}
+		const preprocessors = options.preprocess;
+
 		if (preprocessors) {
 			try {
 				preprocessed = await svelte.preprocess(code, preprocessors, { filename }); // full filename here so postcss works
@@ -97,8 +74,6 @@ export function createCompileSvelte() {
 					dependencies.push(...checked.dependencies);
 				}
 			}
-
-			if (preprocessed.map) compileOptions.sourcemap = preprocessed.map;
 		}
 		if (typeof preprocessed?.map === 'object') {
 			mapToRelative(preprocessed?.map, filename);
@@ -109,7 +84,32 @@ export function createCompileSvelte() {
 				preprocessed: preprocessed ?? { code }
 			};
 		}
-		const finalCode = preprocessed ? preprocessed.code : code;
+		let finalCode = preprocessed ? preprocessed.code : code;
+		/**@type import('svelte/compiler').CompileOptions */
+		const compileOptions = {
+			css: options.emitCss ? 'external' : 'injected',
+			dev: !options.isProduction,
+			hmr:
+				!options.isProduction &&
+				!options.isBuild &&
+				options.server &&
+				options.server.config.server.hmr !== false,
+			...(typeof options.compilerOptions === 'function'
+				? options.compilerOptions({ filename, code: finalCode })
+				: options.compilerOptions)
+		};
+
+		enforceCompilerOptions(compileOptions, options);
+		compileOptions.filename = filename;
+		compileOptions.generate = ssr ? 'server' : 'client';
+		if (preprocessed?.map) {
+			compileOptions.sourcemap = preprocessed.map;
+		}
+		if (compileOptions.hmr && options.emitCss) {
+			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
+			compileOptions.cssHash = () => hash;
+		}
+
 		const dynamicCompileOptions = await options?.dynamicCompileOptions?.({
 			filename,
 			code: finalCode,
@@ -122,12 +122,27 @@ export function createCompileSvelte() {
 				'compile'
 			);
 		}
-		const finalCompileOptions = dynamicCompileOptions
-			? {
-					...compileOptions,
-					...dynamicCompileOptions
-				}
-			: compileOptions;
+		const finalCompileOptions = {
+			...compileOptions,
+			...dynamicCompileOptions
+		};
+
+		if (!options.isBuild && options.emitCss && finalCompileOptions.hmr) {
+			// use css preprocessor to inject rule that ensures css-only hmr works better
+			const processed = await svelte.preprocess(
+				finalCode,
+				[
+					{
+						name: 'inject-scope-everything-rule',
+						// no sourcemap, we just append 4 chars at the last line so no shifts
+						style: ({ content }) => ({ code: `${content ?? ''} *{}` })
+					}
+				],
+				{ filename }
+			);
+			finalCode = processed.code;
+		}
+
 		const endStat = stats?.start(filename);
 		/** @type {import('svelte/compiler').CompileResult} */
 		let compiled;
@@ -164,7 +179,7 @@ export function createCompileSvelte() {
 			// wire css import and code for hmr
 			const hasCss = compiled.css?.code?.trim()?.length ?? 0 > 0;
 			// compiler might not emit css with mode none or it may be empty
-			if (emitCss && hasCss) {
+			if (options.emitCss && hasCss) {
 				// TODO properly update sourcemap?
 				compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
 			}

packages/vite-plugin-svelte/src/utils/esbuild.js

@@ -56,16 +56,13 @@ export function esbuildSveltePlugin(options) {
  * @returns {Promise<string>}
  */
 async function compileSvelte(options, { filename, code }, statsCollection) {
-	let css = options.compilerOptions.css;
-	if (css !== 'injected') {
-		// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
-		css = 'injected';
-	}
 	/** @type {import('svelte/compiler').CompileOptions} */
 	const compileOptions = {
 		dev: true, // default to dev: true because prebundling is only used in dev
-		...options.compilerOptions,
-		css,
+		...(typeof options.compilerOptions === 'function'
+			? options.compilerOptions({ filename, code })
+			: options.compilerOptions),
+		css: 'injected', // TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
 		filename,
 		generate: 'client'
 	};
@@ -163,8 +160,14 @@ export function esbuildSvelteModulePlugin(options) {
  */
 async function compileSvelteModule(options, { filename, code }, statsCollection) {
 	const endStat = statsCollection?.start(filename);
+	// default to dev: true because prebundling is only used in dev
+	const dev =
+		(typeof options.compilerOptions === 'function'
+			? options.compilerOptions({ filename, code })
+			: options.compilerOptions
+		)?.dev ?? true;
 	const compiled = svelte.compileModule(code, {
-		dev: options.compilerOptions?.dev ?? true, // default to dev: true because prebundling is only used in dev
+		dev,
 		filename,
 		generate: 'client'
 	});