Fix duplicated CSS modules inlining (#9531)

* Fix duplicated CSS modules inlining

* Remove unused mode param

Author: bluwy

.changeset/blue-ladybugs-march.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes duplicated CSS modules content when it's imported by both Astro files and framework components

packages/astro/src/content/vite-plugin-content-assets.ts

@@ -64,11 +64,7 @@ export function astroContentAssetPropagationPlugin({
 					if (!devModuleLoader.getModuleById(basePath)?.ssrModule) {
 						await devModuleLoader.import(basePath);
 					}
-					const { styles, urls } = await getStylesForURL(
-						pathToFileURL(basePath),
-						devModuleLoader,
-						'development'
-					);
+					const { styles, urls } = await getStylesForURL(pathToFileURL(basePath), devModuleLoader);
 
 					const hoistedScripts = await getScriptsForURL(
 						pathToFileURL(basePath),

packages/astro/src/vite-plugin-astro-server/css.ts

@@ -1,4 +1,3 @@
-import type { RuntimeMode } from '../@types/astro.js';
 import type { ModuleLoader } from '../core/module-loader/index.js';
 import { viteID } from '../core/util.js';
 import { isBuildableCSSRequest } from './util.js';
@@ -13,37 +12,48 @@ interface ImportedStyle {
 /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */
 export async function getStylesForURL(
 	filePath: URL,
-	loader: ModuleLoader,
-	mode: RuntimeMode
+	loader: ModuleLoader
 ): Promise<{ urls: Set<string>; styles: ImportedStyle[] }> {
 	const importedCssUrls = new Set<string>();
 	// Map of url to injected style object. Use a `url` key to deduplicate styles
 	const importedStylesMap = new Map<string, ImportedStyle>();
 
 	for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) {
 		if (isBuildableCSSRequest(importedModule.url)) {
-			let ssrModule: Record<string, any>;
-			try {
-				// The SSR module is possibly not loaded. Load it if it's null.
-				ssrModule = importedModule.ssrModule ?? (await loader.import(importedModule.url));
-			} catch {
-				// 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;
+			// In dev, we inline all styles if possible
+			let css = '';
+			// If this is a plain CSS module, the default export should be a string
+			if (typeof importedModule.ssrModule?.default === 'string') {
+				css = importedModule.ssrModule.default;
 			}
-			if (
-				mode === 'development' && // only inline in development
-				typeof ssrModule?.default === 'string' // ignore JS module styles
-			) {
-				importedStylesMap.set(importedModule.url, {
-					id: importedModule.id ?? importedModule.url,
-					url: importedModule.url,
-					content: ssrModule.default,
-				});
-			} else {
-				// NOTE: We use the `url` property here. `id` would break Windows.
-				importedCssUrls.add(importedModule.url);
+			// Else try to load it
+			else {
+				const url = new URL(importedModule.url, 'http://localhost');
+				// 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}`;
+
+				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;
+				}
 			}
+
+			importedStylesMap.set(importedModule.url, {
+				id: importedModule.id ?? importedModule.url,
+				url: importedModule.url,
+				content: css,
+			});
 		}
 	}
 

packages/astro/src/vite-plugin-astro-server/route.ts

@@ -436,11 +436,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
 	}
 
 	// Pass framework CSS in as style tags to be appended to the page.
-	const { urls: styleUrls, styles: importedStyles } = await getStylesForURL(
-		filePath,
-		moduleLoader,
-		mode
-	);
+	const { urls: styleUrls, styles: importedStyles } = await getStylesForURL(filePath, moduleLoader);
 	let links = new Set<SSRElement>();
 	[...styleUrls].forEach((href) => {
 		links.add({

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

@@ -367,7 +367,7 @@ describe('CSS', function () {
 				'ReactModules.module.sass',
 			];
 			for (const style of styles) {
-				const href = $(`link[href$="${style}"]`).attr('href');
+				const href = $(`style[data-vite-dev-id$="${style}"]`).attr('data-vite-dev-id');
 				expect((await fixture.fetch(href)).status, style).to.equal(200);
 			}
 
@@ -423,7 +423,7 @@ describe('CSS', function () {
 
 		it('.module.css ordering', () => {
 			const globalStyleTag = $('style[data-vite-dev-id$="default.css"]');
-			const moduleStyleTag = $('link[href$="ModuleOrdering.module.css"]');
+			const moduleStyleTag = $('style[data-vite-dev-id$="ModuleOrdering.module.css"]');
 			const globalStyleClassIndex = globalStyleTag.index();
 			const moduleStyleClassIndex = moduleStyleTag.index();
 			// css module has higher priority than global style

packages/astro/test/units/dev/styles.test.js

@@ -15,6 +15,17 @@ class TestLoader {
 	getModulesByFile(id) {
 		return this.modules.has(id) ? [this.modules.get(id)] : [];
 	}
+	import(id) {
+		// try to normalize inline CSS requests so we can map to the existing modules value
+		id = id.replace(/(\?|&)inline=?(&|$)/, (_, start, end) => (end ? start : '')).replace(/=$/, '');
+		for (const mod of this.modules.values()) {
+			for (const importedMod of mod.importedModules) {
+				if (importedMod.id === id) {
+					return importedMod.ssrModule;
+				}
+			}
+		}
+	}
 }
 
 describe('Crawling graph for CSS', () => {
@@ -35,7 +46,7 @@ describe('Crawling graph for CSS', () => {
 						id: indexId + '?astro&style.css',
 						url: indexId + '?astro&style.css',
 						importers: new Set([{ id: indexId }]),
-						ssrModule: {},
+						ssrModule: { default: '.index {}' },
 					},
 				],
 				importers: new Set(),
@@ -50,7 +61,7 @@ describe('Crawling graph for CSS', () => {
 						id: aboutId + '?astro&style.css',
 						url: aboutId + '?astro&style.css',
 						importers: new Set([{ id: aboutId }]),
-						ssrModule: {},
+						ssrModule: { default: '.about {}' },
 					},
 				],
 				importers: new Set(),
@@ -64,11 +75,7 @@ describe('Crawling graph for CSS', () => {
 	it("importedModules is checked against the child's importers", async () => {
 		// In dev mode, HMR modules tracked are added to importedModules. We use `importers`
 		// to verify that they are true importers.
-		const res = await getStylesForURL(
-			new URL('./src/pages/index.astro', root),
-			loader,
-			'development'
-		);
-		expect(res.urls.size).to.equal(1);
+		const res = await getStylesForURL(new URL('./src/pages/index.astro', root), loader);
+		expect(res.styles.length).to.equal(1);
 	});
 });