From dfbca06dda674c64c7010db2f4de951496a1e631 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Mon, 22 Jul 2024 16:10:48 +0800
Subject: [PATCH] Exclude hoisted scripts and styles from raw imports (#11509)

---
 .changeset/clever-pillows-boil.md              |  5 +++++
 .../astro/src/vite-plugin-astro-server/vite.ts | 12 ++++++++++++
 packages/astro/test/astro-basic.test.js        | 18 ++++++++++++++++--
 .../src/pages/import-queries/_content.astro    |  2 ++
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/clever-pillows-boil.md

diff --git a/.changeset/clever-pillows-boil.md b/.changeset/clever-pillows-boil.md
new file mode 100644
index 000000000000..8a3532767553
--- /dev/null
+++ b/.changeset/clever-pillows-boil.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Excludes hoisted scripts and styles from Astro components imported with `?url` or `?raw`
diff --git a/packages/astro/src/vite-plugin-astro-server/vite.ts b/packages/astro/src/vite-plugin-astro-server/vite.ts
index 62bfa95d7673..eba9a81d1169 100644
--- a/packages/astro/src/vite-plugin-astro-server/vite.ts
+++ b/packages/astro/src/vite-plugin-astro-server/vite.ts
@@ -2,6 +2,7 @@ import npath from 'node:path';
 import { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from '../core/constants.js';
 import type { ModuleLoader, ModuleNode } from '../core/module-loader/index.js';
 import { unwrapId } from '../core/util.js';
+import { hasSpecialQueries } from '../vite-plugin-utils/index.js';
 import { isCSSRequest } from './util.js';
 
 /**
@@ -42,6 +43,10 @@ export async function* crawlGraph(
 		if (id === entry.id) {
 			scanned.add(id);
 
+			// NOTE: It may be worth revisiting if we can crawl direct imports of the module since
+			// `.importedModules` would also include modules that are dynamically watched, not imported.
+			// That way we no longer need the below `continue` skips.
+
 			// CSS requests `importedModules` are usually from `@import`, but we don't really need
 			// to crawl into those as the `@import` code are already inlined into this `id`.
 			// If CSS requests `importedModules` contain non-CSS files, e.g. Tailwind might add HMR
@@ -50,6 +55,13 @@ export async function* crawlGraph(
 			if (isCSSRequest(id)) {
 				continue;
 			}
+			// Some special Vite queries like `?url` or `?raw` are known to be a simple default export
+			// and doesn't have any imports to crawl. However, since they would `this.addWatchFile` the
+			// underlying module, our logic would crawl into them anyways which is incorrect as they
+			// don't take part in the final rendering, so we skip it here.
+			if (hasSpecialQueries(id)) {
+				continue;
+			}
 
 			for (const importedModule of entry.importedModules) {
 				if (!importedModule.id) continue;
diff --git a/packages/astro/test/astro-basic.test.js b/packages/astro/test/astro-basic.test.js
index 957be04fb6f2..2cfa5d27fe80 100644
--- a/packages/astro/test/astro-basic.test.js
+++ b/packages/astro/test/astro-basic.test.js
@@ -162,7 +162,14 @@ describe('Astro basic build', () => {
 	it('Handles importing .astro?raw correctly', async () => {
 		const html = await fixture.readFile('/import-queries/raw/index.html');
 		const $ = cheerio.load(html);
-		assert.equal($('.raw-value').text(), '<h1>Hello</h1>\n');
+		const rawValue = $('.raw-value').text();
+		assert.match(rawValue, /<h1>Hello<\/h1>/);
+		assert.match(rawValue, /<script>/);
+		assert.match(rawValue, /<style>/);
+		// The rest of HTML should not contain any scripts or styles hoisted from the raw import
+		const otherHtml = html.replace(rawValue, '');
+		assert.doesNotMatch(otherHtml, /<script/);
+		assert.doesNotMatch(otherHtml, /<style/);
 	});
 
 	describe('preview', () => {
@@ -223,6 +230,13 @@ describe('Astro basic development', () => {
 		assert.equal(res.status, 200);
 		const html = await res.text();
 		const $ = cheerio.load(html);
-		assert.equal($('.raw-value').text(), '<h1>Hello</h1>\n');
+		const rawValue = $('.raw-value').text();
+		assert.match(rawValue, /<h1>Hello<\/h1>/);
+		assert.match(rawValue, /<script>/);
+		assert.match(rawValue, /<style>/);
+		// The rest of HTML should not contain any scripts or styles hoisted from the raw import.
+		// However we don't check them here as dev plugins could add scripts and styles dynam
+		assert.doesNotMatch(html, /_content.astro\?astro&type=style/);
+		assert.doesNotMatch(html, /_content.astro\?astro&type=script/);
 	});
 });
diff --git a/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro b/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro
index 986a4a1a25bc..f7a749075034 100644
--- a/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro
+++ b/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro
@@ -1 +1,3 @@
 <h1>Hello</h1>
+<script>console.log('Should not log')</script>
+<style>h1 { color: red; }</style>