Get critical CSS in dev from client env (#13503)

Author: markdalgleish

.changeset/proud-needles-destroy.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+When extracting critical CSS during development, ensure it's loaded from the client environment to avoid issues with plugins that handle the SSR environment differently

packages/react-router-dev/vite/plugin.ts

@@ -39,7 +39,11 @@ import type { Cache } from "./cache";
 import { generate, parse } from "./babel";
 import type { NodeRequestHandler } from "./node-adapter";
 import { fromNodeRequest, toNodeRequest } from "./node-adapter";
-import { getStylesForPathname, isCssModulesFile } from "./styles";
+import {
+  getCssStringFromViteDevModuleCode,
+  getStylesForPathname,
+  isCssModulesFile,
+} from "./styles";
 import * as VirtualModule from "./virtual-module";
 import { resolveFileUrl } from "./resolve-file-url";
 import { combineURLs } from "./combine-urls";
@@ -136,10 +140,7 @@ exports are only ever used on the server. Without this optimization we can't
 tree-shake any unused custom exports because routes are entry points. */
 const BUILD_CLIENT_ROUTE_QUERY_STRING = "?__react-router-build-client-route";
 
-export type EnvironmentName =
-  | "client"
-  | SsrEnvironmentName
-  | CssDevHelperEnvironmentName;
+export type EnvironmentName = "client" | SsrEnvironmentName;
 
 const SSR_BUNDLE_PREFIX = "ssrBundle_";
 type SsrBundleEnvironmentName = `${typeof SSR_BUNDLE_PREFIX}${string}`;
@@ -151,16 +152,6 @@ function isSsrBundleEnvironmentName(
   return name.startsWith(SSR_BUNDLE_PREFIX);
 }
 
-// We use a separate environment for loading the critical CSS during
-// development. This is because "ssrLoadModule" isn't available if the "ssr"
-// environment has been defined by another plugin (e.g.
-// vite-plugin-cloudflare) as a custom Vite.DevEnvironment rather than a
-// Vite.RunnableDevEnvironment:
-// https://vite.dev/guide/api-environment-frameworks.html#runtime-agnostic-ssr
-const CSS_DEV_HELPER_ENVIRONMENT_NAME =
-  "__react_router_css_dev_helper__" as const;
-type CssDevHelperEnvironmentName = typeof CSS_DEV_HELPER_ENVIRONMENT_NAME;
-
 type EnvironmentOptions = Pick<Vite.EnvironmentOptions, "build" | "resolve">;
 
 type EnvironmentOptionsResolver = (options: {
@@ -1121,40 +1112,20 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
       return cssModulesManifest[dep.file];
     }
 
-    const vite = getVite();
-    const viteMajor = parseInt(vite.version.split(".")[0], 10);
-
-    const url =
-      viteMajor >= 6
-        ? // We need the ?inline query in Vite v6 when loading CSS in SSR
-          // since it does not expose the default export for CSS in a
-          // server environment. This is to align with non-SSR
-          // environments. For backwards compatibility with v5 we keep
-          // using the URL without ?inline query because the HMR code was
-          // relying on the implicit SSR-client module graph relationship.
-          injectQuery(dep.url, "inline")
-        : dep.url;
-
-    let cssMod: unknown;
-    if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) {
-      const cssDevHelperEnvironment =
-        viteDevServer.environments[CSS_DEV_HELPER_ENVIRONMENT_NAME];
-      invariant(cssDevHelperEnvironment, "Missing CSS dev helper environment");
-      invariant(vite.isRunnableDevEnvironment(cssDevHelperEnvironment));
-      cssMod = await cssDevHelperEnvironment.runner.import(url);
-    } else {
-      cssMod = await viteDevServer.ssrLoadModule(url);
-    }
-
+    let transformedCssCode = (await viteDevServer.transformRequest(dep.url))
+      ?.code;
     invariant(
-      typeof cssMod === "object" &&
-        cssMod !== null &&
-        "default" in cssMod &&
-        typeof cssMod.default === "string",
+      transformedCssCode,
       `Failed to load CSS for ${dep.file ?? dep.url}`
     );
 
-    return cssMod.default;
+    let cssString = getCssStringFromViteDevModuleCode(transformedCssCode);
+    invariant(
+      typeof cssString === "string",
+      `Failed to extract CSS for ${dep.file ?? dep.url}`
+    );
+
+    return cssString;
   };
 
   return [
@@ -3593,13 +3564,6 @@ export async function getEnvironmentOptionsResolvers(
       });
   }
 
-  if (
-    ctx.reactRouterConfig.future.unstable_viteEnvironmentApi &&
-    viteCommand === "serve"
-  ) {
-    environmentOptionsResolvers[CSS_DEV_HELPER_ENVIRONMENT_NAME] = () => ({});
-  }
-
   return environmentOptionsResolvers;
 }
 

packages/react-router-dev/vite/styles.ts

@@ -6,6 +6,7 @@ import type { ResolvedReactRouterConfig } from "../config/config";
 import type { RouteManifest, RouteManifestEntry } from "../config/routes";
 import type { LoadCssContents } from "./plugin";
 import { resolveFileUrl } from "./resolve-file-url";
+import * as babel from "./babel";
 
 // Style collection logic adapted from solid-start: https://github.com/solidjs/solid-start
 
@@ -248,3 +249,26 @@ export const getStylesForPathname = async ({
 
   return styles;
 };
+
+export const getCssStringFromViteDevModuleCode = (
+  code: string
+): string | undefined => {
+  let cssContent = undefined;
+
+  const ast = babel.parse(code, { sourceType: "module" });
+  babel.traverse(ast, {
+    VariableDeclaration(path) {
+      const declaration = path.node.declarations[0];
+      if (
+        declaration?.id?.type === "Identifier" &&
+        declaration.id.name === "__vite__css" &&
+        declaration.init?.type === "StringLiteral"
+      ) {
+        cssContent = declaration.init.value;
+        path.stop();
+      }
+    },
+  });
+
+  return cssContent;
+};