Support Vite 3.1

.changeset/shaggy-books-give.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Support Vite 3.1

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

@@ -340,17 +340,17 @@ ${source}
 				throw err;
 			}
 		},
-		async handleHotUpdate(this: PluginContext, context) {
+		async handleHotUpdate(context) {
 			if (context.server.config.isProduction) return;
 			const compileProps: CompileProps = {
 				config,
 				filename: context.file,
 				moduleId: context.file,
 				source: await context.read(),
-				transformStyle: createTransformStyles(styleTransformer, context.file, true, this),
+				transformStyle: createTransformStyles(styleTransformer, context.file, true),
 			};
 			const compile = () => cachedCompilation(compileProps);
-			return handleHotUpdate.call(this, context, {
+			return handleHotUpdate(context, {
 				config,
 				logging,
 				compile,

packages/astro/src/vite-style-transform/style-transform.ts

@@ -30,14 +30,8 @@ export function createTransformStyles(
 	viteStyleTransformer: ViteStyleTransformer,
 	filename: string,
 	ssr: boolean,
-	pluginContext: PluginContext
+	pluginContext?: PluginContext
 ): TransformStyle {
-	// handleHotUpdate doesn't have `addWatchFile` used by transformStyleWithVite.
-	// TODO, refactor, why is this happening *here* ?
-	if (!pluginContext.addWatchFile) {
-		pluginContext.addWatchFile = () => {};
-	}
-
 	const normalizedID = getNormalizedIDForPostCSS(filename);
 
 	return async function (styleSource, lang) {

packages/astro/src/vite-style-transform/transform-with-vite.ts

@@ -46,7 +46,10 @@ export function createTransformStyleWithViteFn(
 
 		viteDevServer?.moduleGraph.ensureEntryFromUrl(styleId, ssr, false);
 
-		const transformResult = await transformCss.call(this, source, styleId, ssr);
+		// This function could be called in a custom Vite hook like `handleHotUpdate`
+		// which doesn't have a context
+		const ctx = this ?? { addWatchFile: () => {} };
+		const transformResult = await transformCss.call(ctx, source, styleId, ssr);
 
 		// NOTE: only `code` and `map` are returned by vite:css
 		const { code, map } = transformResult;