From 8329d17968ada1ac966121da607e3351af924af9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Tue, 10 Sep 2024 12:11:57 +0900
Subject: [PATCH 1/2] fix(css): fix inline query injection for CSS inlining
 (#11917)

---
 .../astro/src/vite-plugin-astro-server/css.ts | 19 ++++++++++---------
 packages/astro/test/0-css.test.js             |  9 ++-------
 .../0-css/src/components/VueModules.vue       |  4 ++--
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/astro/src/vite-plugin-astro-server/css.ts b/packages/astro/src/vite-plugin-astro-server/css.ts
index c2dd5f6d7a6b..9a4133f3d1bf 100644
--- a/packages/astro/src/vite-plugin-astro-server/css.ts
+++ b/packages/astro/src/vite-plugin-astro-server/css.ts
@@ -9,6 +9,8 @@ interface ImportedStyle {
 	content: string;
 }
 
+const inlineQueryRE = /(?:\?|&)inline(?:$|&)/
+
 /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */
 export async function getStylesForURL(
 	filePath: URL,
@@ -32,21 +34,20 @@ export async function getStylesForURL(
 			}
 			// Else try to load it
 			else {
-				const url = new URL(importedModule.url, 'http://localhost');
+				let modId = importedModule.url
 				// Mark url with ?inline so Vite will return the CSS as plain string, even for CSS modules
-				url.searchParams.set('inline', '');
-				const modId = `${decodeURI(url.pathname)}${url.search}`;
-
+				if (!inlineQueryRE.test(importedModule.url)) {
+					if (importedModule.url.includes('?')) {
+						modId = importedModule.url.replace('?', '?inline&');
+					} else {
+						modId += '?inline';
+					}
+				}
 				try {
 					// The SSR module is possibly not loaded. Load it if it's null.
 					const ssrModule = await loader.import(modId);
 					css = ssrModule.default;
 				} catch {
-					// Some CSS modules, e.g. from Vue files, may not work with the ?inline query.
-					// If so, we fallback to a url instead
-					if (modId.includes('.module.')) {
-						importedCssUrls.add(importedModule.url);
-					}
 					// The module may not be inline-able, e.g. SCSS partials. Skip it as it may already
 					// be inlined into other modules if it happens to be in the graph.
 					continue;
diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js
index 6c2ee0966cdc..a582f9e7196d 100644
--- a/packages/astro/test/0-css.test.js
+++ b/packages/astro/test/0-css.test.js
@@ -225,7 +225,7 @@ describe('CSS', function () {
 			it('<style module>', async () => {
 				const el = $('#vue-modules');
 				const classes = el.attr('class').split(' ');
-				const moduleClass = classes.find((name) => /^_title_[\w-]+/.test(name));
+				const moduleClass = classes.find((name) => /^_vueModules_[\w-]+/.test(name));
 
 				// 1. check HTML
 				assert.equal(el.attr('class').includes(moduleClass), true);
@@ -405,18 +405,13 @@ describe('CSS', function () {
 		});
 
 		it('resolves CSS from Vue', async () => {
-			const styles = ['VueModules.vue?vue&type=style&index=0&lang.module.scss'];
-			for (const style of styles) {
-				const href = $(`link[href$="${style}"]`).attr('href');
-				assert.equal((await fixture.fetch(href)).status, 200, style);
-			}
-
 			const allInjectedStyles = $('style').text().replace(/\s*/g, '');
 
 			assert.equal(allInjectedStyles.includes('.vue-css{'), true);
 			assert.equal(allInjectedStyles.includes('.vue-sass{'), true);
 			assert.equal(allInjectedStyles.includes('.vue-scss{'), true);
 			assert.equal(allInjectedStyles.includes('.vue-scoped[data-v-'), true);
+			assert.equal(allInjectedStyles.includes('._vueModules_'), true);
 		});
 
 		it('remove unused styles from client:load components', async () => {
diff --git a/packages/astro/test/fixtures/0-css/src/components/VueModules.vue b/packages/astro/test/fixtures/0-css/src/components/VueModules.vue
index 3fa687fba7f4..579ac311f0d2 100644
--- a/packages/astro/test/fixtures/0-css/src/components/VueModules.vue
+++ b/packages/astro/test/fixtures/0-css/src/components/VueModules.vue
@@ -1,10 +1,10 @@
 <style module lang="scss">
 $type: cursive;
-.title {
+.vueModules {
   font-family: $type;
 }
 </style>
 
 <template>
-  <h1 id="vue-modules" :class="$style.title">Vue CSS Modules</h1>
+  <h1 id="vue-modules" :class="$style.vueModules">Vue CSS Modules</h1>
 </template>

From 1c64ae304d3c008a776e98e48fd3ece8be7b1fb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <bluwy@users.noreply.github.com>
Date: Tue, 10 Sep 2024 03:12:50 +0000
Subject: [PATCH 2/2] [ci] format

---
 packages/astro/src/vite-plugin-astro-server/css.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/astro/src/vite-plugin-astro-server/css.ts b/packages/astro/src/vite-plugin-astro-server/css.ts
index 9a4133f3d1bf..af147048a0b9 100644
--- a/packages/astro/src/vite-plugin-astro-server/css.ts
+++ b/packages/astro/src/vite-plugin-astro-server/css.ts
@@ -9,7 +9,7 @@ interface ImportedStyle {
 	content: string;
 }
 
-const inlineQueryRE = /(?:\?|&)inline(?:$|&)/
+const inlineQueryRE = /(?:\?|&)inline(?:$|&)/;
 
 /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */
 export async function getStylesForURL(
@@ -34,7 +34,7 @@ export async function getStylesForURL(
 			}
 			// Else try to load it
 			else {
-				let modId = importedModule.url
+				let modId = importedModule.url;
 				// Mark url with ?inline so Vite will return the CSS as plain string, even for CSS modules
 				if (!inlineQueryRE.test(importedModule.url)) {
 					if (importedModule.url.includes('?')) {