Remove deleted client CSS assets from chunk importedCss to prevent 404 preloads

.changeset/quiet-grids-preload.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a 404 for a CSS file that a dynamic import preloads when the imported module uses a component that is also a hydrated island on the same page

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

@@ -385,6 +385,18 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 					}
 				}
 			}
+
+			// Vite builds the preload list of dynamic imports from `importedCss`, so a
+			// deleted asset left there is requested at runtime and 404s.
+			// https://github.com/withastro/astro/issues/18191
+			for (const cssId of deletedCssAssets.keys()) {
+				if (bundle[cssId]) continue;
+				for (const chunk of Object.values(bundle)) {
+					if (chunk.type === 'chunk') {
+						chunk.viteMetadata?.importedCss?.delete(cssId);
+					}
+				}
+			}
 		},
 	};
 

packages/astro/test/css-dangling-references.test.ts

@@ -2,7 +2,7 @@ import * as assert from 'node:assert/strict';
 import { before, describe, it } from 'node:test';
 import { loadFixture, type Fixture } from './test-utils.ts';
 
-const cssAssetReferenceRegExp = /_astro\/[A-Za-z\d\-]+\.[\da-f]{8}\.css/g;
+const cssAssetReferenceRegExp = /_astro\/[\w-]+\.[\w-]{8}\.css/g;
 
 describe("When Vite's preloadModule polyfill is used", async () => {
 	let fixture: Fixture;

packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/Grid.svelte

@@ -0,0 +1,7 @@
+<style>
+  div {
+    display: grid;
+    color: red;
+  }
+</style>
+<div>Grid</div>

packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/LazyModal.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Grid from './Grid.svelte';
+</script>
+
+<dialog open><Grid /></dialog>

packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/Opener.svelte

@@ -0,0 +1,9 @@
+<script>
+  let Modal = $state(null);
+  async function open() {
+    Modal = (await import('./LazyModal.svelte')).default;
+  }
+</script>
+
+<button onclick={open}>Open modal</button>
+{#if Modal}<Modal />{/if}

packages/astro/test/fixtures/css-dangling-references/src/pages/hydrated-island.astro

@@ -0,0 +1,6 @@
+---
+import Grid from "../components/hydrated-island/Grid.svelte"
+import Opener from "../components/hydrated-island/Opener.svelte"
+---
+<Grid client:load/>
+<Opener client:load/>