feat(react-server): handle css in react-server

packages/react-server/README.md

@@ -28,6 +28,7 @@ pnpm preview
 
 - `index.html`
 - `src/entry-client.tsx`
+- `src/entry-react-server.tsx`
 - `src/routes/**/(page|layout).tsx`
 - `"use client"`
 - `"use server"`

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

@@ -33,7 +33,7 @@ test("404", async ({ page }) => {
   await page.getByText("Not Found: /test/not-found").click();
 });
 
-test("@dev rsc hmr", async ({ page }) => {
+test("rsc hmr @dev", async ({ page }) => {
   checkNoError(page);
 
   await page.goto("/test");
@@ -51,7 +51,7 @@ test("@dev rsc hmr", async ({ page }) => {
   await checkClientState();
 });
 
-test("@dev common hmr", async ({ page }) => {
+test("common hmr @dev", async ({ page }) => {
   checkNoError(page);
 
   await page.goto("/test");
@@ -71,7 +71,7 @@ test("@dev common hmr", async ({ page }) => {
   await checkClientState();
 });
 
-test("@dev client hmr", async ({ page }) => {
+test("client hmr @dev", async ({ page }) => {
   checkNoError(page);
 
   await page.goto("/test");
@@ -93,7 +93,7 @@ test("@dev client hmr", async ({ page }) => {
   expect(await res.text()).toContain("<div>test-hmr-edit-div</div>");
 });
 
-test("css", async ({ page, browser }) => {
+test("unocss", async ({ page, browser }) => {
   await page.goto("/test");
   await expect(page.getByRole("heading", { name: "RSC Experiment" })).toHaveCSS(
     "font-weight",
@@ -107,10 +107,12 @@ test("css", async ({ page, browser }) => {
   ).toHaveCSS("font-weight", "700");
 });
 
-test("@dev css hmr", async ({ page, browser }) => {
+test("unocss hmr @dev", async ({ page, browser }) => {
   await page.goto("/test");
   await page.getByText("hydrated: true").click();
 
+  const checkClientState = await setupCheckClientState(page);
+
   await expect(page.getByRole("heading", { name: "RSC Experiment" })).toHaveCSS(
     "font-weight",
     "700",
@@ -123,6 +125,8 @@ test("@dev css hmr", async ({ page, browser }) => {
     "300",
   );
 
+  await checkClientState();
+
   // verify new style is applied without js
   const page2 = await browser.newPage({ javaScriptEnabled: false });
   await page2.goto("/test");
@@ -131,6 +135,78 @@ test("@dev css hmr", async ({ page, browser }) => {
   ).toHaveCSS("font-weight", "300");
 });
 
+test("react-server css", async ({ 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)",
+  );
+});
+
+test("react-server css @nojs", async ({ browser }) => {
+  const page = await browser.newPage({ javaScriptEnabled: false });
+  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)",
+  );
+});
+
+test("react-server css hmr @dev", async ({ page, browser }) => {
+  await page.goto("/test/css");
+  await page.getByText("hydrated: true").click();
+
+  const checkClientState = await setupCheckClientState(page);
+
+  await expect(page.getByText("css normal")).toHaveCSS(
+    "background-color",
+    "rgb(250, 250, 200)",
+  );
+  await editFile("./src/routes/test/css/css-normal.css", (s) =>
+    s.replace("rgb(250, 250, 200)", "rgb(250, 250, 123)"),
+  );
+  await expect(page.getByText("css normal")).toHaveCSS(
+    "background-color",
+    "rgb(250, 250, 123)",
+  );
+
+  await expect(page.getByText("css module")).toHaveCSS(
+    "background-color",
+    "rgb(200, 250, 250)",
+  );
+  await editFile("./src/routes/test/css/css-module.module.css", (s) =>
+    s.replace("rgb(200, 250, 250)", "rgb(123, 250, 250)"),
+  );
+  await expect(page.getByText("css module")).toHaveCSS(
+    "background-color",
+    "rgb(123, 250, 250)",
+  );
+
+  await checkClientState();
+
+  // verify new style is applied without js
+  {
+    const page = await browser.newPage({ javaScriptEnabled: false });
+    await page.goto("/test/css");
+    await expect(page.getByText("css normal")).toHaveCSS(
+      "background-color",
+      "rgb(250, 250, 123)",
+    );
+    await expect(page.getByText("css module")).toHaveCSS(
+      "background-color",
+      "rgb(123, 250, 250)",
+    );
+  }
+});
+
 test("server action with js", async ({ page }) => {
   await page.goto("/test/action");
   await page.getByText("hydrated: true").click();

packages/react-server/examples/basic/package.json

@@ -11,6 +11,7 @@
     "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
     "vc-build": "pnpm build && bash misc/vercel-serverless/build.sh",
     "vc-release": "vercel deploy --prod --prebuilt misc/vercel-serverless",
+    "vc-release-staging": "vercel deploy --prebuilt misc/vercel-serverless",
     "cf-build": "SSR_ENTRY=/src/adapters/cloudflare-workers.ts pnpm build && bash misc/cloudflare-workers/build.sh",
     "cf-preview": "cd misc/cloudflare-workers && wrangler dev",
     "cf-release": "cd misc/cloudflare-workers && wrangler deploy"

packages/react-server/examples/basic/src/routes/test/css/css-module.module.css

@@ -0,0 +1,6 @@
+.test {
+  background: rgb(200, 250, 250);
+  padding: 20px;
+  width: 200px;
+  border: 1px solid gray;
+}

packages/react-server/examples/basic/src/routes/test/css/css-normal.css

@@ -0,0 +1,6 @@
+#css-normal {
+  background: rgb(250, 250, 200);
+  padding: 20px;
+  width: 200px;
+  border: 1px solid gray;
+}

packages/react-server/examples/basic/src/routes/test/css/page.tsx

@@ -0,0 +1,14 @@
+import "./css-normal.css";
+import cssModule from "./css-module.module.css";
+
+export default function Page() {
+  return (
+    <div className="flex flex-col gap-2">
+      <h5 className="font-bold">css</h5>
+      <div className="flex flex-col gap-2">
+        <div id="css-normal">css normal</div>
+        <div className={cssModule.test}>css module</div>
+      </div>
+    </div>
+  );
+}

packages/react-server/examples/basic/src/routes/test/layout.tsx

@@ -12,6 +12,7 @@ export default async function Layout(props: React.PropsWithChildren) {
           "/test/action",
           "/test/deps",
           "/test/head",
+          "/test/css",
           "/test/not-found",
         ]}
       />

packages/react-server/examples/basic/vite.config.ts

@@ -14,7 +14,6 @@ export default defineConfig({
     react(),
     unocss(),
     vitePluginReactServer({
-      entry: "/src/entry-react-server.tsx",
       plugins: [testVitePluginVirtual()],
     }),
     vitePluginLogger(),

packages/react-server/examples/starter/src/entry-react-server.tsx

@@ -0,0 +1 @@
+export { handler } from "@hiogawa/react-server/entry-react-server";

packages/react-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hiogawa/react-server",
-  "version": "0.1.0-pre.7",
+  "version": "0.1.0-pre.8",
   "license": "MIT",
   "type": "module",
   "exports": {

packages/react-server/src/entry/server.tsx

@@ -6,7 +6,7 @@ import {
   initDomWebpackSsr,
   invalidateImportCacheOnFinish,
 } from "../lib/ssr";
-import { invalidateModule } from "../plugin/utils";
+import { ENTRY_REACT_SERVER, invalidateModule } from "../plugin/utils";
 
 export async function handler(request: Request): Promise<Response> {
   const reactServer = await importReactServer();
@@ -31,7 +31,7 @@ export async function importReactServer(): Promise<
   typeof import("./react-server")
 > {
   if (import.meta.env.DEV) {
-    return __rscDevServer.ssrLoadModule(__rscEntry) as any;
+    return __rscDevServer.ssrLoadModule(ENTRY_REACT_SERVER) as any;
   } else {
     return import("/dist/rsc/index.js" as string);
   }
@@ -65,6 +65,7 @@ export async function renderHtml(
   if (import.meta.env.DEV) {
     // ensure latest css
     invalidateModule(__devServer, "\0virtual:ssr-assets");
+    invalidateModule(__devServer, "\0virtual:react-server-css.js");
     invalidateModule(__devServer, "\0virtual:dev-ssr-css.css?direct");
   }
   const assets = (await import("virtual:ssr-assets" as string)).default;

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

@@ -1,9 +1,24 @@
 import type { ViteDevServer } from "vite";
 
-// cf.
+// cf
 // https://github.com/hi-ogawa/vite-plugins/blob/3c496fa1bb5ac66d2880986877a37ed262f1d2a6/packages/vite-glob-routes/examples/demo/vite-plugin-ssr-css.ts
+// https://github.com/remix-run/remix/blob/dev/packages/remix-dev/vite/styles.ts
 
 export async function collectStyle(server: ViteDevServer, entries: string[]) {
+  const urls = await collectStyleUrls(server, entries);
+  const styles = await Promise.all(
+    urls.map(async (url) => {
+      const res = await server.transformRequest(url + "?direct");
+      return res?.code;
+    }),
+  );
+  return styles.filter(Boolean).join("\n\n");
+}
+
+export async function collectStyleUrls(
+  server: ViteDevServer,
+  entries: string[],
+) {
   const visited = new Set<string>();
 
   async function traverse(url: string) {
@@ -27,20 +42,7 @@ export async function collectStyle(server: ViteDevServer, entries: string[]) {
   // traverse
   await Promise.all(entries.map((url) => traverse(url)));
 
-  const styles = await Promise.all(
-    [...visited].map(async (url) => {
-      if (!url.match(CSS_LANGS_RE)) {
-        return;
-      }
-      const mod = await server.ssrLoadModule(url);
-      if ("default" in mod && typeof mod["default"] === "string") {
-        return mod["default"];
-      }
-      return;
-    }),
-  );
-
-  return styles.filter(Boolean).join("\n");
+  return [...visited].filter((url) => url.match(CSS_LANGS_RE));
 }
 
 // cf. https://github.com/vitejs/vite/blob/d6bde8b03d433778aaed62afc2be0630c8131908/packages/vite/src/node/constants.ts#L49C23-L50