From 331e23bff742f699c01ca367bd34f1bc0236231f Mon Sep 17 00:00:00 2001
From: LongYinan <github@lyn.one>
Date: Mon, 19 Oct 2026 01:31:11 +0800
Subject: [PATCH] fix(pages): link CSS that island and Markdown pages reach
 through components

In production, island and Markdown pages only got the CSS their page and
layout files import directly. A stylesheet imported by a component that a
layout renders was missing, and when no file imported CSS directly the
islands client entry was not built at all, so no page got a stylesheet.

- Build the islands client entry for every app with island or Markdown
  pages, replacing the text scan in needsIslandClientBundle.
- Record the stylesheets that island pages and their layouts reach through
  static imports from the server build's module graph, and import them in
  the islands client entry. This covers aliases, packages, CSS modules and
  Vue/Svelte style blocks, and keeps the CSS order of dev.
- Keep CSS modules that the entry imports (Vite marks them side-effect
  free), keep Vue scoped styles whose component is not in the client
  bundle, and load Svelte styles through vite-plugin-svelte's own id so a
  rule is not emitted twice.
- Without islands, the entry only holds the CSS imports, so no hydration
  runtime is bundled. The React and Solid entry is now added only to the
  client build.

Fixes #452

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 packages/react/src/plugin-islands.ts          |  66 ++++--
 .../test/integration/island-css-build.test.ts |  81 +++++++
 packages/solid/src/plugin-islands.ts          |  64 ++++--
 .../test/integration/island-css-build.test.ts |  30 +++
 packages/svelte/src/plugin-islands.ts         |  83 ++++++--
 .../test/integration/island-css-build.test.ts |  64 ++++++
 packages/void/src/pages/islands-plugin.ts     | 199 ++++++++++++++----
 .../void/test/unit/island-css-rewrite.test.ts |  79 +++++++
 packages/vue/src/plugin-islands.ts            |  59 +++++-
 .../test/integration/island-css-build.test.ts |  44 ++++
 test/island-css-build.ts                      | 127 +++++++++++
 11 files changed, 790 insertions(+), 106 deletions(-)
 create mode 100644 packages/react/test/integration/island-css-build.test.ts
 create mode 100644 packages/solid/test/integration/island-css-build.test.ts
 create mode 100644 packages/svelte/test/integration/island-css-build.test.ts
 create mode 100644 packages/vue/test/integration/island-css-build.test.ts
 create mode 100644 test/island-css-build.ts

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);
+}