wip

packages/astro/src/vite-plugin-astro-server/plugin.ts

@@ -160,17 +160,6 @@ export default function createVitePluginAstroServer({
 				});
 			};
 		},
-		transform: {
-			filter: {
-				id: /id\/vite\/dist\/client\/client\.mjs/,
-			},
-			handler(code, _id, opts) {
-				if (opts?.ssr) return;
-
-				// Replace the Vite overlay with ours
-				return patchOverlay(code);
-			},
-		},
 	};
 }
 
@@ -180,12 +169,14 @@ export function createVitePluginAstroServerClient(): vite.Plugin {
 		applyToEnvironment(environment) {
 			return environment.name === ASTRO_VITE_ENVIRONMENT_NAMES.client;
 		},
-		transform(code, id, opts = {}) {
-			if (opts.ssr) return;
-			if (!id.includes('vite/dist/client/client.mjs')) return;
-
-			// Replace the Vite overlay with ours
-			return patchOverlay(code);
+		transform: {
+			filter: {
+				id: /id\/vite\/dist\/client\/client\.mjs/,
+			},
+			handler(code) {
+				// Replace the Vite overlay with ours
+				return patchOverlay(code);
+			},
 		},
 	};
 }

packages/astro/src/vite-plugin-astro-server/util.ts

@@ -1,7 +1,7 @@
 import { isCSSRequest } from 'vite';
 
-const rawRE = /(?:\?|&)raw(?:&|$)/;
-const inlineRE = /(?:\?|&)inline\b/;
+export const rawRE = /(?:\?|&)raw(?:&|$)/;
+export const inlineRE = /(?:\?|&)inline\b/;
 
 export const isBuildableCSSRequest = (request: string): boolean =>
 	isCSSRequest(request) && !rawRE.test(request) && !inlineRE.test(request);

packages/astro/src/vite-plugin-css/index.ts

@@ -2,11 +2,12 @@ import type { Plugin, RunnableDevEnvironment } from 'vite';
 import { wrapId } from '../core/util.js';
 import type { ImportedDevStyle, RoutesList } from '../types/astro.js';
 import type * as vite from 'vite';
-import { isBuildableCSSRequest } from '../vite-plugin-astro-server/util.js';
+import { inlineRE, isBuildableCSSRequest, rawRE } from '../vite-plugin-astro-server/util.js';
 import { getVirtualModulePageNameForComponent } from '../vite-plugin-pages/util.js';
 import { getDevCSSModuleName } from './util.js';
 import { prependForwardSlash } from '@astrojs/internal-helpers/path';
 import { ASTRO_VITE_ENVIRONMENT_NAMES } from '../core/constants.js';
+import { CSS_LANGS_RE } from '../core/viteUtils.js';
 
 interface AstroVitePluginOptions {
 	routesList: RoutesList;
@@ -170,18 +171,24 @@ export function astroDevCssPlugin({ routesList, command }: AstroVitePluginOption
 				},
 			},
 
