diff --git a/packages/react/src/plugin-islands.ts b/packages/react/src/plugin-islands.ts
index cacb8db78..c7bcce16c 100644
--- a/packages/react/src/plugin-islands.ts
+++ b/packages/react/src/plugin-islands.ts
@@ -5,7 +5,10 @@ import { generateComponentManifest, scanPages, resolveEffectiveLayoutChain } fro
 import type { PageScanResult } from 'void/pages';
 import {
   resolveSpecifier,
-  needsIslandClientBundle,
+  hasIslandPages,
+  recordIslandStyles,
+  recordedIslandStyles,
+  islandStylesPlugin,
   computePagesNeedingClientJS,
   watchPagesForRescan,
   rewriteCssImportForVirtualModule,
@@ -121,6 +124,10 @@ export function islandsPlugin(
         }
       },
 
+      buildEnd() {
+        recordIslandStyles(this, pageScan, pagesDir);
+      },
+
       resolveId: {
         filter: { id: /^virtual:void-islands-(renderer|client)$/ },
         handler(source) {
@@ -151,7 +158,14 @@ export function islandsPlugin(
             if (!pageScan) {
               return '';
             }
-            return generateIslandClientEntry(islandManifest, islandCssFiles, isDev);
+            return generateIslandClientEntry(
+              islandManifest,
+              islandCssFiles,
+              recordedIslandStyles(pagesDir),
+              islandManifest.size > 0 ||
+                computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0,
+              isDev,
+            );
           }
         },
       },
@@ -211,26 +225,24 @@ export function islandsPlugin(
         },
       },
 
