diff --git a/.changeset/quiet-grids-preload.md b/.changeset/quiet-grids-preload.md
new file mode 100644
index 000000000000..fc04f8f10d6f
--- /dev/null
+++ b/.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
diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts
index 66ceedc56823..51f7c72eca5c 100644
--- a/packages/astro/src/core/build/plugins/plugin-css.ts
+++ b/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);
+					}
+				}
+			}
 		},
 	};
 
diff --git a/packages/astro/test/css-dangling-references.test.ts b/packages/astro/test/css-dangling-references.test.ts
index 8035cfeb3b05..d62adbeaa3df 100644
--- a/packages/astro/test/css-dangling-references.test.ts
+++ b/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;
diff --git a/packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/Grid.svelte b/packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/Grid.svelte
new file mode 100644
index 000000000000..d2f3430a337b
--- /dev/null
+++ b/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>
diff --git a/packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/LazyModal.svelte b/packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/LazyModal.svelte
new file mode 100644
index 000000000000..09fdd9db6a19
--- /dev/null
+++ b/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>
diff --git a/packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/Opener.svelte b/packages/astro/test/fixtures/css-dangling-references/src/components/hydrated-island/Opener.svelte
new file mode 100644
index 000000000000..49c096944bc6
--- /dev/null
+++ b/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}
diff --git a/packages/astro/test/fixtures/css-dangling-references/src/pages/hydrated-island.astro b/packages/astro/test/fixtures/css-dangling-references/src/pages/hydrated-island.astro
new file mode 100644
index 000000000000..c2c31f026986
--- /dev/null
+++ b/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/>