Fix ?inline and ?raw css query suffixes inlined in style tags in development (#6426)

* test: add test cases

* test: add another expectation

* fix: don't crawl inline and raw css queries

* chore: changeset

.changeset/witty-taxis-accept.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent `?inline` and `?raw` css query suffixes from injecting style tags in development

packages/astro/src/core/render/dev/css.ts

@@ -2,7 +2,7 @@ import type { ModuleLoader } from '../../module-loader/index';
 
 import { RuntimeMode } from '../../../@types/astro.js';
 import { viteID } from '../../util.js';
-import { isCSSRequest } from './util.js';
+import { isBuildableCSSRequest } from './util.js';
 import { crawlGraph } from './vite.js';
 
 /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */
@@ -15,7 +15,7 @@ export async function getStylesForURL(
 	const importedStylesMap = new Map<string, string>();
 
 	for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) {
-		if (isCSSRequest(importedModule.url)) {
+		if (isBuildableCSSRequest(importedModule.url)) {
 			let ssrModule: Record<string, any>;
 			try {
 				// The SSR module is possibly not loaded. Load it if it's null.

packages/astro/test/css-inline.test.js

@@ -4,25 +4,64 @@ import { loadFixture } from './test-utils.js';
 
 describe('Importing raw/inlined CSS', () => {
 	let fixture;
-
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/css-inline/',
 		});
-		await fixture.build();
+	});
+	describe('Build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+		it('?inline is imported as a string', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('#inline').text()).to.contain('tomato');
+			expect($('link[rel=stylesheet]')).to.have.lengthOf(1);
+			expect($('style')).to.have.lengthOf(0);
+		});
+
+		it('?raw is imported as a string', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('#raw').text()).to.contain('plum');
+			expect($('link[rel=stylesheet]')).to.have.lengthOf(1);
+			expect($('style')).to.have.lengthOf(0);
+		});
 	});
 
-	it('?inline is imported as a string', async () => {
+	describe('Dev', () => {
-		const html = await fixture.readFile('/index.html');
+		/** @type {import('./test-utils').DevServer} */
-		const $ = cheerio.load(html);
+		let devServer;
 
-		expect($('#inline').text()).to.contain('tomato');
+		before(async () => {
-	});
+			devServer = await fixture.startDevServer();
+		});
 
-	it('?raw is imported as a string', async () => {
+		after(async () => {
-		const html = await fixture.readFile('/index.html');
+			await devServer.stop();
-		const $ = cheerio.load(html);
+		});
 
-		expect($('#raw').text()).to.contain('plum');
+		it("?inline is imported as string and doesn't make css bundled ", async () => {
+			const response = await fixture.fetch('/');
+			const html = await response.text();
+			const $ = cheerio.load(html);
+
+			expect($('#inline').text()).to.contain('tomato');
+			expect($('link[rel=stylesheet]')).to.have.lengthOf(0);
+			expect($('style')).to.have.lengthOf(1);
+		});
+
+		it("?raw is imported as a string and doesn't make css bundled", async () => {
+			const response = await fixture.fetch('/');
+			const html = await response.text();
+			const $ = cheerio.load(html);
+
+			expect($('#raw').text()).to.contain('plum');
+			expect($('link[rel=stylesheet]')).to.have.lengthOf(0);
+			expect($('style')).to.have.lengthOf(1);
+		});
 	});
 });

pnpm-lock.yaml

@@ -1120,14 +1120,6 @@ importers:
       astro: link:../../..
       vue: 3.2.47
 
-  packages/astro/test/benchmark/simple:
-    specifiers:
-      '@astrojs/node': workspace:*
-      astro: workspace:*
-    dependencies:
-      '@astrojs/node': link:../../../../integrations/node
-      astro: link:../../..
-
   packages/astro/test/fixtures/0-css:
     specifiers:
       '@astrojs/react': workspace:*