2 files changed, 68 insertions, 16 deletions

diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md
index e5bce561a..b0cddafe2 100644
--- a/packages/integrations/svelte/README.md
+++ b/packages/integrations/svelte/README.md
@@ -63,3 +63,31 @@ Also check our [Astro Integration Documentation][astro-integration] for more on
 
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
 [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
+
+## Options
+
+This integration is powered by `@sveltejs/vite-plugin-svelte`. To customize the Svelte compiler, options can be provided to the integration. See the `@sveltejs/vite-plugin-svelte` [docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) for more details.
+
+### Default options
+
+A few of the default options passed to the Svelte compiler are required to build properly for Astro and cannot be overridden.
+
+```js
+const defaultOptions = {
+  emitCss: true,
+  compilerOptions: { dev: isDev, hydratable: true },
+  preprocess: [
+    preprocess({
+      less: true,
+      sass: { renderSync: true },
+      scss: { renderSync: true },
+      stylus: true,
+      typescript: true,
+    }),
+  ],
+};
+```
+
+The `emitCss`, `compilerOptions.dev`, and `compilerOptions.hydratable` cannot be overridden.
+
+Providing your own `preprocess` options **will** override the defaults - make sure to enable the preprocessor flags needed for your project.
\ No newline at end of file
diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts
index f5a3dd945..d12b6d533 100644
--- a/packages/integrations/svelte/src/index.ts
+++ b/packages/integrations/svelte/src/index.ts
@@ -1,6 +1,7 @@
 import type { AstroIntegration, AstroRenderer } from 'astro';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import preprocess from 'svelte-preprocess';
+import type { Options } from '@sveltejs/vite-plugin-svelte';
 
 function getRenderer(): AstroRenderer {
 	return {
@@ -10,38 +11,61 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
-function getViteConfiguration(isDev: boolean) {
+function getViteConfiguration(isDev: boolean, options?: Options | OptionsCallback) {
+	const defaultOptions = {
+		emitCss: true,
+		compilerOptions: { dev: isDev, hydratable: true },
+		preprocess: [
+			preprocess({
+				less: true,
+				sass: { renderSync: true },
+				scss: { renderSync: true },
+				stylus: true,
+				typescript: true,
+			}),
+		],
+	};
+
+	let resolvedOptions: Partial<Options>;
+
+	if (!options) {
+		resolvedOptions = defaultOptions;
+	} else if (typeof options === 'function') {
+		resolvedOptions = options(defaultOptions);
+	} else {
+		resolvedOptions = {
+			...options,
+			...defaultOptions,
+			compilerOptions: {
+				...options.compilerOptions,
+				// Always use dev and hydratable from defaults
+				...defaultOptions.compilerOptions,
+			},
+			// Ignore default preprocessor if the user provided their own
+			preprocess: options.preprocess ?? defaultOptions.preprocess,
+		};
+	}
+
 	return {
 		optimizeDeps: {
 			include: ['@astrojs/svelte/client.js', 'svelte', 'svelte/internal'],
 			exclude: ['@astrojs/svelte/server.js'],
 		},
 		plugins: [
-			svelte({
-				emitCss: true,
-				compilerOptions: { dev: isDev, hydratable: true },
-				preprocess: [
-					preprocess({
-						less: true,
-						sass: { renderSync: true },
-						scss: { renderSync: true },
-						stylus: true,
-						typescript: true,
-					}),
-				],
-			}),
+			svelte(resolvedOptions),
 		],
 	};
 }
 
-export default function (): AstroIntegration {
+type OptionsCallback = (defaultOptions: Options) => Options;
+export default function (options?: Options | OptionsCallback): AstroIntegration {
 	return {
 		name: '@astrojs/svelte',
 		hooks: {
 			// Anything that gets returned here is merged into Astro Config
 			'astro:config:setup': ({ command, updateConfig, addRenderer }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration(command === 'dev') });
+				updateConfig({ vite: getViteConfiguration(command === 'dev', options) });
 			},
 		},
 	};