fix: fix HMR for styles (#14199)

ascorbic · web-flow · commit 3e4cb8e52a83 · 2025-08-08T11:43:03.000+01:00
* fix: fix HMR for styles

* Move check for inline and add test

* Format

* Improve test

* Tidy
diff --git a/.changeset/rare-suns-read.md b/.changeset/rare-suns-read.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a bug that prevented HMR from working with inline styles
diff --git a/packages/astro/e2e/fixtures/hmr/src/pages/css-inline.astro b/packages/astro/e2e/fixtures/hmr/src/pages/css-inline.astro
@@ -0,0 +1,13 @@
+<html>
+	<head>
+		<title>Test</title>
+	</head>
+	<body>
+		<h1 class="css-inline">This is coloured</h1>
+		<style>
+			.css-inline {
+				color: blue;
+			}
+		</style>
+	</body>
+</html>
diff --git a/packages/astro/e2e/hmr.test.js b/packages/astro/e2e/hmr.test.js
@@ -69,4 +69,18 @@ test.describe('Styles', () => {
 
 		await expect(h).toHaveCSS('color', 'rgb(255, 0, 0)');
 	});
+
+	test('inline styles refresh with HMR', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/css-inline'));
+
+		page.once('load', throwPageShouldNotReload);
+
+		const h = page.locator('h1.css-inline');
+		await expect(h).toHaveCSS('color', 'rgb(0, 0, 255)');
+
+		await astro.editFile('./src/pages/css-inline.astro', (original) =>
+			original.replace('blue', 'red'),
+		);
+		await expect(h).toHaveCSS('color', 'rgb(255, 0, 0)');
+	});
 });
diff --git a/packages/astro/src/vite-plugin-astro/hmr.ts b/packages/astro/src/vite-plugin-astro/hmr.ts
@@ -1,5 +1,6 @@
 import type { HmrContext } from 'vite';
 import type { Logger } from '../core/logger/core.js';
+import { parseAstroRequest } from './query.js';
 import type { CompileMetadata } from './types.js';
 import { frontmatterRE } from './utils.js';
 
@@ -37,8 +38,14 @@ export async function handleHotUpdate(
 		// Invalidate its `astroFileToCompileMetadata` so that the next transform of Astro style virtual module
 		// will re-generate it
 		astroFileToCompileMetadata.delete(ctx.file);
-		// Only return the Astro styles that have changed!
-		return ctx.modules.filter((mod) => mod.id?.includes('astro&type=style'));
+		return ctx.modules.filter((mod) => {
+			if (!mod.id) {
+				return false;
+			}
+			const { query } = parseAstroRequest(mod.id);
+			// Only return the Astro styles that have changed, except inline style modules that are treated as SSR-only
+			return query.astro && query.type === 'style' && !query.inline;
+		});
 	}
 }
 
diff --git a/packages/astro/src/vite-plugin-astro/query.ts b/packages/astro/src/vite-plugin-astro/query.ts
@@ -5,6 +5,7 @@ interface AstroQuery {
 	index?: number;
 	lang?: string;
 	raw?: boolean;
+	inline?: boolean;
 }
 
 interface ParsedRequestResult {
@@ -30,6 +31,9 @@ export function parseAstroRequest(id: string): ParsedRequestResult {
 	if (query.raw != null) {
 		query.raw = true;
 	}
+	if (query.inline != null) {
+		query.inline = true;
+	}
 	return {
 		filename,
 		query,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes a bug that prevented HMR from working with inline styles