withastro · ascorbic · Jun 7, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
diff --git a/.changeset/open-melons-start.md b/.changeset/open-melons-start.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a bug where vite virtual module ids were incorrectly added in the dev server
diff --git a/packages/astro/e2e/fixtures/vite-virtual-modules/astro.config.mjs b/packages/astro/e2e/fixtures/vite-virtual-modules/astro.config.mjs
@@ -0,0 +1,10 @@
+import { defineConfig } from 'astro/config';
+
+import virtual from "./src/plugins/virtual";
+
+// https://astro.build/config
+export default defineConfig({
+    vite: {
+        plugins: [virtual],
+    },
+});
diff --git a/packages/astro/e2e/fixtures/vite-virtual-modules/package.json b/packages/astro/e2e/fixtures/vite-virtual-modules/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@e2e/vite-virtual-modules",
+	"type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/e2e/fixtures/vite-virtual-modules/src/pages/index.astro b/packages/astro/e2e/fixtures/vite-virtual-modules/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+import "virtual:dynamic.css";
+---
+
+<html lang="en">
+    <head>
+        <!-- Head Stuff -->
+    </head>
+    <body>
+        <h1>Astro</h1>
+    </body>
+</html>
diff --git a/packages/astro/e2e/fixtures/vite-virtual-modules/src/plugins/virtual.ts b/packages/astro/e2e/fixtures/vite-virtual-modules/src/plugins/virtual.ts
@@ -0,0 +1,18 @@
+import type { Plugin } from "vite";
+
+const VIRTUAL_MODULE_ID = "virtual:dynamic.css";
+const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
+
+export default {
+    name: VIRTUAL_MODULE_ID,
+    resolveId(source) {
+        if (!source.startsWith(VIRTUAL_MODULE_ID)) return;
+
+        return RESOLVED_VIRTUAL_MODULE_ID;
+    },
+    load(id) {
+        if (!id.startsWith(RESOLVED_VIRTUAL_MODULE_ID)) return;
+
+        return "body { background: red; }";
+    },
+} satisfies Plugin;
diff --git a/packages/astro/e2e/vite-virtual-modules.test.js b/packages/astro/e2e/vite-virtual-modules.test.js
@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory(import.meta.url, { root: './fixtures/vite-virtual-modules/' });
+const VIRTUAL_MODULE_ID = '/@id/__x00__virtual:dynamic.css';
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async () => {
+	await devServer.stop();
+});
+
+/**
+ *
+ * @param {import("@playwright/test").Page} page
+ * @param {string} element
+ * @param {string} attribute
+ * @returns {Promise<import("@playwright/test").Locator>}
+ */
+async function getElemForVirtual(page, element, attribute) {
+	const elements = await page.locator(element).all();
+
+	for (const elem of elements) {
+		const attr = await elem.getAttribute(attribute);
+
+		if (attr !== VIRTUAL_MODULE_ID) continue;
+
+		return elem;
+	}
+}
+
+test.describe('Vite Virtual Modules', () => {
+	test('contains style tag with virtual module id', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const style = await getElemForVirtual(page, 'style', 'data-vite-dev-id');
+
+		expect(style).not.toBeUndefined();
+	});
+
+	test('contains script tag with virtual module id', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const script = await getElemForVirtual(page, 'script', 'src');
+
+		expect(script).not.toBeUndefined();
+	});
+});
diff --git a/packages/astro/src/core/util.ts b/packages/astro/src/core/util.ts
@@ -101,6 +101,7 @@ export function viteID(filePath: URL): string {
 
 export const VALID_ID_PREFIX = `/@id/`;
 const NULL_BYTE_PLACEHOLDER = `__x00__`;
+const NULL_BYTE_REGEX = /^\0/;
 
 // Strip valid id prefix and replace null byte placeholder. Both are prepended to resolved ids
 // as they are not valid browser import specifiers (by the Vite's importAnalysis plugin)
@@ -110,6 +111,11 @@ export function unwrapId(id: string): string {
 		: id;
 }
 
+// Reverses `unwrapId` function
+export function wrapId(id: string): string {
+	return id.replace(NULL_BYTE_REGEX, `${VALID_ID_PREFIX}${NULL_BYTE_PLACEHOLDER}`);
+}
+
 export function resolvePages(config: AstroConfig) {
 	return new URL('./pages', config.srcDir);
 }

diff --git a/packages/astro/src/vite-plugin-astro-server/css.ts b/packages/astro/src/vite-plugin-astro-server/css.ts
@@ -1,5 +1,5 @@
 import type { ModuleLoader } from '../core/module-loader/index.js';
-import { viteID } from '../core/util.js';
+import { viteID, wrapId } from '../core/util.js';
 import { isBuildableCSSRequest } from './util.js';
 import { crawlGraph } from './vite.js';
 
@@ -55,8 +55,8 @@ export async function getStylesForURL(
 			}
 
 			importedStylesMap.set(importedModule.url, {
-				id: importedModule.id ?? importedModule.url,
-				url: importedModule.url,
+				id: wrapId(importedModule.id ?? importedModule.url),
+				url: wrapId(importedModule.url),
 				content: css,
 			});
 		}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml