When removing duplicate CSS, also remove from metadata (#4643)

* When removing duplicate CSS, also remove from metadata

* Adding a changeset

.changeset/seven-zoos-lie.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Remove regression when there is duplicate client/server CSS

packages/astro/src/core/build/vite-plugin-css.ts

@@ -148,6 +148,7 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[]
 									if (Object.keys(c.modules).every((id) => internals.cssChunkModuleIds.has(id))) {
 										for (const importedCssImport of meta.importedCss) {
 											delete bundle[importedCssImport];
+											meta.importedCss.delete(importedCssImport);
 										}
 										return;
 									}

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

@@ -8,6 +8,7 @@ import { expect } from 'chai';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
+/** @type {import('./test-utils').Fixture} */
 let fixture;
 
 describe('CSS', function () {
@@ -360,6 +361,16 @@ describe('CSS', function () {
 			// SvelteDynamic styles is already included in the main page css asset
 			const unusedCssAsset = bundledAssets.find((asset) => /SvelteDynamic\..*\.css/.test(asset));
 			expect(unusedCssAsset, 'Found unused style ' + unusedCssAsset).to.be.undefined;
+
+			let foundVitePreloadCSS = false;
+			const bundledJS = await fixture.glob('**/*.?(m)js');
+			for(const filename of bundledJS) {
+				const content = await fixture.readFile(filename);
+				if(content.match(/ReactDynamic\..*\.css/)) {
+					foundVitePreloadCSS = filename;
+				}
+			}
+			expect(foundVitePreloadCSS).to.equal(false, 'Should not have found a preload for the dynamic CSS');
 		});
 	});
 });

packages/astro/test/fixtures/0-css/src/components/ReactDynamic.jsx

@@ -1,5 +1,13 @@
 import React from 'react';
 
+const ReactLazy = React.lazy(() => import('./ReactLazy'));
+
 export default function() {
-  return <div></div>;
-}
+	return (
+		<div>
+			<React.Suspense>
+				<ReactLazy />
+			</React.Suspense>
+		</div>
+	);
+}

packages/astro/test/fixtures/0-css/src/components/ReactLazy.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import mod from './ReactLazy.module.css';
+
+export default function() {
+  return <div className={mod.lazy}></div>;
+}

packages/astro/test/fixtures/0-css/src/components/ReactLazy.module.css

@@ -0,0 +1,3 @@
+.lazy {
+	background: yellow;
+}

packages/astro/test/test-utils.js

@@ -9,6 +9,7 @@ import preview from '../dist/core/preview/index.js';
 import { nodeLogDestination } from '../dist/core/logger/node.js';
 import os from 'os';
 import stripAnsi from 'strip-ansi';
+import fastGlob from 'fast-glob';
 
 // polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16
 polyfill(globalThis, {
@@ -30,6 +31,7 @@ polyfill(globalThis, {
  * @property {(path: string) => Promise<string>} readFile
  * @property {(path: string, updater: (content: string) => string) => Promise<void>} writeFile
  * @property {(path: string) => Promise<string[]>} readdir
+ * @property {(pattern: string) => Promise<string[]>} glob
  * @property {() => Promise<DevServer>} startDevServer
  * @property {() => Promise<PreviewServer>} preview
  * @property {() => Promise<void>} clean
@@ -147,6 +149,9 @@ export async function loadFixture(inlineConfig) {
 		readFile: (filePath) =>
 			fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
 		readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
+		glob: (p) => fastGlob(p, {
+			cwd: fileURLToPath(config.outDir)
+		}),
 		clean: async () => {
 			await fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true });
 		},