test: add tests for CSS modules in _app.tsx and shared across routes

bartlomieju · claude · bartlomieju · commit a01e03766600 · 2026-04-09T13:41:51.000+02:00
Adds an AppNav island with a CSS module to _app.tsx and a second
page that shares the CssModules island. Tests verify:

1. CSS modules from islands in _app.tsx are injected into the page
   (both build and dev mode)
2. CSS modules from shared islands work on the second page visited,
   not just the first (both build and dev mode)

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/plugin-vite/demo/islands/AppNav.module.css b/packages/plugin-vite/demo/islands/AppNav.module.css
@@ -0,0 +1,3 @@
+.nav {
+  background-color: rgb(30, 30, 30);
+}
diff --git a/packages/plugin-vite/demo/islands/AppNav.tsx b/packages/plugin-vite/demo/islands/AppNav.tsx
@@ -0,0 +1,10 @@
+// @ts-ignore upstream issue https://github.com/denoland/deno/issues/30560
+import styles from "./AppNav.module.css";
+
+export function AppNav() {
+  return (
+    <nav class={`app-nav ${styles.nav}`}>
+      <span>Fresh</span>
+    </nav>
+  );
+}
diff --git a/packages/plugin-vite/demo/routes/_app.tsx b/packages/plugin-vite/demo/routes/_app.tsx
@@ -1,4 +1,5 @@
 import type { PageProps } from "fresh";
+import { AppNav } from "../islands/AppNav.tsx";
 
 export default function App({ Component }: PageProps) {
   return (
@@ -9,6 +10,7 @@ export default function App({ Component }: PageProps) {
         <meta name="custom" content="foo" />
       </head>
       <body>
+        <AppNav />
         <Component />
       </body>
     </html>
diff --git a/packages/plugin-vite/demo/routes/tests/css_modules_page2.tsx b/packages/plugin-vite/demo/routes/tests/css_modules_page2.tsx
@@ -0,0 +1,10 @@
+import { CssModules } from "../../islands/CssModules.tsx";
+
+export default function Page2() {
+  return (
+    <div>
+      <CssModules />
+      <p class="page2-marker">page2</p>
+    </div>
+  );
+}
diff --git a/packages/plugin-vite/tests/build_test.ts b/packages/plugin-vite/tests/build_test.ts
@@ -336,6 +336,59 @@ integrationTest("vite build - css modules", async () => {
   );
 });
 
+// Issue: https://github.com/denoland/fresh/issues/3633
+integrationTest(
+  "vite build - css modules in _app.tsx island are injected",
+  async () => {
+    await launchProd(
+      { cwd: viteResult.tmp },
+      async (address) => {
+        await withBrowser(async (page) => {
+          await page.goto(`${address}/tests/css_modules`, {
+            waitUntil: "networkidle2",
+          });
+
+          // The AppNav island is in _app.tsx and uses a CSS module.
+          // Its styles should be injected even though the island
+          // is discovered after <head> renders.
+          const bgColor = await page
+            .locator(".app-nav")
+            // deno-lint-ignore no-explicit-any
+            .evaluate((el) =>
+              window.getComputedStyle(el as any).backgroundColor
+            );
+          expect(bgColor).toEqual("rgb(30, 30, 30)");
+        });
+      },
+    );
+  },
+);
+
+// Issue: https://github.com/denoland/fresh/issues/3633
+integrationTest(
+  "vite build - css modules work on second page with shared island",
+  async () => {
+    await launchProd(
+      { cwd: viteResult.tmp },
+      async (address) => {
+        await withBrowser(async (page) => {
+          // Access the second page that shares the CssModules island
+          await page.goto(`${address}/tests/css_modules_page2`, {
+            waitUntil: "networkidle2",
+          });
+
+          // The shared CssModules island's CSS should work here too
+          const color = await page
+            .locator(".red > h1")
+            // deno-lint-ignore no-explicit-any
+            .evaluate((el) => window.getComputedStyle(el as any).color);
+          expect(color).toEqual("rgb(255, 0, 0)");
+        });
+      },
+    );
+  },
+);
+
 integrationTest("vite build - route css import", async () => {
   await launchProd(
     { cwd: viteResult.tmp },
diff --git a/packages/plugin-vite/tests/dev_server_test.ts b/packages/plugin-vite/tests/dev_server_test.ts
@@ -235,6 +235,53 @@ integrationTest("vite dev - css modules", async () => {
   });
 });
 
+// Issue: https://github.com/denoland/fresh/issues/3633
+integrationTest(
+  "vite dev - css modules in _app.tsx island are injected",
+  async () => {
+    await withBrowser(async (page) => {
+      await page.goto(`${demoServer.address()}/tests/css_modules`, {
+        waitUntil: "networkidle2",
+      });
+
+      await waitFor(async () => {
+        const bgColor = await page
+          .locator(".app-nav")
+          // deno-lint-ignore no-explicit-any
+          .evaluate((el) => window.getComputedStyle(el as any).backgroundColor);
+        expect(bgColor).toEqual("rgb(30, 30, 30)");
+        return true;
+      });
+    });
+  },
+);
+
+// Issue: https://github.com/denoland/fresh/issues/3633
+integrationTest(
+  "vite dev - css modules work on second page with shared island",
+  async () => {
+    await withBrowser(async (page) => {
+      // First visit a different page, then visit page2 that shares
+      // the CssModules island. In dev mode, the CSS must still work.
+      await page.goto(`${demoServer.address()}/`, {
+        waitUntil: "networkidle2",
+      });
+      await page.goto(`${demoServer.address()}/tests/css_modules_page2`, {
+        waitUntil: "networkidle2",
+      });
+
+      await waitFor(async () => {
+        const color = await page
+          .locator(".red > h1")
+          // deno-lint-ignore no-explicit-any
+          .evaluate((el) => window.getComputedStyle(el as any).color);
+        expect(color).toEqual("rgb(255, 0, 0)");
+        return true;
+      });
+    });
+  },
+);
+
 integrationTest("vite dev - route css import", async () => {
   await withBrowser(async (page) => {
     await page.goto(`${demoServer.address()}/tests/css`, {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.nav {`
	`2`	`+ background-color: rgb(30, 30, 30);`
	`3`	`+}`