fix: transform css in client env

hi-ogawa · Apr 28, 2024 · 684e47c · 684e47c
1 parent 90043f9
commit 684e47c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 18 deletions.
diff --git a/examples/react-server/src/features/bootstrap/css.ts b/examples/react-server/src/features/bootstrap/css.ts
@@ -18,6 +18,7 @@ export function vitePluginSsrCss(): PluginOption {
           if (req.url === `/@id/__x00__${SSR_CSS_ENTRY}`) {
             const { moduleGraph } = $__global.server.environments["client"];
             const mod = moduleGraph.getModuleById(`\0${SSR_CSS_ENTRY}?direct`);
+            console.log("[invalidateModule]", [req.url, !!mod]);
             if (mod) {
               moduleGraph.invalidateModule(mod);
             }
@@ -27,45 +28,48 @@ export function vitePluginSsrCss(): PluginOption {
       },
     },
     createVirtualPlugin("ssr-css.css?direct", async () => {
+      // collect css in react-server module graph, but evaluate css in client
+      const clientEnv = $__global.server.environments["client"];
+      const reactServerEnv = $__global.server.environments["react-server"];
       const styles = await Promise.all([
         `/****** react-server ********/`,
-        collectStyle($__global.server.environments["react-server"], [
-          "/src/entry-react-server",
-        ]),
+        collectStyle(clientEnv, reactServerEnv, ["/src/entry-react-server"]),
         `/****** client **************/`,
-        collectStyle($__global.server.environments["client"], [
-          "/src/entry-client",
-        ]),
+        collectStyle(clientEnv, clientEnv, ["/src/entry-client"]),
       ]);
       return styles.join("\n\n");
     }),
   ];
 }
 
-async function collectStyle(server: DevEnvironment, entries: string[]) {
-  const urls = await collectStyleUrls(server, entries);
+async function collectStyle(
+  cssEnv: DevEnvironment,
+  moduleEnv: DevEnvironment,
+  entries: string[],
+) {
+  const urls = await collectStyleUrls(moduleEnv, entries);
   const codes = await Promise.all(
     urls.map(async (url) => {
-      const res = await server.transformRequest(url + "?direct");
+      const res = await cssEnv.transformRequest(url + "?direct");
       return [`/*** ${url} ***/`, res?.code];
     }),
   );
   return codes.flat().filter(Boolean).join("\n\n");
 }
 
 async function collectStyleUrls(
-  server: DevEnvironment,
+  devEnv: DevEnvironment,
   entries: string[],
 ): Promise<string[]> {
   const visited = new Set<string>();
 
   async function traverse(url: string) {
-    const [, id] = await server.moduleGraph.resolveUrl(url);
+    const [, id] = await devEnv.moduleGraph.resolveUrl(url);
     if (visited.has(id)) {
       return;
     }
     visited.add(id);
-    const mod = server.moduleGraph.getModuleById(id);
+    const mod = devEnv.moduleGraph.getModuleById(id);
     if (!mod) {
       return;
     }
@@ -75,7 +79,7 @@ async function collectStyleUrls(
   }
 
   // ensure vite's import analysis is ready _only_ for top entries to not go too aggresive
-  await Promise.all(entries.map((e) => server.transformRequest(e)));
+  await Promise.all(entries.map((e) => devEnv.transformRequest(e)));
 
   // traverse
   await Promise.all(entries.map((url) => traverse(url)));

diff --git a/examples/react-server/src/features/bootstrap/plugin.ts b/examples/react-server/src/features/bootstrap/plugin.ts
@@ -34,7 +34,6 @@ export function vitePluginEntryBootstrap(): PluginOption {
       if ($__global.server) {
         let { head } = await getIndexHtmlTransform($__global.server);
         head += [
-          "",
           `<link rel="stylesheet" href="/@id/__x00__${SSR_CSS_ENTRY}" />`,
         ].join("\n");
         ssrAssets = {

diff --git a/examples/react-server/src/routes/_client.tsx b/examples/react-server/src/routes/_client.tsx
@@ -16,8 +16,12 @@ export function ClientComponent() {
       <h4>Hello Client Component</h4>
       <div data-hydrated={hydrated}>hydrated: {String(hydrated)}</div>
       <div>Count: {count}</div>
-      <button onClick={() => setCount((v) => v - 1)}>-1</button>
-      <button onClick={() => setCount((v) => v + 1)}>+1</button>
+      <button className="btn" onClick={() => setCount((v) => v - 1)}>
+        -1
+      </button>
+      <button className="btn" onClick={() => setCount((v) => v + 1)}>
+        +1
+      </button>
     </div>
   );
 }

diff --git a/examples/react-server/src/routes/_server.css b/examples/react-server/src/routes/_server.css
@@ -0,0 +1,27 @@
+/* based on https://github.com/remix-run/remix/blob/4a23e6e3a861238ea5ad285c7d436102bdd43564/templates/remix-tutorial/app/app.css#L32 */
+
+.btn {
+  font-size: 1rem;
+  font-family: inherit;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  box-shadow:
+    0 0px 1px hsla(0, 0%, 0%, 0.2),
+    0 1px 2px hsla(0, 0%, 0%, 0.2);
+  background-color: white;
+  line-height: 1.5;
+  margin: 0.4rem;
+  font-weight: 500;
+}
+
+.btn:hover {
+  box-shadow:
+    0 0px 1px hsla(0, 0%, 0%, 0.6),
+    0 1px 2px hsla(0, 0%, 0%, 0.2);
+}
+
+.btn:active {
+  box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.4);
+  transform: translateY(1px);
+}
diff --git a/examples/react-server/src/routes/page.tsx b/examples/react-server/src/routes/page.tsx
@@ -1,3 +1,4 @@
+import "./_server.css";
 import { changeCounter, getCounter } from "./_action";
 import { ClientComponent, UseActionStateDemo } from "./_client";
 
@@ -35,10 +36,10 @@ function ServerActionDemo() {
       <h4>Hello Server Action</h4>
       <form action={changeCounter}>
         <div>Count: {getCounter()}</div>
-        <button name="value" value={-1}>
+        <button className="btn" name="value" value={-1}>
           -1
         </button>
-        <button name="value" value={+1}>
+        <button className="btn" name="value" value={+1}>
           +1
         </button>
       </form>