Inject CSS into server-first routes in RSC Framework Mode (#14192)

Author: markdalgleish

integration/helpers/rsc-vite-framework/package.json

@@ -2,6 +2,7 @@
   "name": "integration-rsc-vite-framework",
   "version": "0.0.0",
   "private": true,
+  "sideEffects": false,
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,6 +18,8 @@
     "@types/node": "^22.13.1",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.5.2",
     "@vitejs/plugin-rsc": "0.4.11",
     "cross-env": "^7.0.3",

integration/helpers/vite.ts

@@ -77,8 +77,10 @@ type ViteConfigBuildArgs = {
 
 type ViteConfigBaseArgs = {
   templateName?: TemplateName;
+  base?: string;
   envDir?: string;
   mdx?: boolean;
+  vanillaExtract?: boolean;
 };
 
 type ViteConfigArgs = (
@@ -140,15 +142,18 @@ export const viteConfig = {
             ].join("\n")
       }
       ${args.mdx ? 'import mdx from "@mdx-js/rollup";' : ""}
+      ${args.vanillaExtract ? 'import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";' : ""}
       import { envOnlyMacros } from "vite-env-only";
       import tsconfigPaths from "vite-tsconfig-paths";
 
       export default async () => ({
         ${args.port ? await viteConfig.server(args) : ""}
         ${viteConfig.build(args)}
+        ${args.base ? `base: "${args.base}",` : ""}
         envDir: ${args.envDir ? `"${args.envDir}"` : "undefined"},
         plugins: [
           ${args.mdx ? "mdx()," : ""}
+          ${args.vanillaExtract ? "vanillaExtractPlugin({ emitCssInSsr: true })," : ""}
           reactRouter(),
           envOnlyMacros(),
           tsconfigPaths()
@@ -331,6 +336,25 @@ export const reactRouterServe = async ({
   return () => serveProc.kill();
 };
 
+export const runStartScript = async ({
+  cwd,
+  port,
+  basename,
+}: {
+  cwd: string;
+  port: number;
+  basename?: string;
+}) => {
+  let nodeBin = process.argv[0];
+  let proc = spawn(nodeBin, ["start.js"], {
+    cwd,
+    stdio: "pipe",
+    env: { NODE_ENV: "production", PORT: port.toFixed(0) },
+  });
+  await waitForServer(proc, { port, basename });
+  return () => proc.kill();
+};
+
 export const wranglerPagesDev = async ({
   cwd,
   port,