From e0844852d31d0f5680f2710aaa84e3e808aeb88d Mon Sep 17 00:00:00 2001
From: Happydev <81974850+MoustaphaDev@users.noreply.github.com>
Date: Mon, 6 Mar 2023 13:06:55 +0000
Subject: [PATCH] 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          |  5 ++
 packages/astro/src/core/render/dev/css.ts |  4 +-
 packages/astro/test/css-inline.test.js    | 61 +++++++++++++++++++----
 pnpm-lock.yaml                            |  8 ---
 4 files changed, 57 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/witty-taxis-accept.md

diff --git a/.changeset/witty-taxis-accept.md b/.changeset/witty-taxis-accept.md
new file mode 100644
index 0000000000..c9cd5ef6d9
--- /dev/null
+++ b/.changeset/witty-taxis-accept.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent `?inline` and `?raw` css query suffixes from injecting style tags in development
diff --git a/packages/astro/src/core/render/dev/css.ts b/packages/astro/src/core/render/dev/css.ts
index 7e9eebed2e..db33935d5e 100644
--- a/packages/astro/src/core/render/dev/css.ts
+++ b/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.
diff --git a/packages/astro/test/css-inline.test.js b/packages/astro/test/css-inline.test.js
index 01d3133b8b..03bee955b6 100644
--- a/packages/astro/test/css-inline.test.js
+++ b/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 () => {
-		const html = await fixture.readFile('/index.html');
-		const $ = cheerio.load(html);
+	describe('Dev', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
 
-		expect($('#inline').text()).to.contain('tomato');
-	});
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
 
-	it('?raw is imported as a string', async () => {
-		const html = await fixture.readFile('/index.html');
-		const $ = cheerio.load(html);
+		after(async () => {
+			await devServer.stop();
+		});
 
-		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);
+		});
 	});
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6fbaa05dc..25643eafdf 100644
--- a/pnpm-lock.yaml
+++ b/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:*