refactor: pass server css to browser via shared build state

packages/react-server/examples/basic/e2e/basic.test.ts

@@ -418,26 +418,36 @@ test("unocss hmr @dev", async ({ page, browser }) => {
   ).toHaveCSS("font-weight", "300");
 });
 
-test("react-server css @js", async ({ page }) => {
+test("react-server css normal @js", async ({ page }) => {
   checkNoError(page);
 
   await page.goto("/test/css");
   await expect(page.getByText("css normal")).toHaveCSS(
     "background-color",
     "rgb(250, 250, 200)",
   );
-  await expect(page.getByText("css module")).toHaveCSS(
-    "background-color",
-    "rgb(200, 250, 250)",
-  );
 });
 
-testNoJs("react-server css @nojs", async ({ page }) => {
+testNoJs("react-server css normal @nojs", async ({ page }) => {
   await page.goto("/test/css");
   await expect(page.getByText("css normal")).toHaveCSS(
     "background-color",
     "rgb(250, 250, 200)",
   );
+});
+
+test("react-server css module @js", async ({ page }) => {
+  checkNoError(page);
+
+  await page.goto("/test/css");
+  await expect(page.getByText("css module")).toHaveCSS(
+    "background-color",
+    "rgb(200, 250, 250)",
+  );
+});
+
+testNoJs("react-server css module @nojs", async ({ page }) => {
+  await page.goto("/test/css");
   await expect(page.getByText("css module")).toHaveCSS(
     "background-color",
     "rgb(200, 250, 250)",

packages/react-server/src/features/assets/plugin.ts

@@ -1,7 +1,11 @@
 import fs from "node:fs";
-import path from "node:path";
 import { tinyassert, typedBoolean } from "@hiogawa/utils";
-import type { Manifest, Plugin, ViteDevServer } from "vite";
+import {
+  type Manifest,
+  type Plugin,
+  type ViteDevServer,
+  isCSSRequest,
+} from "vite";
 import { $__global } from "../../lib/global";
 import type { PluginStateManager } from "../../plugin";
 import {
@@ -19,7 +23,7 @@ export interface SsrAssetsType {
 
 export const SERVER_CSS_PROXY = "virtual:server-css-proxy.js";
 
-export function vitePluginServerAssets({
+export function serverAssetsPluginClient({
   manager,
 }: { manager: PluginStateManager }): Plugin[] {
   return [
@@ -117,22 +121,39 @@ export function vitePluginServerAssets({
         return code + `if (import.meta.hot) { import.meta.hot.accept() }`;
       }
       if (manager.buildType === "client") {
-        // TODO: probe manifest to collect css?
-        const files = await fs.promises.readdir("./dist/rsc/assets", {
-          withFileTypes: true,
-        });
-        const code = files
-          .filter((f) => f.isFile() && f.name.endsWith(".css"))
-          .map((f) => path.join(f.path, f.name))
-          .map((f) => `import "/${f}";\n`)
+        // shaky way to keep css module import side effect
+        const code = manager.serverCssIds
+          .map((url) => `export * from "${url}";\n`)
           .join("");
-        return code;
+        return { code, map: null, moduleSideEffects: "no-treeshake" };
       }
       tinyassert(false);
     }),
   ];
 }
 
+export function serverAssertsPluginServer({
+  manager,
+}: { manager: PluginStateManager }): Plugin[] {
+  // TODO
+  // - css should be processed on server plugin? (currently only id is passed over to client)
+  // - css code split by route?
+  // - css ordering?
+  return [
+    {
+      name: serverAssertsPluginServer.name + ":build",
+      apply: "build",
+      buildEnd() {
+        if (manager.buildType === "rsc") {
+          manager.serverCssIds = [...this.getModuleIds()].filter((id) =>
+            isCSSRequest(id),
+          );
+        }
+      },
+    },
+  ];
+}
+
 async function getIndexHtmlTransform(server: ViteDevServer) {
   const html = await server.transformIndexHtml(
     "/",

packages/react-server/src/plugin/index.ts

@@ -14,7 +14,8 @@ import {
 import { CSS_LANGS_RE } from "../features/assets/css";
 import {
   SERVER_CSS_PROXY,
-  vitePluginServerAssets,
+  serverAssertsPluginServer,
+  serverAssetsPluginClient,
 } from "../features/assets/plugin";
 import type { RouteManifest } from "../features/router/manifest";
 import {
@@ -66,6 +67,8 @@ class PluginStateManager {
   routeToClientReferences: Record<string, string[]> = {};
   routeManifest?: RouteManifest;
 
+  serverCssIds: string[] = [];
+
   // expose "use client" node modules to client via virtual modules
   // to avoid dual package due to deps optimization hash during dev
   nodeModules = {
@@ -147,6 +150,8 @@ export function vitePluginReactServer(options?: {
 
       routeManifestPluginServer({ manager }),
 
+      serverAssertsPluginServer({ manager }),
+
       // this virtual is not necessary anymore but has been used in the past
       // to extend user's react-server entry like ENTRY_CLIENT_WRAPPER
       createVirtualPlugin(
@@ -339,7 +344,7 @@ export function vitePluginReactServer(options?: {
       ssrRuntimePath: RUNTIME_SERVER_PATH,
     }),
     ...vitePluginClientUseClient({ manager }),
-    ...vitePluginServerAssets({ manager }),
+    ...serverAssetsPluginClient({ manager }),
     ...routeManifestPluginClient({ manager }),
     createVirtualPlugin(ENTRY_CLIENT_WRAPPER.slice("virtual:".length), () => {
       // dev