-			async transform(code, id) {
-				if (command === 'build') {
-					return;
-				}
+			transform: {
+				filter: {
+					id: {
+						include: [CSS_LANGS_RE],
+						exclude: [rawRE, inlineRE],
+					},
+				},
+				handler(code, id) {
+					if (command === 'build') {
+						return;
+					}
 
-				// Cache CSS content as we see it
-				if (isBuildableCSSRequest(id)) {
+					// Cache CSS content as we see it
 					const mod = environment?.moduleGraph.getModuleById(id);
 					if (mod) {
 						cssContentCache.set(id, code);
 					}
-				}
+				},
 			},
 		},
 		{

packages/astro/src/vite-plugin-html/index.ts

@@ -6,9 +6,11 @@ export default function html() {
 		options(options: any) {
 			options.plugins = options.plugins?.filter((p: any) => p.name !== 'vite:build-html');
 		},
-		async transform(source: string, id: string) {
-			if (!id.endsWith('.html')) return;
-			return await transform(source, id);
+		transform: {
+			filter: {
+				id: /\.html$/,
+			},
+			handler: transform,
 		},
 	};
 }

packages/integrations/mdx/src/vite-plugin-mdx-postprocess.ts

@@ -15,21 +15,24 @@ const astroTagComponentImportRegex = /[\s,{]__astro_tag_component__[\s,}]/;
 export function vitePluginMdxPostprocess(astroConfig: AstroConfig): Plugin {
 	return {
 		name: '@astrojs/mdx-postprocess',
-		transform(code, id, opts) {
-			if (!id.endsWith('.mdx')) return;
-
-			const fileInfo = getFileInfo(id, astroConfig);
-			const [imports, exports] = parse(code);
-
-			// Call a series of functions that transform the code
-			code = injectUnderscoreFragmentImport(code, imports);
-			code = injectMetadataExports(code, exports, fileInfo);
-			code = transformContentExport(code, exports);
-			code = annotateContentExport(code, id, !!opts?.ssr, imports);
-
-			// The code transformations above are append-only, so the line/column mappings are the same
-			// and we can omit the sourcemap for performance.
-			return { code, map: null };
+		transform: {
+			filter: {
+				id: /\.mdx$/
+			},
+			handler(code, id, opts) {
+				const fileInfo = getFileInfo(id, astroConfig);
+				const [imports, exports] = parse(code);
+
+				// Call a series of functions that transform the code
+				code = injectUnderscoreFragmentImport(code, imports);
+				code = injectMetadataExports(code, exports, fileInfo);
+				code = transformContentExport(code, exports);
+				code = annotateContentExport(code, id, !!opts?.ssr, imports);
+
+				// The code transformations above are append-only, so the line/column mappings are the same
+				// and we can omit the sourcemap for performance.
+				return { code, map: null };
+			},
 		},
 	};
 }

packages/integrations/mdx/src/vite-plugin-mdx.ts

@@ -47,51 +47,54 @@ export function vitePluginMdx(opts: VitePluginMdxOptions): Plugin {
 		},
 		// Override transform to alter code before MDX compilation
 		// ex. inject layouts
-		async transform(code, id) {
-			if (!id.endsWith('.mdx')) return;
-
-			const { frontmatter, content } = safeParseFrontmatter(code, id);
+		transform: {
+			filter: {
+				id: /\.mdx$/,
+			},
+			async handler(code, id) {
+				const { frontmatter, content } = safeParseFrontmatter(code, id);
 
-			const vfile = new VFile({
-				value: content,
-				path: id,
-				data: {
-					astro: {
-						frontmatter,
+				const vfile = new VFile({
+					value: content,
+					path: id,
+					data: {
+						astro: {
+							frontmatter,
+						},
+						applyFrontmatterExport: {
+							srcDir: opts.srcDir,
+						},
 					},
-					applyFrontmatterExport: {
-						srcDir: opts.srcDir,
-					},
-				},
-			});
-
-			// Lazily initialize the MDX processor
-			if (!processor) {
-				processor = createMdxProcessor(opts.mdxOptions, {
-					sourcemap: sourcemapEnabled,
 				});
-			}
 
-			try {
-				const compiled = await processor.process(vfile);
+				// Lazily initialize the MDX processor
+				if (!processor) {
+					processor = createMdxProcessor(opts.mdxOptions, {
+						sourcemap: sourcemapEnabled,
+					});
+				}
 
-				return {
-					code: String(compiled.value),
-					map: compiled.map,
-					meta: getMdxMeta(vfile),
-				};
-			} catch (e: any) {
-				const err: SSRError = e;
+				try {
+					const compiled = await processor.process(vfile);
 
-				// For some reason MDX puts the error location in the error's name, not very useful for us.
-				err.name = 'MDXError';
-				err.loc = { file: id, line: e.line, column: e.column };
+					return {
+						code: String(compiled.value),
+						map: compiled.map,
+						meta: getMdxMeta(vfile),
+					};
+				} catch (e: any) {
+					const err: SSRError = e;
 
-				// For another some reason, MDX doesn't include a stack trace. Weird
-				Error.captureStackTrace(err);
+					// For some reason MDX puts the error location in the error's name, not very useful for us.
+					err.name = 'MDXError';
+					err.loc = { file: id, line: e.line, column: e.column };
 
-				throw err;
-			}
+					// For another some reason, MDX doesn't include a stack trace. Weird
+					Error.captureStackTrace(err);
+
+					throw err;
+				}
+			},
 		},
 	};
 }

packages/integrations/vue/src/index.ts

@@ -89,16 +89,19 @@ export const setup = async (app) => {
 		// Ensure that Vue components reference appEntrypoint directly
 		// This allows Astro to associate global styles imported in this file
 		// with the pages they should be injected to
-		transform(code, id) {
-			if (!appEntrypoint) return;
-			if (id.endsWith('.vue')) {
+		transform: {
+			filter: {
+				id: /\.vue$/,
+			},
+			handler(code) {
+				if (!appEntrypoint) return;
 				const s = new MagicString(code);
 				s.prepend(`import ${JSON.stringify(appEntrypoint)};\n`);
 				return {
 					code: s.toString(),
 					map: s.generateMap({ hires: 'boundary' }),
 				};
-			}
+			},
 		},
 	};
 }