2 files changed, 59 insertions, 16 deletions

diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md
index ab6f5d856..854bded21 100644
--- a/packages/integrations/svelte/README.md
+++ b/packages/integrations/svelte/README.md
@@ -84,18 +84,44 @@ A few of the default options passed to the Svelte compiler are required to build
 const defaultOptions = {
   emitCss: true,
   compilerOptions: { dev: isDev, hydratable: true },
-  preprocess: [
-    preprocess({
-      less: true,
-      sass: { renderSync: true },
-      scss: { renderSync: true },
-      stylus: true,
-      typescript: true,
-    }),
-  ],
+  preprocess: vitePreprocess()
 };
 ```
 
 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.
+Providing your own `preprocess` options **will** override the defaults - make sure to enable the preprocessor flags needed for your project. For example,
+
+```js
+// astro.config.js
+import svelte from '@astrojs/svelte';
+
+export default {
+  integrations: [svelte({ preprocess: [] })],
+};
+```
+
+and
+
+```js
+// svelte.config.js
+export default {
+  preprocess: [],
+};
+```
+
+Will override the default `preprocess` option. You can read the [`vitePreprocess` docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) for more information of how it works.
+
+## Intellisense for TypeScript
+
+If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file with:
+
+```js
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+};
+```
+
+So the Svelte IDE extension can correctly parse the Svelte files. This config file is added by default when you run `astro add svelte`.
diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts
index 6bf5bcc4e..7daa9bec5 100644
--- a/packages/integrations/svelte/src/index.ts
+++ b/packages/integrations/svelte/src/index.ts
@@ -2,6 +2,7 @@ import type { Options } from '@sveltejs/vite-plugin-svelte';
 import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import type { AstroIntegration, AstroRenderer } from 'astro';
 import type { UserConfig } from 'vite';
+import { fileURLToPath } from 'url';
 
 function getRenderer(): AstroRenderer {
 	return {
@@ -11,16 +12,27 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
+async function svelteConfigHasPreprocess(root: URL) {
+	const svelteConfigFiles = ['./svelte.config.js', './svelte.config.cjs', './svelte.config.mjs'];
+	for (const file of svelteConfigFiles) {
+		const filePath = fileURLToPath(new URL(file, root));
+		try {
+			const config = (await import(filePath)).default;
+			return !!config.preprocess;
+		} catch {}
+	}
+}
+
 type ViteConfigurationArgs = {
 	isDev: boolean;
 	options?: Options | OptionsCallback;
+	root: URL;
 };
 
-function getViteConfiguration({ options, isDev }: ViteConfigurationArgs): UserConfig {
+async function getViteConfiguration({ options, isDev, root }: ViteConfigurationArgs): Promise<UserConfig> {
 	const defaultOptions: Partial<Options> = {
 		emitCss: true,
 		compilerOptions: { dev: isDev, hydratable: true },
-		preprocess: [vitePreprocess()],
 	};
 
 	// Disable hot mode during the build
@@ -43,11 +55,13 @@ function getViteConfiguration({ options, isDev }: ViteConfigurationArgs): UserCo
 				// Always use dev and hydratable from defaults
 				...defaultOptions.compilerOptions,
 			},
-			// Ignore default preprocessor if the user provided their own
-			preprocess: options.preprocess ?? defaultOptions.preprocess,
 		};
 	}
 
+	if (!resolvedOptions.preprocess && !(await svelteConfigHasPreprocess(root))) {
+		resolvedOptions.preprocess = vitePreprocess();
+	}
+
 	return {
 		optimizeDeps: {
 			include: ['@astrojs/svelte/client.js'],
@@ -63,15 +77,18 @@ export default function (options?: Options | OptionsCallback): AstroIntegration
 		name: '@astrojs/svelte',
 		hooks: {
 			// Anything that gets returned here is merged into Astro Config
-			'astro:config:setup': ({ command, updateConfig, addRenderer }) => {
+			'astro:config:setup': async ({ command, updateConfig, addRenderer, config }) => {
 				addRenderer(getRenderer());
 				updateConfig({
-					vite: getViteConfiguration({
+					vite: await getViteConfiguration({
 						options,
 						isDev: command === 'dev',
+						root: config.root,
 					}),
 				});
 			},
 		},
 	};
 }
+
+export { vitePreprocess };