-      config(_, env) {
-        if (!existsSync(pagesDir)) {
-          return;
-        }
-        // Only add the islands client entry when content needs it
-        if (
-          env.command !== 'serve' &&
-          needsIslandClientBundle(pagesDir, /\.island\.(tsx|jsx)$/, false)
-        ) {
+      async config(_, env) {
+        if (env.command !== 'serve' && (await hasIslandPages(root, pagesDir))) {
           return {
-            build: {
-              manifest: true,
-              rollupOptions: {
-                input: { 'islands-client': ISLANDS_CLIENT_ENTRY_ID },
+            environments: {
+              client: {
+                build: {
+                  manifest: true,
+                  rollupOptions: {
+                    input: { 'islands-client': ISLANDS_CLIENT_ENTRY_ID },
+                  },
+                },
               },
             },
           };
         }
       },
     },
+    islandStylesPlugin(pagesDir),
   ];
 }
 
@@ -319,6 +331,8 @@ export async function renderIslandPage(pageObj, assetTags) {
 function generateIslandClientEntry(
   manifest: Map<string, IslandEntry>,
   cssFiles: Set<string>,
+  styles: ReadonlyArray<string> | null,
+  needsRuntime: boolean,
   isDev: boolean,
 ): string {
   const entries = [...manifest.values()];
@@ -329,13 +343,16 @@ function generateIslandClientEntry(
 
   const lines: Array<string> = [];
 
-  lines.push('import { initIslands } from "void/pages-client";');
-
   // In dev, first-paint CSS is provided by Void's shared dev CSS collector.
   // Skip CSS imports here to avoid duplicate client injection.
-  // In production, the <link> tags aren't used — the imports below ensure
-  // the CSS is included in the bundled output.
-  if (!isDev) {
+  // In production, the imports below bundle the CSS that island pages link.
+  // `styles` comes from the server build; without one, only the direct
+  // imports of the pages and layouts are known.
+  if (!isDev && styles) {
+    for (const id of styles) {
+      lines.push(`import ${JSON.stringify(id)};`);
+    }
+  } else if (!isDev) {
     for (const file of cssFiles) {
       const content = readFileSync(file, 'utf-8');
       for (const item of findStaticCssImports(content, file)) {
@@ -344,6 +361,15 @@ function generateIslandClientEntry(
     }
   }
 
+  // Without islands, no built page gets this script (see
+  // computePagesNeedingClientJS), so the entry only gives the styles a chunk to
+  // link. Dev keeps the runtime: it does not reload this module when a page
+  // gains an island.
+  if (!needsRuntime && !isDev) {
+    return lines.join('\n');
+  }
+
+  lines.push('import { initIslands } from "void/pages-client";');
   lines.push('const islands = {');
   for (const [id, path] of uniqueIslands) {
     lines.push(`  ${JSON.stringify(id)}: () => import(${JSON.stringify(path)}),`);
diff --git a/packages/react/test/integration/island-css-build.test.ts b/packages/react/test/integration/island-css-build.test.ts
new file mode 100644
index 000000000..97149f117
--- /dev/null
+++ b/packages/react/test/integration/island-css-build.test.ts
@@ -0,0 +1,81 @@
+import { join } from 'node:path';
+import { expect, it } from 'vite-plus/test';
+import { buildIslandApp, defineIslandCssBuildTest } from '../../../../test/island-css-build.ts';
+
+const packageDir = join(import.meta.dirname, '../..');
+const tsconfig = JSON.stringify({ compilerOptions: { jsx: 'react-jsx' } });
+
+defineIslandCssBuildTest({
+  packageDir,
+  pluginName: 'voidReact',
+  files: {
+    'tsconfig.json': tsconfig,
+    'src/shell.css': '.shell { outline-offset: 7px; }',
+    'src/card.module.css': '.card { text-indent: 9px; }',
+    'src/badge.css': '.badge { word-spacing: 5px; }',
+    'src/Badge.tsx': `import './badge.css';
+export default function Badge() { return <b className="badge">Badge</b>; }`,
+    'src/Shell.tsx': `import './shell.css';
+import styles from './card.module.css';
+import Badge from './Badge';
+export default function Shell({ children }) {
+  return <main className={'shell ' + styles.card}><Badge />{children}</main>;
+}`,
+    'pages/layout.tsx': `import Shell from '../src/Shell';
+export default function Layout({ children }) { return <Shell>{children}</Shell>; }`,
+    'pages/index.island.tsx': 'export default function Home() { return <h1>Home</h1>; }',
+    // The layout renders Badge without hydrating it; this page hydrates it.
+    'pages/badge.island.tsx': `import Badge from '../src/Badge' with { island: 'load' };
+export default function BadgePage() { return <Badge />; }`,
+  },
+  expectedCss: ['.shell{outline-offset:7px}', '{text-indent:9px}', '.badge{word-spacing:5px}'],
+});
+
+it('builds island pages without CSS or JavaScript with no stylesheet, script or client runtime', () => {
+  const build = buildIslandApp({
+    packageDir,
+    pluginName: 'voidReact',
+    files: {
+      'tsconfig.json': tsconfig,
+      'pages/layout.tsx':
+        'export default function Layout({ children }) { return <main>{children}</main>; }',
+      'pages/index.island.tsx': 'export default function Home() { return <h1>Home</h1>; }',
+    },
+  });
+  try {
+    for (const file of ['index.html', 'about.html']) {
+      const { html } = build.page(file);
+      expect(html, file).toContain('</main>');
+      expect(html, file).not.toContain('<link');
+      expect(html, file).not.toContain('<script');
+    }
+    // No page loads the islands entry, so it carries no hydration code.
+    for (const [file, text] of build.output('client')) {
+      expect(text.includes('hydrateRoot'), file).toBe(false);
+    }
+  } finally {
+    build.cleanup();
+  }
+}, 120_000);
+
+it('keeps the islands client entry out of the server build', () => {
+  const build = buildIslandApp({
+    packageDir,
+    pluginName: 'voidReact',
+    files: {
+      'tsconfig.json': tsconfig,
+      'src/Counter.tsx': 'export default function Counter() { return <button>0</button>; }',
+      'pages/index.island.tsx': `import Counter from '../src/Counter' with { island: 'load' };
+export default function Home() { return <Counter />; }`,
+    },
+  });
+  try {
+    expect(build.page('index.html').html).toContain('<script');
+    for (const [file, text] of build.output('ssr')) {
+      expect(file).not.toContain('islands-client');
+      expect(text.includes('hydrateRoot'), file).toBe(false);
+    }
+  } finally {
+    build.cleanup();
+  }
+}, 120_000);
diff --git a/packages/solid/src/plugin-islands.ts b/packages/solid/src/plugin-islands.ts
index 4147f4e41..69093ccdd 100644
--- a/packages/solid/src/plugin-islands.ts
+++ b/packages/solid/src/plugin-islands.ts
@@ -5,7 +5,10 @@ import { generateComponentManifest, scanPages, resolveEffectiveLayoutChain } fro
 import type { PageScanResult } from 'void/pages';
 import {
   resolveSpecifier,
-  needsIslandClientBundle,
+  hasIslandPages,
+  recordIslandStyles,
+  recordedIslandStyles,
+  islandStylesPlugin,
   rewriteCssImportForVirtualModule,
   computePagesNeedingClientJS,
   watchPagesForRescan,
@@ -135,6 +138,10 @@ export function islandsPlugin(
         }
       },
 
+      buildEnd() {
+        recordIslandStyles(this, pageScan, pagesDir);
+      },
+
       resolveId: {
         filter: {
           id: /^(virtual:void-islands-(renderer|client)|\/@void-island-wrap\/)/,
@@ -172,7 +179,14 @@ export function islandsPlugin(
             if (!pageScan) {
               return '';
             }
-            return generateIslandClientEntry(islandManifest, islandCssFiles, isDev);
+            return generateIslandClientEntry(
+              islandManifest,
+              islandCssFiles,
+              recordedIslandStyles(pagesDir),
+              islandManifest.size > 0 ||
+                computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0,
+              isDev,
+            );
           }
           if (id.startsWith(WRAPPER_PREFIX)) {
             const meta = wrapperMeta.get(id);
@@ -214,25 +228,24 @@ export function islandsPlugin(
         },
       },
 
-      config(_, env) {
-        if (!existsSync(pagesDir)) {
-          return;
-        }
-        if (
-          env.command !== 'serve' &&
-          needsIslandClientBundle(pagesDir, /\.island\.(tsx|jsx)$/, false)
-        ) {
+      async config(_, env) {
+        if (env.command !== 'serve' && (await hasIslandPages(root, pagesDir))) {
           return {
-            build: {
-              manifest: true,
-              rollupOptions: {
-                input: { 'islands-client': ISLANDS_CLIENT_ENTRY_ID },
+            environments: {
+              client: {
+                build: {
+                  manifest: true,
+                  rollupOptions: {
+                    input: { 'islands-client': ISLANDS_CLIENT_ENTRY_ID },
+                  },
+                },
               },
             },
           };
         }
       },
     },
+    islandStylesPlugin(pagesDir),
   ];
 }
 
@@ -337,6 +350,8 @@ export async function renderIslandPage(pageObj, assetTags) {
 function generateIslandClientEntry(
   manifest: Map<string, IslandEntry>,
   cssFiles: Set<string>,
+  styles: ReadonlyArray<string> | null,
+  needsRuntime: boolean,
   isDev: boolean,
 ): string {
   const entries = [...manifest.values()];
@@ -346,13 +361,17 @@ function generateIslandClientEntry(
   }
 
   const lines: Array<string> = [];
-  lines.push('import { initIslands } from "void/pages-client";');
 
   // In dev, first-paint CSS is provided by Void's shared dev CSS collector.
   // Skip CSS imports here to avoid duplicate client injection.
-  // In production, the <link> tags aren't used — the imports below ensure
-  // the CSS is included in the bundled output.
-  if (!isDev) {
+  // In production, the imports below bundle the CSS that island pages link.
+  // `styles` comes from the server build; without one, only the direct
+  // imports of the pages and layouts are known.
+  if (!isDev && styles) {
+    for (const id of styles) {
+      lines.push(`import ${JSON.stringify(id)};`);
+    }
+  } else if (!isDev) {
     for (const file of cssFiles) {
       const content = readFileSync(file, 'utf-8');
       for (const item of findStaticCssImports(content, file)) {
@@ -361,6 +380,15 @@ function generateIslandClientEntry(
     }
   }
 
+  // Without islands, no built page gets this script (see
+  // computePagesNeedingClientJS), so the entry only gives the styles a chunk to
+  // link. Dev keeps the runtime: it does not reload this module when a page
+  // gains an island.
+  if (!needsRuntime && !isDev) {
+    return lines.join('\n');
+  }
+
+  lines.push('import { initIslands } from "void/pages-client";');
   lines.push('const islands = {');
   for (const [id, path] of uniqueIslands) {
     lines.push(`  ${JSON.stringify(id)}: () => import(${JSON.stringify(path)}),`);
diff --git a/packages/solid/test/integration/island-css-build.test.ts b/packages/solid/test/integration/island-css-build.test.ts
new file mode 100644
index 000000000..0df086474
--- /dev/null
+++ b/packages/solid/test/integration/island-css-build.test.ts
@@ -0,0 +1,30 @@
+import { join } from 'node:path';
+import { defineIslandCssBuildTest } from '../../../../test/island-css-build.ts';
+
+defineIslandCssBuildTest({
+  packageDir: join(import.meta.dirname, '../..'),
+  pluginName: 'voidSolid',
+  files: {
+    'tsconfig.json': JSON.stringify({
+      compilerOptions: { jsx: 'preserve', jsxImportSource: 'solid-js' },
+    }),
+    'src/shell.css': '.shell { outline-offset: 7px; }',
+    'src/card.module.css': '.card { text-indent: 9px; }',
+    'src/badge.css': '.badge { word-spacing: 5px; }',
+    'src/Badge.tsx': `import './badge.css';
+export default function Badge() { return <b class="badge">Badge</b>; }`,
+    'src/Shell.tsx': `import './shell.css';
+import styles from './card.module.css';
+import Badge from './Badge';
+export default function Shell(props) {
+  return <main class={'shell ' + styles.card}><Badge />{props.children}</main>;
+}`,
+    'pages/layout.tsx': `import Shell from '../src/Shell';
+export default function Layout(props) { return <Shell>{props.children}</Shell>; }`,
+    'pages/index.island.tsx': 'export default function Home() { return <h1>Home</h1>; }',
+    // The layout renders Badge without hydrating it; this page hydrates it.
+    'pages/badge.island.tsx': `import Badge from '../src/Badge' with { island: 'load' };
+export default function BadgePage() { return <Badge />; }`,
+  },
+  expectedCss: ['.shell{outline-offset:7px}', '{text-indent:9px}', '.badge{word-spacing:5px}'],
+});
diff --git a/packages/svelte/src/plugin-islands.ts b/packages/svelte/src/plugin-islands.ts
index 215609919..af30c975f 100644
--- a/packages/svelte/src/plugin-islands.ts
+++ b/packages/svelte/src/plugin-islands.ts
@@ -6,7 +6,10 @@ import { generateComponentManifest, scanPages, resolveEffectiveLayoutChain } fro
 import type { PageScanResult } from 'void/pages';
 import {
   resolveSpecifier,
-  needsIslandClientBundle,
+  hasIslandPages,
+  recordIslandStyles,
+  recordedIslandStyles,
+  islandStylesPlugin,
   rewriteCssImportForVirtualModule,
   computePagesNeedingClientJS,
   watchPagesForRescan,
@@ -138,6 +141,10 @@ export function islandsPlugin(
         }
       },
 
+      buildEnd() {
+        recordIslandStyles(this, pageScan, pagesDir);
+      },
+
       resolveId: {
         filter: {
           id: /^(virtual:void-islands-(renderer|client)|\/@void-island-wrap\/)/,
@@ -177,7 +184,14 @@ export function islandsPlugin(
             if (!pageScan) {
               return '';
             }
-            return generateIslandClientEntry(islandManifest, islandCssFiles, isDev);
+            return generateIslandClientEntry(
+              islandManifest,
+              islandCssFiles,
+              recordedIslandStyles(pagesDir),
+              islandManifest.size > 0 ||
+                computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0,
+              isDev,
+            );
           }
           if (id.startsWith(WRAPPER_PREFIX)) {
             return generateWrapperComponent(id);
@@ -227,14 +241,14 @@ export function islandsPlugin(
         },
       },
 
-      config(_, env) {
+      async config(_, env) {
         if (!existsSync(pagesDir)) {
           return;
         }
         if (env.command === 'serve') {
           return { optimizeDeps: { include: ['svelte'] } };
         }
-        if (needsIslandClientBundle(pagesDir, /\.island\.svelte$/, true)) {
+        if (await hasIslandPages(root, pagesDir)) {
           return {
             environments: {
               client: {
@@ -252,18 +266,21 @@ export function islandsPlugin(
     },
     {
       name: 'void-svelte:islands-style',
-      // Only the build's client entry imports `<file>.svelte.css?island-style`
-      // (dev CSS comes from Void's dev CSS collector).
-      // - The id stays next to the component, so CSS url() resolves as in the
-      //   component, and it misses vite-plugin-svelte's `.svelte?` filter.
+      // Loads the component styles that the build's client entry imports (dev
+      // CSS comes from Void's dev CSS collector): vite-plugin-svelte's
+      // `<file>.svelte?svelte&type=style` ids that the server build recorded,
+      // or `<file>.svelte.css?island-style` without a server build.
       // - The CSS comes from vite-plugin-svelte's own preprocess options and
       //   compile, so the scope hashes match the SSR markup.
       // - The component is compiled here, not loaded with `this.load`: island
-      //   pages and layouts render only on the server, and loading them would
-      //   resolve their server-only imports in the client build.
-      // - vite-plugin-svelte's `?svelte&type=style` id is not used: it only
-      //   reads CSS already cached on the module, and its cssScopeTo drops the
-      //   CSS when the component is not imported by the client build.
+      //   pages, their layouts and the components they import render only on
+      //   the server, and loading them would resolve their server-only imports
+      //   in the client build.
+      // - vite-plugin-svelte's own load only reads CSS already cached on the
+      //   compiled component, and its cssScopeTo drops the CSS when the client
+      //   build does not import the component. Loading its id here keeps one
+      //   module, so a component that the client build also imports does not
+      //   bring the same rules twice.
       apply: 'build',
 
       resolveId: {
@@ -274,9 +291,20 @@ export function islandsPlugin(
       },
 
       load: {
-        filter: { id: /\.svelte\.css\?island-style$/ },
+        filter: { id: [/\.svelte\.css\?island-style$/, /\.svelte\?svelte&type=style/] },
+        order: 'pre',
         async handler(id) {
-          const file = id.slice(0, -'.css?island-style'.length);
+          const islandStyle = id.endsWith('.css?island-style');
+          if (
+            !islandStyle &&
+            (this.environment.config.consumer !== 'client' ||
+              !recordedIslandStyles(pagesDir)?.includes(id))
+          ) {
+            return;
+          }
+          const file = islandStyle
+            ? id.slice(0, -'.css?island-style'.length)
+            : id.slice(0, id.indexOf('?'));
           const api = resolvedConfig?.plugins.find(
             (plugin): plugin is SvelteConfigPlugin => plugin.name === 'vite-plugin-svelte:config',
           )?.api;
@@ -309,6 +337,7 @@ export function islandsPlugin(
         },
       },
     },
+    islandStylesPlugin(pagesDir),
   ];
 }
 
@@ -398,6 +427,8 @@ export async function renderIslandPage(pageObj, assetTags) {
 function generateIslandClientEntry(
   manifest: Map<string, IslandEntry>,
   cssFiles: Set<string>,
+  styles: ReadonlyArray<string> | null,
+  needsRuntime: boolean,
   isDev: boolean,
 ): string {
   const entries = [...manifest.values()];
@@ -408,13 +439,16 @@ function generateIslandClientEntry(
 
   const lines: Array<string> = [];
 
-  lines.push('import { initIslands } from "void/pages-client";');
-
   // In dev, first-paint CSS is provided by Void's shared dev CSS collector.
   // Skip CSS imports here to avoid duplicate client injection.
-  // In production, the <link> tags aren't used — the imports below ensure
-  // the CSS is included in the bundled output.
-  if (!isDev) {
+  // In production, the imports below bundle the CSS that island pages link.
+  // `styles` comes from the server build; without one, only the direct
+  // imports and style blocks of the pages and layouts are known.
+  if (!isDev && styles) {
+    for (const id of styles) {
+      lines.push(`import ${JSON.stringify(id)};`);
+    }
+  } else if (!isDev) {
     for (const file of cssFiles) {
       const content = readFileSync(file, 'utf-8');
 
@@ -429,6 +463,15 @@ function generateIslandClientEntry(
     }
   }
 
+  // Without islands, no built page gets this script (see
+  // computePagesNeedingClientJS), so the entry only gives the styles a chunk to
+  // link. Dev keeps the runtime: it does not reload this module when a page
+  // gains an island.
+  if (!needsRuntime && !isDev) {
+    return lines.join('\n');
+  }
+
+  lines.push('import { initIslands } from "void/pages-client";');
   lines.push('const islands = {');
   for (const [id, path] of uniqueIslands) {
     lines.push(`  ${JSON.stringify(id)}: () => import(${JSON.stringify(path)}),`);
diff --git a/packages/svelte/test/integration/island-css-build.test.ts b/packages/svelte/test/integration/island-css-build.test.ts
new file mode 100644
index 000000000..aafd2458b
--- /dev/null
+++ b/packages/svelte/test/integration/island-css-build.test.ts
@@ -0,0 +1,64 @@
+import { join } from 'node:path';
+import { expect, it } from 'vite-plus/test';
+import {
+  buildIslandApp,
+  countOf,
+  defineIslandCssBuildTest,
+} from '../../../../test/island-css-build.ts';
+
+const packageDir = join(import.meta.dirname, '../..');
+const files = {
+  'src/shell.css': '.shell { outline-offset: 7px; }',
+  'src/card.module.css': '.card { text-indent: 9px; }',
+  'src/Badge.svelte': '<b class="badge">Badge</b>\n<style>.badge { word-spacing: 5px; }</style>',
+  'src/Shell.svelte': `<script>
+  import './shell.css';
+  import styles from './card.module.css';
+  import Badge from './Badge.svelte';
+  let { children } = $props();
+</script>
+<main class="shell {styles.card}"><Badge />{@render children()}</main>
+<style>main { outline-width: 9px; }</style>`,
+  'pages/layout.svelte': `<script>
+  import Shell from '../src/Shell.svelte';
+  let { children } = $props();
+</script>
+<Shell>{@render children()}</Shell>`,
+  'pages/index.island.svelte': '<h1>Home</h1>',
+  // The layout renders Badge without hydrating it; this page hydrates it.
+  'pages/badge.island.svelte': `<script>
+  import Badge from '../src/Badge.svelte' with { island: 'load' };
+</script>
+<Badge />`,
+};
+
+defineIslandCssBuildTest({
+  packageDir,
+  pluginName: 'voidSvelte',
+  files,
+  expectedCss: ['.shell{outline-offset:7px}', '{text-indent:9px}', '{word-spacing:5px}'],
+  check({ file, html, css }) {
+    // The style block's rule carries the scope class that the server markup has.
+    const start = html.indexOf('<main class="');
+    expect(start, file).toBeGreaterThan(-1);
+    const classes = html.slice(start + '<main class="'.length, html.indexOf('"', start + 13));
+    const scope = classes.split(' ').find((name) => name.startsWith('svelte-'));
+    expect(css, file).toContain(`main.${scope}{outline-width:9px}`);
+  },
+});
+
+it('links component styles once when a regular page also uses the layout', () => {
+  const build = buildIslandApp({
+    packageDir,
+    pluginName: 'voidSvelte',
+    files: { ...files, 'pages/regular.svelte': '<h1>Regular</h1>' },
+  });
+  try {
+    for (const file of ['index.html', 'about.html', 'regular.html']) {
+      const { css } = build.page(file);
+      expect(countOf(css, '{outline-width:9px}'), file).toBe(1);
+    }
+  } finally {
+    build.cleanup();
+  }
+}, 120_000);
diff --git a/packages/void/src/pages/islands-plugin.ts b/packages/void/src/pages/islands-plugin.ts
index 3e5443c0e..2aab46682 100644
--- a/packages/void/src/pages/islands-plugin.ts
+++ b/packages/void/src/pages/islands-plugin.ts
@@ -1,6 +1,12 @@
-import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { dirname, resolve } from 'pathslash';
-import { normalizePath, type ResolvedConfig, type ViteDevServer } from 'vite';
+import {
+  isCSSRequest,
+  normalizePath,
+  type Plugin,
+  type ResolvedConfig,
+  type ViteDevServer,
+} from 'vite';
 import { findIslandImports, findStaticCssImports } from './island-imports.ts';
 import { resolveEffectiveLayoutChain, scanPages } from './scan.ts';
 import type { PageScanResult } from './types.ts';
@@ -53,48 +59,163 @@ export function resolveSpecifier(
 }
 
 /**
- * Check whether the islands client bundle is needed by scanning file contents.
- * Returns true if any island/layout file has island imports or CSS,
- * or any .md file has a `<script>` block.
+ * Whether the app has island pages (`*.island.*` files or Markdown). Their
+ * layouts can reach a stylesheet through a component, which only the module
+ * graph shows, so the islands client entry is built for every such app.
  */
-export function needsIslandClientBundle(
-  dir: string,
-  islandFilePattern: RegExp,
-  checkStyleBlocks: boolean,
-): boolean {
-  const cssImportRe =
-    /import\b[^"']*["'][^"']+\.(?:css|scss|sass|less|styl|stylus|pcss|postcss)["']/;
-  const mdScriptRe = /^<script\b/m;
-  const styleRe = checkStyleBlocks ? /<style\b/ : null;
+export async function hasIslandPages(root: string, pagesDir: string): Promise<boolean> {
+  if (!existsSync(pagesDir)) {
+    return false;
+  }
   try {
-    for (const entry of readdirSync(dir, { withFileTypes: true, recursive: true })) {
-      if (!entry.isFile()) {
-        continue;
-      }
-      const name = entry.name;
-      if (islandFilePattern.test(name) || name.startsWith('layout.') || name.startsWith('_')) {
-        const content = readFileSync(resolve(entry.parentPath!, name), 'utf-8');
-        if (hasIslandImports(content, name)) {
-          return true;
-        }
-        if (styleRe && styleRe.test(content)) {
-          return true;
-        }
-        if (cssImportRe.test(content)) {
-          return true;
-        }
-      }
-      if (name.endsWith('.md')) {
-        const content = readFileSync(resolve(entry.parentPath!, name), 'utf-8');
-        if (mdScriptRe.test(content)) {
-          return true;
-        }
+    return (await scanPages(root, { pagesDir })).pages.some((page) => page.island);
+  } catch {
+    // buildStart scans the pages again and reports the error.
+    return false;
+  }
+}
+
+/**
+ * The layouts of every island page, outermost first, then the pages. All
+ * island pages share one production stylesheet, so layout styles come first.
+ */
+export function islandStyleRoots(pageScan: PageScanResult, pagesDir: string): Array<string> {
+  const layouts = new Set<string>();
+  const pages: Array<string> = [];
+  for (const page of pageScan.pages) {
+    if (!page.island) {
+      continue;
+    }
+    for (const layout of resolveEffectiveLayoutChain(
+      page,
+      pageScan.layouts,
+      pageScan.namedLayouts,
+    )) {
+      layouts.add(normalizePath(resolve(pagesDir, layout.filePath)));
+    }
+    pages.push(normalizePath(resolve(pagesDir, page.componentPath)));
+  }
+  return [...layouts, ...pages];
+}
+
+/** A stylesheet that a page links, not one imported as a string or a URL. */
+function isLinkedStylesheet(id: string): boolean {
+  if (!isCSSRequest(id)) {
+    return false;
+  }
+  const query = id.indexOf('?');
+  if (query === -1) {
+    return true;
+  }
+  for (const param of id.slice(query + 1).split('&')) {
+    const key = param.split('=')[0];
+    if (key === 'inline' || key === 'url' || key === 'raw') {
+      return false;
+    }
+  }
+  return true;
+}
+
+type ModuleImports = { importedIds: ReadonlyArray<string> };
+
+/**
+ * Stylesheets the roots reach through static imports, in import order (like
+ * the dev CSS collector). Returns null when the roots are not in the graph.
+ * The walk also enters island components, as dev does: a layout can render
+ * one without hydrating it, and a page links its styles before it hydrates.
+ */
+export function collectIslandStyles(
+  getModuleInfo: (id: string) => ModuleImports | null,
+  roots: ReadonlyArray<string>,
+): Array<string> | null {
+  if (!roots.some((root) => getModuleInfo(root))) {
+    return null;
+  }
+  const styles: Array<string> = [];
+  const seen = new Set<string>();
+  const pending = [...roots].reverse();
+  while (pending.length > 0) {
+    const id = pending.pop()!;
+    if (seen.has(id)) {
+      continue;
+    }
+    seen.add(id);
+    if (isLinkedStylesheet(id)) {
+      // Another module cannot import a virtual (`\0`) id.
+      if (!id.startsWith('\0')) {
+        styles.push(id);
       }
+      continue;
     }
-  } catch {
-    // ignore
+    const imported = getModuleInfo(id)?.importedIds ?? [];
+    for (let index = imported.length - 1; index >= 0; index--) {
+      pending.push(imported[index]);
+    }
+  }
+  return styles;
+}
+
+type IslandBuildContext = {
+  environment?: { config: { consumer: string } };
+  getModuleInfo(id: string): ModuleImports | null;
+};
+
+// Vite can reload the config file for each environment build, so the server
+// and client builds may use separate plugin instances. Keep the result here.
+const islandStylesByPagesDir = new Map<string, Array<string>>();
+
+/**
+ * Call from `buildEnd`. Island pages render only on the server, so the server
+ * build has resolved their imports (aliases, packages, Vue and Svelte style
+ * blocks) and the client build has not. Records the stylesheets of island pages
+ * and their layouts for the islands client entry, which builds after it.
+ */
+export function recordIslandStyles(
+  context: IslandBuildContext,
+  pageScan: PageScanResult | null,
+  pagesDir: string,
+): void {
+  if (!pageScan || context.environment?.config.consumer !== 'server') {
+    return;
   }
-  return false;
+  const styles = collectIslandStyles(
+    (id) => context.getModuleInfo(id),
+    islandStyleRoots(pageScan, pagesDir),
+  );
+  // Another server environment (an auxiliary Worker) does not have the pages.
+  if (styles) {
+    islandStylesByPagesDir.set(normalizePath(pagesDir), styles);
+  }
+}
+
+/** The stylesheets that the server build recorded, or null without a server build. */
+export function recordedIslandStyles(pagesDir: string): ReadonlyArray<string> | null {
+  return islandStylesByPagesDir.get(normalizePath(pagesDir)) ?? null;
+}
+
+/**
+ * Keeps the CSS modules (`*.module.css`, Vue `<style module>`) that the
+ * islands client entry imports. Vite marks a CSS module as free of side
+ * effects, so the entry's bare import would drop it and its rules.
+ */
+export function islandStylesPlugin(pagesDir: string): Plugin {
+  return {
+    name: 'void:islands-styles',
+    apply: 'build',
+    enforce: 'post',
+    transform: {
+      order: 'post',
+      filter: { id: /\.module\./ },
+      handler(code, id) {
+        if (
+          this.environment.config.consumer === 'client' &&
+          recordedIslandStyles(pagesDir)?.includes(id)
+        ) {
+          return { code, map: null, moduleSideEffects: 'no-treeshake' };
+        }
+      },
+    },
+  };
 }
 
 /**
diff --git a/packages/void/test/unit/island-css-rewrite.test.ts b/packages/void/test/unit/island-css-rewrite.test.ts
index 4695e221d..62998ec3c 100644
--- a/packages/void/test/unit/island-css-rewrite.test.ts
+++ b/packages/void/test/unit/island-css-rewrite.test.ts
@@ -4,9 +4,12 @@ import { join, resolve } from 'node:path';
 import { normalizePath } from 'vite';
 import { describe, it, expect } from 'vite-plus/test';
 import {
+  collectIslandStyles,
   extractCssImports,
+  islandStyleRoots,
   rewriteCssImportForVirtualModule,
 } from '../../src/pages/islands-plugin.ts';
+import type { PageDefinition } from '../../src/pages/types.ts';
 
 /** Resolve a POSIX-style absolute path to a platform-correct path with forward slashes. */
 const p = (posix: string) => normalizePath(resolve(posix));
@@ -70,3 +73,79 @@ describe('rewriteCssImportForVirtualModule', () => {
     expect(result).toBe('import "some-lib/styles.css";');
   });
 });
+
+describe('collectIslandStyles', () => {
+  const graph: Record<string, Array<string>> = {
+    '/app/pages/layout.tsx': [
+      '/app/src/a.css',
+      '/app/src/Shell.tsx',
+      '/app/src/c.css',
+      '\0virtual:generated.css',
+    ],
+    '/app/src/Shell.tsx': [
+      '/app/src/b.css',
+      '/app/src/a.css',
+      '/app/src/raw.css?inline',
+      '/app/src/link.css?url',
+    ],
+    '/app/pages/index.island.tsx': [
+      '/app/src/Counter.tsx',
+      '/app/src/Card.vue?vue&type=style&index=0&scoped=abc&lang.css',
+    ],
+    '/app/src/Counter.tsx': ['/app/src/counter.css'],
+  };
+  const getModuleInfo = (id: string) => (graph[id] ? { importedIds: graph[id] } : null);
+
+  it('follows static imports in order, once each, into island components', () => {
+    const styles = collectIslandStyles(getModuleInfo, [
+      '/app/pages/layout.tsx',
+      '/app/pages/index.island.tsx',
+    ]);
+    expect(styles).toEqual([
+      '/app/src/a.css',
+      '/app/src/b.css',
+      '/app/src/c.css',
+      '/app/src/counter.css',
+      '/app/src/Card.vue?vue&type=style&index=0&scoped=abc&lang.css',
+    ]);
+  });
+
+  it('returns null for a build without the pages', () => {
+    expect(collectIslandStyles(getModuleInfo, ['/other/page.tsx'])).toBeNull();
+  });
+});
+
+describe('islandStyleRoots', () => {
+  const page = (componentPath: string, island: boolean) =>
+    ({
+      componentPath,
+      componentId: componentPath.slice(0, componentPath.indexOf('.')),
+      island,
+    }) as PageDefinition;
+
+  it('lists the layouts of island pages outermost first, then the pages, once each', () => {
+    const roots = islandStyleRoots(
+      {
+        pages: [
+          page('blog/post.island.tsx', true),
+          page('regular.tsx', false),
+          page('index.island.tsx', true),
+          page('blog/list.md', true),
+        ],
+        layouts: [
+          { directory: '', filePath: 'layout.tsx' },
+          { directory: 'blog', filePath: 'blog/layout.tsx' },
+        ],
+        namedLayouts: [],
+      },
+      '/app/pages',
+    );
+    expect(roots).toEqual([
+      p('/app/pages/layout.tsx'),
+      p('/app/pages/blog/layout.tsx'),
+      p('/app/pages/blog/post.island.tsx'),
+      p('/app/pages/index.island.tsx'),
+      p('/app/pages/blog/list.md'),
+    ]);
+  });
+});
diff --git a/packages/vue/src/plugin-islands.ts b/packages/vue/src/plugin-islands.ts
index 81767c1e6..f5da7dc0e 100644
--- a/packages/vue/src/plugin-islands.ts
+++ b/packages/vue/src/plugin-islands.ts
@@ -5,7 +5,10 @@ import { generateComponentManifest, scanPages, resolveEffectiveLayoutChain } fro
 import type { PageScanResult } from 'void/pages';
 import {
   resolveSpecifier,
-  needsIslandClientBundle,
+  hasIslandPages,
+  recordIslandStyles,
+  recordedIslandStyles,
+  islandStylesPlugin,
   rewriteCssImportForVirtualModule,
   computePagesNeedingClientJS,
   watchPagesForRescan,
@@ -118,6 +121,22 @@ export function islandsPlugin(
         }
       },
 
+      buildEnd() {
+        recordIslandStyles(this, pageScan, pagesDir);
+        if (this.environment.config.consumer !== 'client') {
+          return;
+        }
+        // Vite drops a scoped style block when its component is not in the
+        // bundle (`cssScopeTo`). Island pages and layouts render only on the
+        // server, so keep the styles that the islands client entry imports.
+        for (const id of recordedIslandStyles(pagesDir) ?? []) {
+          const vite = this.getModuleInfo(id)?.meta.vite as { cssScopeTo?: unknown } | undefined;
+          if (vite?.cssScopeTo) {
+            delete vite.cssScopeTo;
+          }
+        }
+      },
+
       resolveId: {
         filter: { id: /^virtual:void-islands-(renderer|client)$/ },
         handler(source) {
@@ -148,7 +167,14 @@ export function islandsPlugin(
             if (!pageScan) {
               return '';
             }
-            return generateIslandClientEntry(islandManifest, islandCssFiles, isDev);
+            return generateIslandClientEntry(
+              islandManifest,
+              islandCssFiles,
+              recordedIslandStyles(pagesDir),
+              islandManifest.size > 0 ||
+                computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0,
+              isDev,
+            );
           }
         },
       },
@@ -224,14 +250,14 @@ export function islandsPlugin(
         },
       },
 
-      config(_, env) {
+      async config(_, env) {
         if (!existsSync(pagesDir)) {
           return;
         }
         if (env.command === 'serve') {
           return { optimizeDeps: { include: ['vue'] } };
         }
-        if (needsIslandClientBundle(pagesDir, /\.island\.vue$/, true)) {
+        if (await hasIslandPages(root, pagesDir)) {
           return {
             environments: {
               client: {
@@ -247,6 +273,7 @@ export function islandsPlugin(
         }
       },
     },
+    islandStylesPlugin(pagesDir),
   ];
 }
 
@@ -325,6 +352,8 @@ export async function renderIslandPage(pageObj, assetTags) {
 function generateIslandClientEntry(
   manifest: Map<string, IslandEntry>,
   cssFiles: Set<string>,
+  styles: ReadonlyArray<string> | null,
+  needsRuntime: boolean,
   isDev: boolean,
 ): string {
   const entries = [...manifest.values()];
@@ -335,13 +364,16 @@ function generateIslandClientEntry(
 
   const lines: Array<string> = [];
 
-  lines.push('import { initIslands } from "void/pages-client";');
-
   // In dev, first-paint CSS is provided by Void's shared dev CSS collector.
   // Skip style imports here to avoid duplicate client injection.
-  // In production, the <link> tags aren't used — the style imports below
-  // ensure the CSS is included in the bundled output.
-  if (!isDev) {
+  // In production, the imports below bundle the CSS that island pages link.
+  // `styles` comes from the server build; without one, only the direct
+  // imports and style blocks of the pages and layouts are known.
+  if (!isDev && styles) {
+    for (const id of styles) {
+      lines.push(`import ${JSON.stringify(id)};`);
+    }
+  } else if (!isDev) {
     const styleRe = /<style\b([^>]*)>/g;
     for (const file of cssFiles) {
       const content = readFileSync(file, 'utf-8');
@@ -367,6 +399,15 @@ function generateIslandClientEntry(
     }
   }
 
+  // Without islands, no built page gets this script (see
+  // computePagesNeedingClientJS), so the entry only gives the styles a chunk to
+  // link. Dev keeps the runtime: it does not reload this module when a page
+  // gains an island.
+  if (!needsRuntime && !isDev) {
+    return lines.join('\n');
+  }
+
+  lines.push('import { initIslands } from "void/pages-client";');
   lines.push('const islands = {');
   for (const [id, path] of uniqueIslands) {
     lines.push(`  ${JSON.stringify(id)}: () => import(${JSON.stringify(path)}),`);
diff --git a/packages/vue/test/integration/island-css-build.test.ts b/packages/vue/test/integration/island-css-build.test.ts
new file mode 100644
index 000000000..717819f6d
--- /dev/null
+++ b/packages/vue/test/integration/island-css-build.test.ts
@@ -0,0 +1,44 @@
+import { join } from 'node:path';
+import { expect } from 'vite-plus/test';
+import { defineIslandCssBuildTest } from '../../../../test/island-css-build.ts';
+
+defineIslandCssBuildTest({
+  packageDir: join(import.meta.dirname, '../..'),
+  pluginName: 'voidVue',
+  files: {
+    'src/shell.css': '.shell { outline-offset: 7px; }',
+    'src/Badge.vue': `<template><b class="badge">Badge</b></template>
+<style>.badge { word-spacing: 5px; }</style>`,
+    'src/Shell.vue': `<script setup>
+import './shell.css';
+import Badge from './Badge.vue';
+</script>
+<template><main class="shell"><p class="note">Note</p><p :class="$style.card">Card</p><Badge /><slot /></main></template>
+<style>main { outline-width: 9px; }</style>
+<style scoped>.note { outline-width: 11px; }</style>
+<style module>.card { text-indent: 9px; }</style>`,
+    'pages/layout.vue': `<script setup>
+import Shell from '../src/Shell.vue';
+</script>
+<template><Shell><slot /></Shell></template>`,
+    'pages/index.island.vue': '<template><h1>Home</h1></template>',
+    // The layout renders Badge without hydrating it; this page hydrates it.
+    'pages/badge.island.vue': `<script setup>
+import Badge from '../src/Badge.vue' with { island: 'load' };
+</script>
+<template><Badge /></template>`,
+  },
+  expectedCss: [
+    '.shell{outline-offset:7px}',
+    'main{outline-width:9px}',
+    '{text-indent:9px}',
+    '.badge{word-spacing:5px}',
+  ],
+  check({ file, html, css }) {
+    // The scoped rule carries the attribute that the server markup has.
+    const start = html.indexOf('data-v-');
+    expect(start, file).toBeGreaterThan(-1);
+    const scope = html.slice(start, html.indexOf('>', start)).split(' ')[0];
+    expect(css, file).toContain(`.note[${scope}]{outline-width:11px}`);
+  },
+});
diff --git a/test/island-css-build.ts b/test/island-css-build.ts
new file mode 100644
index 000000000..cbc670f09
--- /dev/null
+++ b/test/island-css-build.ts
@@ -0,0 +1,127 @@
+import { execSync } from 'node:child_process';
+import { mkdirSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { expect, it } from 'vite-plus/test';
+
+const MD_PLUGIN = join(import.meta.dirname, '../packages/md/dist/plugin.mjs');
+
+type IslandCssApp = {
+  /** The adapter package directory, e.g. `packages/react`. */
+  packageDir: string;
+  /** The adapter's plugin export in `dist/plugin.mjs`, e.g. `voidReact`. */
+  pluginName: string;
+  /** App files by path. `index` and `about` must ship no JavaScript. */
+  files: Record<string, string>;
+  /** Rules (as minified CSS) every page must link, found once in the client build. */
+  expectedCss: Array<string>;
+  /** Extra assertions for each page. */
+  check?: (page: { file: string; html: string; css: string }) => void;
+};
+
+/** The stylesheet links of a page, without a regular expression. */
+function stylesheetHrefs(html: string): Array<string> {
+  const marker = '<link rel="stylesheet" href="';
+  return html
+    .split(marker)
+    .slice(1)
+    .map((rest) => rest.slice(0, rest.indexOf('"')));
+}
+
+/**
+ * Builds the app for production with the built Void packages. The app has no
+ * package.json, so `@void/<adapter>` resolves to the adapter package itself.
+ */
+export function buildIslandApp(app: Omit<IslandCssApp, 'expectedCss' | 'check'>): {
+  root: string;
+  page(file: string): { html: string; css: string };
+  /** The text of every built file under `dist/<dir>`, by path. */
+  output(dir: 'client' | 'ssr'): Map<string, string>;
+  cleanup(): void;
+} {
+  const root = mkdtempSync(join(app.packageDir, 'test/integration/__tmp_island_css_'));
+  try {
+    const plugin = pathToFileURL(join(app.packageDir, 'dist/plugin.mjs')).href;
+    const files: Record<string, string> = {
+      'vite.config.mjs': `import { voidPlugin } from 'void';
+import { ${app.pluginName} } from ${JSON.stringify(plugin)};
+import { voidMarkdown } from ${JSON.stringify(pathToFileURL(MD_PLUGIN).href)};
+export default { plugins: [voidPlugin(), ${app.pluginName}(), voidMarkdown()] };
+`,
+      'void.config.ts': `import { defineConfig } from 'void/config';
+export default defineConfig({ output: 'static', worker: { compatibility_date: '2026-02-24' } });
+`,
+      'pages/about.md': '---\ntitle: About\n---\n\n# About\n',
+      ...app.files,
+    };
+    for (const [file, content] of Object.entries(files)) {
+      mkdirSync(dirname(join(root, file)), { recursive: true });
+      writeFileSync(join(root, file), content);
+    }
+    // The native loader keeps the config's imports in the adapter package scope.
+    execSync('vp build --configLoader native', { cwd: root, stdio: 'pipe' });
+  } catch (error) {
+    rmSync(root, { recursive: true, force: true });
+    throw error;
+  }
+  const client = join(root, 'dist/client');
+  return {
+    root,
+    page(file) {
+      const html = readFileSync(join(client, file), 'utf-8');
+      const css = stylesheetHrefs(html)
+        .map((href) => readFileSync(join(client, href), 'utf-8'))
+        .join('\n');
+      return { html, css };
+    },
+    output(dir) {
+      const out = join(root, 'dist', dir);
+      const files = new Map<string, string>();
+      for (const file of readdirSync(out, { recursive: true, encoding: 'utf-8' })) {
+        if (file.endsWith('.js') || file.endsWith('.css') || file.endsWith('.html')) {
+          files.set(file, readFileSync(join(out, file), 'utf-8'));
+        }
+      }
+      return files;
+    },
+    cleanup() {
+      rmSync(root, { recursive: true, force: true });
+    },
+  };
+}
+
+/** How many times `text` contains `part`. */
+export function countOf(text: string, part: string): number {
+  return text.split(part).length - 1;
+}
+
+/**
+ * Shared by the four adapters: a layout renders a component that imports CSS.
+ * Production must link that CSS on island and Markdown pages, as dev does,
+ * even though the pages ship no JavaScript.
+ */
+export function defineIslandCssBuildTest(app: IslandCssApp): void {
+  it('links the CSS that a layout component imports on island and Markdown pages', () => {
+    const build = buildIslandApp(app);
+    try {
+      for (const file of ['index.html', 'about.html']) {
+        const { html, css } = build.page(file);
+        for (const rule of app.expectedCss) {
+          expect(countOf(css, rule), `${file}: ${rule}`).toBe(1);
+        }
+        expect(html, file).not.toContain('<script');
+        app.check?.({ file, html, css });
+      }
+      // Rolldown keeps each stylesheet module in one chunk, so no rule repeats.
+      const clientCss = [...build.output('client')]
+        .filter(([file]) => file.endsWith('.css'))
+        .map(([, text]) => text)
+        .join('\n');
+      for (const rule of app.expectedCss) {
+        expect(countOf(clientCss, rule), rule).toBe(1);
+      }
+    } finally {
+      build.cleanup();
+    }
+  }, 120_000);
+}