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('
- Vue CSS Modules
+ Vue CSS Modules