@tanstack/start-plugin-core 1.149.1 → 1.149.3

package/dist/esm/dev-server-plugin/dev-styles.d.ts

@@ -1,7 +1,12 @@
 import { ViteDevServer } from 'vite';
+export declare const CSS_MODULES_REGEX: RegExp;
+export declare function normalizeCssModuleCacheKey(idOrFile: string): string;
+export declare function isCssModulesFile(file: string): boolean;
 export interface CollectDevStylesOptions {
     viteDevServer: ViteDevServer;
     entries: Array<string>;
+    /** Cache of CSS modules content captured during transform hook */
+    cssModulesCache?: Record<string, string>;
 }
 /**
  * Collect CSS content from the module graph starting from the given entry points.

package/dist/esm/dev-server-plugin/dev-styles.js

@@ -1,8 +1,20 @@
+import path from "node:path";
 const CSS_FILE_REGEX = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
+const CSS_MODULES_REGEX = /\.module\.(css|less|sass|scss|styl|stylus)(?:$|[?#])/i;
+function normalizeCssModuleCacheKey(idOrFile) {
+  const baseId = idOrFile.split("?")[0].split("#")[0];
+  return baseId.replace(/\\/g, "/");
+}
 const CSS_SIDE_EFFECT_FREE_PARAMS = ["url", "inline", "raw", "inline-css"];
+const VITE_CSS_REGEX = /const\s+__vite__css\s*=\s*["'`]([\s\S]*?)["'`]/;
+const ESCAPE_CSS_COMMENT_START_REGEX = /\/\*/g;
+const ESCAPE_CSS_COMMENT_END_REGEX = /\*\//g;
 function isCssFile(file) {
   return CSS_FILE_REGEX.test(file);
 }
+function isCssModulesFile(file) {
+  return CSS_MODULES_REGEX.test(file);
+}
 function hasCssSideEffectFreeParam(url) {
   const queryString = url.split("?")[1];
   if (!queryString) return false;
@@ -11,86 +23,131 @@ function hasCssSideEffectFreeParam(url) {
     (param) => params.get(param) === "" && !url.includes(`?${param}=`) && !url.includes(`&${param}=`)
   );
 }
+function resolveDevUrl(rootDirectory, filePath) {
+  const normalizedPath = filePath.replace(/\\/g, "/");
+  const relativePath = path.posix.relative(
+    rootDirectory.replace(/\\/g, "/"),
+    normalizedPath
+  );
+  const isWithinRoot = !relativePath.startsWith("..") && !path.isAbsolute(relativePath);
+  if (isWithinRoot) {
+    return path.posix.join("/", relativePath);
+  }
+  return path.posix.join("/@fs", normalizedPath);
+}
 async function collectDevStyles(opts) {
-  const { viteDevServer, entries } = opts;
+  const { viteDevServer, entries, cssModulesCache = {} } = opts;
   const styles = /* @__PURE__ */ new Map();
   const visited = /* @__PURE__ */ new Set();
-  for (const entry of entries) {
-    const normalizedPath = entry.replace(/\\/g, "/");
-    let node = viteDevServer.moduleGraph.getModuleById(normalizedPath);
-    if (!node) {
-      try {
-        await viteDevServer.transformRequest(normalizedPath);
-      } catch (err) {
+  const rootDirectory = viteDevServer.config.root;
+  await Promise.all(
+    entries.map(
+      (entry) => processEntry(viteDevServer, resolveDevUrl(rootDirectory, entry), visited)
+    )
+  );
+  const cssPromises = [];
+  for (const dep of visited) {
+    if (hasCssSideEffectFreeParam(dep.url)) {
+      continue;
+    }
+    if (dep.file && isCssModulesFile(dep.file)) {
+      const css = cssModulesCache[normalizeCssModuleCacheKey(dep.file)];
+      if (!css) {
+        throw new Error(
+          `[tanstack-start] Missing CSS module in cache: ${dep.file}`
+        );
       }
-      node = viteDevServer.moduleGraph.getModuleById(normalizedPath);
+      styles.set(dep.url, css);
+      continue;
+    }
+    const fileOrUrl = dep.file ?? dep.url;
+    if (!isCssFile(fileOrUrl)) {
+      continue;
     }
-    if (node) {
-      await crawlModuleForCss(viteDevServer, node, visited, styles);
+    cssPromises.push(
+      fetchCssFromModule(viteDevServer, dep).then(
+        (css) => css ? [dep.url, css] : null
+      )
+    );
+  }
+  const cssResults = await Promise.all(cssPromises);
+  for (const result of cssResults) {
+    if (result) {
+      styles.set(result[0], result[1]);
     }
   }
   if (styles.size === 0) return void 0;
-  return Array.from(styles.entries()).map(([fileName, css]) => {
-    const escapedFileName = fileName.replace(/\/\*/g, "/\\*").replace(/\*\//g, "*\\/");
-    return `
+  const parts = [];
+  for (const [fileName, css] of styles.entries()) {
+    const escapedFileName = fileName.replace(ESCAPE_CSS_COMMENT_START_REGEX, "/\\*").replace(ESCAPE_CSS_COMMENT_END_REGEX, "*\\/");
+    parts.push(`
 /* ${escapedFileName} */
-${css}`;
-  }).join("\n");
+${css}`);
+  }
+  return parts.join("\n");
 }
-async function crawlModuleForCss(vite, node, visited, styles) {
-  if (visited.has(node)) return;
-  visited.add(node);
-  const branches = [];
-  if (!node.ssrTransformResult) {
+async function processEntry(viteDevServer, entryUrl, visited) {
+  let node = await viteDevServer.moduleGraph.getModuleByUrl(entryUrl);
+  if (!node?.ssrTransformResult) {
     try {
-      await vite.transformRequest(node.url, { ssr: true });
-      const updatedNode = await vite.moduleGraph.getModuleByUrl(node.url);
-      if (updatedNode) {
-        node = updatedNode;
-      }
+      await viteDevServer.transformRequest(entryUrl);
     } catch {
     }
+    node = await viteDevServer.moduleGraph.getModuleByUrl(entryUrl);
   }
-  if (node.file && isCssFile(node.file) && !hasCssSideEffectFreeParam(node.url)) {
-    const css = await loadCssContent(vite, node);
-    if (css) {
-      styles.set(node.url, css);
-    }
+  if (!node || visited.has(node)) return;
+  visited.add(node);
+  await findModuleDeps(viteDevServer, node, visited);
+}
+async function findModuleDeps(viteDevServer, node, visited) {
+  const deps = node.ssrTransformResult?.deps ?? node.transformResult?.deps ?? null;
+  const importedModules = node.importedModules;
+  if ((!deps || deps.length === 0) && importedModules.size === 0) {
+    return;
   }
-  const depsFromSsr = node.ssrTransformResult?.deps ?? [];
-  const urlsToVisit = new Set(depsFromSsr);
-  for (const importedNode of node.importedModules) {
-    if (importedNode.file && isCssFile(importedNode.file)) {
-      branches.push(crawlModuleForCss(vite, importedNode, visited, styles));
-    } else if (!urlsToVisit.has(importedNode.url)) {
-      urlsToVisit.add(importedNode.url);
+  const branches = [];
+  if (deps) {
+    for (const depUrl of deps) {
+      const dep = await viteDevServer.moduleGraph.getModuleByUrl(depUrl);
+      if (!dep) continue;
+      if (visited.has(dep)) continue;
+      visited.add(dep);
+      branches.push(findModuleDeps(viteDevServer, dep, visited));
     }
   }
-  for (const depUrl of urlsToVisit) {
-    branches.push(
-      (async () => {
-        const depNode = await vite.moduleGraph.getModuleByUrl(depUrl);
-        if (depNode) {
-          await crawlModuleForCss(vite, depNode, visited, styles);
-        }
-      })()
-    );
+  for (const depNode of importedModules) {
+    if (visited.has(depNode)) continue;
+    visited.add(depNode);
+    branches.push(findModuleDeps(viteDevServer, depNode, visited));
+  }
+  if (branches.length === 1) {
+    await branches[0];
+    return;
   }
   await Promise.all(branches);
 }
-async function loadCssContent(vite, node) {
-  const transformResult = await vite.transformRequest(node.url);
-  if (!transformResult?.code) return void 0;
-  return extractCssFromViteModule(transformResult.code);
-}
-function extractCssFromViteModule(code) {
-  const match = code.match(/const\s+__vite__css\s*=\s*["'`]([\s\S]*?)["'`]/);
-  if (match?.[1]) {
-    return match[1].replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+async function fetchCssFromModule(viteDevServer, node) {
+  const cachedCode = node.transformResult?.code ?? node.ssrTransformResult?.code;
+  if (cachedCode) {
+    return extractCssFromCode(cachedCode);
   }
-  return void 0;
+  try {
+    const transformResult = await viteDevServer.transformRequest(node.url);
+    if (!transformResult?.code) return void 0;
+    return extractCssFromCode(transformResult.code);
+  } catch {
+    return void 0;
+  }
+}
+function extractCssFromCode(code) {
+  const match = VITE_CSS_REGEX.exec(code);
+  if (!match?.[1]) return void 0;
+  return match[1].replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
 }
 export {
-  collectDevStyles
+  CSS_MODULES_REGEX,
+  collectDevStyles,
+  isCssModulesFile,
+  normalizeCssModuleCacheKey
 };
 //# sourceMappingURL=dev-styles.js.map

package/dist/esm/dev-server-plugin/dev-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dev-styles.js","sources":["../../../src/dev-server-plugin/dev-styles.ts"],"sourcesContent":["/**\n * CSS collection for dev mode.\n * Crawls the Vite module graph to collect CSS from the router entry and all its dependencies.\n */\nimport type { ModuleNode, ViteDevServer } from 'vite'\n\n// CSS file extensions supported by Vite\nconst CSS_FILE_REGEX =\n  /\\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\\?)/\n// URL params that indicate CSS should not be injected (e.g., ?url, ?inline)\nconst CSS_SIDE_EFFECT_FREE_PARAMS = ['url', 'inline', 'raw', 'inline-css']\n\nfunction isCssFile(file: string): boolean {\n  return CSS_FILE_REGEX.test(file)\n}\n\nfunction hasCssSideEffectFreeParam(url: string): boolean {\n  const queryString = url.split('?')[1]\n  if (!queryString) return false\n\n  const params = new URLSearchParams(queryString)\n  return CSS_SIDE_EFFECT_FREE_PARAMS.some(\n    (param) =>\n      params.get(param) === '' &&\n      !url.includes(`?${param}=`) &&\n      !url.includes(`&${param}=`),\n  )\n}\n\nexport interface CollectDevStylesOptions {\n  viteDevServer: ViteDevServer\n  entries: Array<string>\n}\n\n/**\n * Collect CSS content from the module graph starting from the given entry points.\n */\nexport async function collectDevStyles(\n  opts: CollectDevStylesOptions,\n): Promise<string | undefined> {\n  const { viteDevServer, entries } = opts\n  const styles: Map<string, string> = new Map()\n  const visited = new Set<ModuleNode>()\n\n  for (const entry of entries) {\n    const normalizedPath = entry.replace(/\\\\/g, '/')\n    let node = viteDevServer.moduleGraph.getModuleById(normalizedPath)\n\n    // If module isn't in the graph yet, request it to trigger transform\n    if (!node) {\n      try {\n        await viteDevServer.transformRequest(normalizedPath)\n      } catch (err) {\n        // Ignore - the module might not exist yet\n      }\n      node = viteDevServer.moduleGraph.getModuleById(normalizedPath)\n    }\n\n    if (node) {\n      await crawlModuleForCss(viteDevServer, node, visited, styles)\n    }\n  }\n\n  if (styles.size === 0) return undefined\n\n  return Array.from(styles.entries())\n    .map(([fileName, css]) => {\n      const escapedFileName = fileName\n        .replace(/\\/\\*/g, '/\\\\*')\n        .replace(/\\*\\//g, '*\\\\/')\n      return `\\n/* ${escapedFileName} */\\n${css}`\n    })\n    .join('\\n')\n}\n\nasync function crawlModuleForCss(\n  vite: ViteDevServer,\n  node: ModuleNode,\n  visited: Set<ModuleNode>,\n  styles: Map<string, string>,\n): Promise<void> {\n  if (visited.has(node)) return\n  visited.add(node)\n\n  const branches: Array<Promise<void>> = []\n\n  // Ensure the module has been transformed to populate its deps\n  // This is important for code-split modules that may not have been processed yet\n  if (!node.ssrTransformResult) {\n    try {\n      await vite.transformRequest(node.url, { ssr: true })\n      // Re-fetch the node to get updated state\n      const updatedNode = await vite.moduleGraph.getModuleByUrl(node.url)\n      if (updatedNode) {\n        node = updatedNode\n      }\n    } catch {\n      // Ignore transform errors - the module might not be transformable\n    }\n  }\n\n  // Check if this is a CSS file\n  if (\n    node.file &&\n    isCssFile(node.file) &&\n    !hasCssSideEffectFreeParam(node.url)\n  ) {\n    const css = await loadCssContent(vite, node)\n    if (css) {\n      styles.set(node.url, css)\n    }\n  }\n\n  // Crawl dependencies using ssrTransformResult.deps and importedModules\n  // We need both because:\n  // 1. ssrTransformResult.deps has resolved URLs for SSR dependencies\n  // 2. importedModules may contain CSS files and code-split modules not in SSR deps\n  const depsFromSsr = node.ssrTransformResult?.deps ?? []\n  const urlsToVisit = new Set<string>(depsFromSsr)\n\n  // Check importedModules for CSS files and additional modules\n  for (const importedNode of node.importedModules) {\n    if (importedNode.file && isCssFile(importedNode.file)) {\n      // CSS files often don't appear in ssrTransformResult.deps, add them explicitly\n      branches.push(crawlModuleForCss(vite, importedNode, visited, styles))\n    } else if (!urlsToVisit.has(importedNode.url)) {\n      // Also add non-CSS imports that aren't in SSR deps (e.g., code-split modules)\n      urlsToVisit.add(importedNode.url)\n    }\n  }\n\n  for (const depUrl of urlsToVisit) {\n    branches.push(\n      (async () => {\n        const depNode = await vite.moduleGraph.getModuleByUrl(depUrl)\n        if (depNode) {\n          await crawlModuleForCss(vite, depNode, visited, styles)\n        }\n      })(),\n    )\n  }\n\n  await Promise.all(branches)\n}\n\nasync function loadCssContent(\n  vite: ViteDevServer,\n  node: ModuleNode,\n): Promise<string | undefined> {\n  // For ALL CSS files (including CSS modules), get the transformed content\n  // and extract __vite__css. Vite's transform puts the final CSS (with hashed\n  // class names for modules) into the __vite__css variable.\n  const transformResult = await vite.transformRequest(node.url)\n  if (!transformResult?.code) return undefined\n\n  // Extract CSS content from Vite's transformed module\n  return extractCssFromViteModule(transformResult.code)\n}\n\n/**\n * Extract CSS string from Vite's transformed CSS module code.\n * Vite wraps CSS content in a JS module with __vite__css variable.\n */\nfunction extractCssFromViteModule(code: string): string | undefined {\n  // Match: const __vite__css = \"...\"\n  const match = code.match(/const\\s+__vite__css\\s*=\\s*[\"'`]([\\s\\S]*?)[\"'`]/)\n  if (match?.[1]) {\n    // Unescape the string\n    return match[1]\n      .replace(/\\\\n/g, '\\n')\n      .replace(/\\\\t/g, '\\t')\n      .replace(/\\\\\"/g, '\"')\n      .replace(/\\\\\\\\/g, '\\\\')\n  }\n  return undefined\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dev-styles.js","sources":["../../../src/dev-server-plugin/dev-styles.ts"],"sourcesContent":["/**\n * CSS collection for dev mode.\n * Crawls the Vite module graph to collect CSS from the router entry and all its dependencies.\n */\nimport path from 'node:path'\nimport type { ModuleNode, ViteDevServer } from 'vite'\n\n// CSS file extensions supported by Vite\nconst CSS_FILE_REGEX =\n  /\\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\\?)/\n// CSS modules file pattern - exported for use in plugin hook filters\n// Note: allow query/hash suffix since Vite ids often include them.\nexport const CSS_MODULES_REGEX =\n  /\\.module\\.(css|less|sass|scss|styl|stylus)(?:$|[?#])/i\n\nexport function normalizeCssModuleCacheKey(idOrFile: string): string {\n  const baseId = idOrFile.split('?')[0]!.split('#')[0]!\n  return baseId.replace(/\\\\/g, '/')\n}\n// URL params that indicate CSS should not be injected (e.g., ?url, ?inline)\nconst CSS_SIDE_EFFECT_FREE_PARAMS = ['url', 'inline', 'raw', 'inline-css']\n\nconst VITE_CSS_REGEX = /const\\s+__vite__css\\s*=\\s*[\"'`]([\\s\\S]*?)[\"'`]/\n\nconst ESCAPE_CSS_COMMENT_START_REGEX = /\\/\\*/g\nconst ESCAPE_CSS_COMMENT_END_REGEX = /\\*\\//g\n\nfunction isCssFile(file: string): boolean {\n  return CSS_FILE_REGEX.test(file)\n}\n\nexport function isCssModulesFile(file: string): boolean {\n  return CSS_MODULES_REGEX.test(file)\n}\n\nfunction hasCssSideEffectFreeParam(url: string): boolean {\n  const queryString = url.split('?')[1]\n  if (!queryString) return false\n\n  const params = new URLSearchParams(queryString)\n  return CSS_SIDE_EFFECT_FREE_PARAMS.some(\n    (param) =>\n      params.get(param) === '' &&\n      !url.includes(`?${param}=`) &&\n      !url.includes(`&${param}=`),\n  )\n}\n\n/**\n * Resolve a file path to a Vite dev server URL.\n * Files within the root directory use relative paths, files outside use /@fs prefix.\n */\nfunction resolveDevUrl(rootDirectory: string, filePath: string): string {\n  const normalizedPath = filePath.replace(/\\\\/g, '/')\n  const relativePath = path.posix.relative(\n    rootDirectory.replace(/\\\\/g, '/'),\n    normalizedPath,\n  )\n  const isWithinRoot =\n    !relativePath.startsWith('..') && !path.isAbsolute(relativePath)\n\n  if (isWithinRoot) {\n    return path.posix.join('/', relativePath)\n  }\n  // Files outside root need /@fs prefix\n  return path.posix.join('/@fs', normalizedPath)\n}\n\nexport interface CollectDevStylesOptions {\n  viteDevServer: ViteDevServer\n  entries: Array<string>\n  /** Cache of CSS modules content captured during transform hook */\n  cssModulesCache?: Record<string, string>\n}\n\n/**\n * Collect CSS content from the module graph starting from the given entry points.\n */\nexport async function collectDevStyles(\n  opts: CollectDevStylesOptions,\n): Promise<string | undefined> {\n  const { viteDevServer, entries, cssModulesCache = {} } = opts\n  const styles: Map<string, string> = new Map()\n  const visited = new Set<ModuleNode>()\n\n  const rootDirectory = viteDevServer.config.root\n\n  // Process entries in parallel - each entry is independent\n  await Promise.all(\n    entries.map((entry) =>\n      processEntry(viteDevServer, resolveDevUrl(rootDirectory, entry), visited),\n    ),\n  )\n\n  // Collect CSS from visited modules in parallel\n  const cssPromises: Array<Promise<readonly [string, string] | null>> = []\n\n  for (const dep of visited) {\n    if (hasCssSideEffectFreeParam(dep.url)) {\n      continue\n    }\n\n    if (dep.file && isCssModulesFile(dep.file)) {\n      const css = cssModulesCache[normalizeCssModuleCacheKey(dep.file)]\n      if (!css) {\n        throw new Error(\n          `[tanstack-start] Missing CSS module in cache: ${dep.file}`,\n        )\n      }\n      styles.set(dep.url, css)\n      continue\n    }\n\n    const fileOrUrl = dep.file ?? dep.url\n    if (!isCssFile(fileOrUrl)) {\n      continue\n    }\n\n    // Load regular CSS files in parallel\n    cssPromises.push(\n      fetchCssFromModule(viteDevServer, dep).then((css) =>\n        css ? ([dep.url, css] as const) : null,\n      ),\n    )\n  }\n\n  // Wait for all CSS loads to complete\n  const cssResults = await Promise.all(cssPromises)\n  for (const result of cssResults) {\n    if (result) {\n      styles.set(result[0], result[1])\n    }\n  }\n\n  if (styles.size === 0) return undefined\n\n  const parts: Array<string> = []\n  for (const [fileName, css] of styles.entries()) {\n    const escapedFileName = fileName\n      .replace(ESCAPE_CSS_COMMENT_START_REGEX, '/\\\\*')\n      .replace(ESCAPE_CSS_COMMENT_END_REGEX, '*\\\\/')\n    parts.push(`\\n/* ${escapedFileName} */\\n${css}`)\n  }\n  return parts.join('\\n')\n}\n\n/**\n * Process an entry URL: transform it if needed, get the module node, and crawl its dependencies.\n */\nasync function processEntry(\n  viteDevServer: ViteDevServer,\n  entryUrl: string,\n  visited: Set<ModuleNode>,\n): Promise<void> {\n  let node = await viteDevServer.moduleGraph.getModuleByUrl(entryUrl)\n\n  // Only transform if not yet SSR-transformed (need ssrTransformResult.deps for crawling)\n  if (!node?.ssrTransformResult) {\n    try {\n      await viteDevServer.transformRequest(entryUrl)\n    } catch {\n      // ignore - module might not exist yet\n    }\n    node = await viteDevServer.moduleGraph.getModuleByUrl(entryUrl)\n  }\n\n  if (!node || visited.has(node)) return\n\n  visited.add(node)\n  await findModuleDeps(viteDevServer, node, visited)\n}\n\n/**\n * Find all module dependencies by crawling the module graph.\n * Uses transformResult.deps for URL-based lookups (parallel) and\n * importedModules for already-resolved nodes (parallel).\n */\nasync function findModuleDeps(\n  viteDevServer: ViteDevServer,\n  node: ModuleNode,\n  visited: Set<ModuleNode>,\n): Promise<void> {\n  // Note: caller must add node to visited BEFORE calling this function\n  // to prevent race conditions with parallel traversal\n\n  // Process deps from transformResult if available (URLs including bare imports)\n  const deps =\n    node.ssrTransformResult?.deps ?? node.transformResult?.deps ?? null\n\n  const importedModules = node.importedModules\n\n  // Fast path: no deps and no imports\n  if ((!deps || deps.length === 0) && importedModules.size === 0) {\n    return\n  }\n\n  // Build branches only when needed (avoid array allocation on leaf nodes)\n  const branches: Array<Promise<void>> = []\n\n  if (deps) {\n    for (const depUrl of deps) {\n      const dep = await viteDevServer.moduleGraph.getModuleByUrl(depUrl)\n      if (!dep) continue\n\n      if (visited.has(dep)) continue\n      visited.add(dep)\n      branches.push(findModuleDeps(viteDevServer, dep, visited))\n    }\n  }\n\n  // ALWAYS also traverse importedModules - this catches:\n  // - Code-split chunks (e.g. ?tsr-split=component) not in deps\n  // - Already-resolved nodes\n  for (const depNode of importedModules) {\n    if (visited.has(depNode)) continue\n    visited.add(depNode)\n    branches.push(findModuleDeps(viteDevServer, depNode, visited))\n  }\n\n  if (branches.length === 1) {\n    await branches[0]\n    return\n  }\n\n  await Promise.all(branches)\n}\n\nasync function fetchCssFromModule(\n  viteDevServer: ViteDevServer,\n  node: ModuleNode,\n): Promise<string | undefined> {\n  // Use cached transform result if available\n  const cachedCode = node.transformResult?.code ?? node.ssrTransformResult?.code\n  if (cachedCode) {\n    return extractCssFromCode(cachedCode)\n  }\n\n  // Otherwise request a fresh transform\n  try {\n    const transformResult = await viteDevServer.transformRequest(node.url)\n    if (!transformResult?.code) return undefined\n\n    return extractCssFromCode(transformResult.code)\n  } catch {\n    // Preprocessor partials (e.g., Sass files with mixins) can't compile in isolation.\n    // The root stylesheet that @imports them will contain the compiled CSS.\n    return undefined\n  }\n}\n\nfunction extractCssFromCode(code: string): string | undefined {\n  const match = VITE_CSS_REGEX.exec(code)\n  if (!match?.[1]) return undefined\n\n  return match[1]\n    .replace(/\\\\n/g, '\\n')\n    .replace(/\\\\t/g, '\\t')\n    .replace(/\\\\\"/g, '\"')\n    .replace(/\\\\\\\\/g, '\\\\')\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/dev-server-plugin/plugin.js

@@ -4,18 +4,28 @@ import { NodeRequest, sendNodeResponse } from "srvx/node";
 import { VITE_ENVIRONMENT_NAMES, ENTRY_POINTS } from "../constants.js";
 import { resolveViteId } from "../utils.js";
 import { extractHtmlScripts } from "./extract-html-scripts.js";
-import { collectDevStyles } from "./dev-styles.js";
+import { CSS_MODULES_REGEX, collectDevStyles, normalizeCssModuleCacheKey } from "./dev-styles.js";
 function devServerPlugin({
   getConfig
 }) {
   let isTest = false;
   let injectedHeadScripts;
+  const cssModulesCache = {};
   return [
     {
       name: "tanstack-start-core:dev-server",
       config(_userConfig, { mode }) {
         isTest = isTest ? isTest : mode === "test";
       },
+      // Capture CSS modules content during transform
+      transform: {
+        filter: {
+          id: CSS_MODULES_REGEX
+        },
+        handler(code, id) {
+          cssModulesCache[normalizeCssModuleCacheKey(id)] = code;
+        }
+      },
       async configureServer(viteDevServer) {
         if (isTest) {
           return;
@@ -27,6 +37,43 @@ function devServerPlugin({
         );
         const scripts = extractHtmlScripts(transformedHtml);
         injectedHeadScripts = scripts.flatMap((script) => script.content ?? []).join(";");
+        viteDevServer.middlewares.use(async (req, res, next) => {
+          const url = req.url ?? "";
+          const pathname = url.split("?")[0];
+          if (!pathname?.endsWith("/@tanstack-start/styles.css")) {
+            return next();
+          }
+          try {
+            const urlObj = new URL(url, "http://localhost");
+            const routesParam = urlObj.searchParams.get("routes");
+            const routeIds = routesParam ? routesParam.split(",") : [];
+            const entries = [];
+            const routesManifest = globalThis.TSS_ROUTES_MANIFEST;
+            if (routesManifest && routeIds.length > 0) {
+              for (const routeId of routeIds) {
+                const route = routesManifest[routeId];
+                if (route?.filePath) {
+                  entries.push(route.filePath);
+                }
+              }
+            }
+            const css = entries.length > 0 ? await collectDevStyles({
+              viteDevServer,
+              entries,
+              cssModulesCache
+            }) : void 0;
+            res.setHeader("Content-Type", "text/css");
+            res.setHeader("Cache-Control", "no-store");
+            res.end(css ?? "");
+          } catch (e) {
+            console.error("[tanstack-start] Error collecting dev styles:", e);
+            res.setHeader("Content-Type", "text/css");
+            res.setHeader("Cache-Control", "no-store");
+            res.end(
+              `/* Error collecting styles: ${e instanceof Error ? e.message : String(e)} */`
+            );
+          }
+        });
         return () => {
           const serverEnv = viteDevServer.environments[VITE_ENVIRONMENT_NAMES.server];
           if (!serverEnv) {
@@ -34,41 +81,6 @@ function devServerPlugin({
               `Server environment ${VITE_ENVIRONMENT_NAMES.server} not found`
             );
           }
-          viteDevServer.middlewares.use(async (req, res, next) => {
-            const url = req.url ?? "";
-            if (!url.startsWith("/@tanstack-start/styles.css")) {
-              return next();
-            }
-            try {
-              const urlObj = new URL(url, "http://localhost");
-              const routesParam = urlObj.searchParams.get("routes");
-              const routeIds = routesParam ? routesParam.split(",") : [];
-              const entries = [];
-              const routesManifest = globalThis.TSS_ROUTES_MANIFEST;
-              if (routesManifest && routeIds.length > 0) {
-                for (const routeId of routeIds) {
-                  const route = routesManifest[routeId];
-                  if (route?.filePath) {
-                    entries.push(route.filePath);
-                  }
-                }
-              }
-              const css = entries.length > 0 ? await collectDevStyles({
-                viteDevServer,
-                entries
-              }) : void 0;
-              res.setHeader("Content-Type", "text/css");
-              res.setHeader("Cache-Control", "no-store");
-              res.end(css ?? "");
-            } catch (e) {
-              console.error("[tanstack-start] Error collecting dev styles:", e);
-              res.setHeader("Content-Type", "text/css");
-              res.setHeader("Cache-Control", "no-store");
-              res.end(
-                `/* Error collecting styles: ${e instanceof Error ? e.message : String(e)} */`
-              );
-            }
-          });
           const { startConfig } = getConfig();
           const installMiddleware = startConfig.vite?.installDevServerMiddleware;
           if (installMiddleware === false) {

package/dist/esm/dev-server-plugin/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["../../../src/dev-server-plugin/plugin.ts"],"sourcesContent":["import { isRunnableDevEnvironment } from 'vite'\nimport { VIRTUAL_MODULES } from '@tanstack/start-server-core'\nimport { NodeRequest, sendNodeResponse } from 'srvx/node'\nimport { ENTRY_POINTS, VITE_ENVIRONMENT_NAMES } from '../constants'\nimport { resolveViteId } from '../utils'\nimport { extractHtmlScripts } from './extract-html-scripts'\nimport { collectDevStyles } from './dev-styles'\nimport type { Connect, DevEnvironment, PluginOption } from 'vite'\nimport type { GetConfigFn } from '../types'\n\nexport function devServerPlugin({\n  getConfig,\n}: {\n  getConfig: GetConfigFn\n}): PluginOption {\n  let isTest = false\n\n  let injectedHeadScripts: string | undefined\n\n  return [\n    {\n      name: 'tanstack-start-core:dev-server',\n      config(_userConfig, { mode }) {\n        isTest = isTest ? isTest : mode === 'test'\n      },\n      async configureServer(viteDevServer) {\n        if (isTest) {\n          return\n        }\n\n        // Extract the scripts that Vite plugins would inject into the initial HTML\n        const templateHtml = `<html><head></head><body></body></html>`\n        const transformedHtml = await viteDevServer.transformIndexHtml(\n          '/',\n          templateHtml,\n        )\n        const scripts = extractHtmlScripts(transformedHtml)\n        injectedHeadScripts = scripts\n          .flatMap((script) => script.content ?? [])\n          .join(';')\n\n        return () => {\n          const serverEnv = viteDevServer.environments[\n            VITE_ENVIRONMENT_NAMES.server\n          ] as DevEnvironment | undefined\n\n          if (!serverEnv) {\n            throw new Error(\n              `Server environment ${VITE_ENVIRONMENT_NAMES.server} not found`,\n            )\n          }\n\n          // CSS middleware is always installed - it doesn't depend on the server environment type\n          // This ensures dev styles work with nitro, cloudflare, and other environments\n          viteDevServer.middlewares.use(async (req, res, next) => {\n            const url = req.url ?? ''\n            if (!url.startsWith('/@tanstack-start/styles.css')) {\n              return next()\n            }\n\n            try {\n              // Parse route IDs from query param\n              const urlObj = new URL(url, 'http://localhost')\n              const routesParam = urlObj.searchParams.get('routes')\n              const routeIds = routesParam ? routesParam.split(',') : []\n\n              // Build entries list from route file paths\n              const entries: Array<string> = []\n\n              // Look up route file paths from manifest\n              // Only routes registered in the manifest are used - this prevents path injection\n              const routesManifest = (globalThis as any).TSS_ROUTES_MANIFEST as\n                | Record<string, { filePath: string; children?: Array<string> }>\n                | undefined\n\n              if (routesManifest && routeIds.length > 0) {\n                for (const routeId of routeIds) {\n                  const route = routesManifest[routeId]\n                  if (route?.filePath) {\n                    entries.push(route.filePath)\n                  }\n                }\n              }\n\n              const css =\n                entries.length > 0\n                  ? await collectDevStyles({\n                      viteDevServer,\n                      entries,\n                    })\n                  : undefined\n\n              res.setHeader('Content-Type', 'text/css')\n              res.setHeader('Cache-Control', 'no-store')\n              res.end(css ?? '')\n            } catch (e) {\n              // Log error but still return valid CSS response to avoid MIME type issues\n              console.error('[tanstack-start] Error collecting dev styles:', e)\n              res.setHeader('Content-Type', 'text/css')\n              res.setHeader('Cache-Control', 'no-store')\n              res.end(\n                `/* Error collecting styles: ${e instanceof Error ? e.message : String(e)} */`,\n              )\n            }\n          })\n\n          const { startConfig } = getConfig()\n          const installMiddleware = startConfig.vite?.installDevServerMiddleware\n          if (installMiddleware === false) {\n            return\n          }\n          if (installMiddleware == undefined) {\n            // do not install middleware in middlewareMode by default\n            if (viteDevServer.config.server.middlewareMode) {\n              return\n            }\n\n            // do not install middleware if SSR env in case another plugin already did\n            if (\n              !isRunnableDevEnvironment(serverEnv) ||\n              // do not check via `isFetchableDevEnvironment` since nitro does implement the `FetchableDevEnvironment` interface but not via inheritance (which this helper checks)\n              'dispatchFetch' in serverEnv\n            ) {\n              return\n            }\n          }\n\n          if (!isRunnableDevEnvironment(serverEnv)) {\n            throw new Error(\n              'cannot install vite dev server middleware for TanStack Start since the SSR environment is not a RunnableDevEnvironment',\n            )\n          }\n\n          viteDevServer.middlewares.use(async (req, res) => {\n            // fix the request URL to match the original URL\n            // otherwise, the request URL will '/index.html'\n            if (req.originalUrl) {\n              req.url = req.originalUrl\n            }\n            const webReq = new NodeRequest({ req, res })\n\n            try {\n              // Import and resolve the request by running the server request entry point\n              // this request entry point must implement the `fetch` API as follows:\n              /**\n               * export default {\n               *  fetch(req: Request): Promise<Response>\n               * }\n               */\n              const serverEntry = await serverEnv.runner.import(\n                ENTRY_POINTS.server,\n              )\n              const webRes = await serverEntry['default'].fetch(webReq)\n\n              return sendNodeResponse(res, webRes)\n            } catch (e) {\n              console.error(e)\n              try {\n                viteDevServer.ssrFixStacktrace(e as Error)\n              } catch (_e) {}\n\n              if (\n                webReq.headers.get('content-type')?.includes('application/json')\n              ) {\n                return sendNodeResponse(\n                  res,\n                  new Response(\n                    JSON.stringify(\n                      {\n                        status: 500,\n                        error: 'Internal Server Error',\n                        message:\n                          'An unexpected error occurred. Please try again later.',\n                        timestamp: new Date().toISOString(),\n                      },\n                      null,\n                      2,\n                    ),\n                    {\n                      status: 500,\n                      headers: {\n                        'Content-Type': 'application/json',\n                      },\n                    },\n                  ),\n                )\n              }\n\n              return sendNodeResponse(\n                res,\n                new Response(\n                  `\n              <!DOCTYPE html>\n              <html lang=\"en\">\n                <head>\n                  <meta charset=\"UTF-8\" />\n                  <title>Error</title>\n                  <script type=\"module\">\n                    import { ErrorOverlay } from '/@vite/client'\n                    document.body.appendChild(new ErrorOverlay(${JSON.stringify(\n                      prepareError(req, e),\n                    ).replace(/</g, '\\\\u003c')}))\n                  </script>\n                </head>\n                <body>\n                </body>\n              </html>\n            `,\n                  {\n                    status: 500,\n                    headers: {\n                      'Content-Type': 'text/html',\n                    },\n                  },\n                ),\n              )\n            }\n          })\n        }\n      },\n    },\n    {\n      name: 'tanstack-start-core:dev-server:injected-head-scripts',\n      sharedDuringBuild: true,\n      applyToEnvironment: (env) => env.config.consumer === 'server',\n      resolveId: {\n        filter: { id: new RegExp(VIRTUAL_MODULES.injectedHeadScripts) },\n        handler(_id) {\n          return resolveViteId(VIRTUAL_MODULES.injectedHeadScripts)\n        },\n      },\n      load: {\n        filter: {\n          id: new RegExp(resolveViteId(VIRTUAL_MODULES.injectedHeadScripts)),\n        },\n        handler() {\n          const mod = `\n        export const injectedHeadScripts = ${JSON.stringify(injectedHeadScripts) || 'undefined'}`\n          return mod\n        },\n      },\n    },\n  ]\n}\n\n/**\n * Formats error for SSR message in error overlay\n * @param req\n * @param error\n * @returns\n */\nfunction prepareError(req: Connect.IncomingMessage, error: unknown) {\n  const e = error as Error\n  return {\n    message: `An error occurred while server rendering ${req.url}:\\n\\n\\t${\n      typeof e === 'string' ? e : e.message\n    } `,\n    stack: typeof e === 'string' ? '' : e.stack,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"plugin.js","sources":["../../../src/dev-server-plugin/plugin.ts"],"sourcesContent":["import { isRunnableDevEnvironment } from 'vite'\nimport { VIRTUAL_MODULES } from '@tanstack/start-server-core'\nimport { NodeRequest, sendNodeResponse } from 'srvx/node'\nimport { ENTRY_POINTS, VITE_ENVIRONMENT_NAMES } from '../constants'\nimport { resolveViteId } from '../utils'\nimport { extractHtmlScripts } from './extract-html-scripts'\nimport {\n  CSS_MODULES_REGEX,\n  collectDevStyles,\n  normalizeCssModuleCacheKey,\n} from './dev-styles'\nimport type { Connect, DevEnvironment, PluginOption } from 'vite'\nimport type { GetConfigFn } from '../types'\n\nexport function devServerPlugin({\n  getConfig,\n}: {\n  getConfig: GetConfigFn\n}): PluginOption {\n  let isTest = false\n\n  let injectedHeadScripts: string | undefined\n\n  // Cache CSS modules content during transform hook.\n  // For CSS modules, the transform hook receives the raw CSS content before\n  // Vite wraps it in JS. We capture this to use during SSR style collection.\n  const cssModulesCache: Record<string, string> = {}\n\n  return [\n    {\n      name: 'tanstack-start-core:dev-server',\n      config(_userConfig, { mode }) {\n        isTest = isTest ? isTest : mode === 'test'\n      },\n      // Capture CSS modules content during transform\n      transform: {\n        filter: {\n          id: CSS_MODULES_REGEX,\n        },\n        handler(code, id) {\n          cssModulesCache[normalizeCssModuleCacheKey(id)] = code\n        },\n      },\n      async configureServer(viteDevServer) {\n        if (isTest) {\n          return\n        }\n\n        // Extract the scripts that Vite plugins would inject into the initial HTML\n        const templateHtml = `<html><head></head><body></body></html>`\n        const transformedHtml = await viteDevServer.transformIndexHtml(\n          '/',\n          templateHtml,\n        )\n        const scripts = extractHtmlScripts(transformedHtml)\n        injectedHeadScripts = scripts\n          .flatMap((script) => script.content ?? [])\n          .join(';')\n\n        // CSS middleware registered in PRE-PHASE (before Vite's internal middlewares)\n        // This ensures it handles /@tanstack-start/styles.css before any catch-all middleware\n        // from other plugins (like nitro) that may be registered in the post-phase.\n        // This makes the CSS endpoint work regardless of plugin order in the Vite config.\n        // We check pathname.endsWith() to handle basepaths (e.g., /my-app/@tanstack-start/styles.css)\n        // since pre-phase runs before Vite's base middleware strips the basepath.\n        viteDevServer.middlewares.use(async (req, res, next) => {\n          const url = req.url ?? ''\n          const pathname = url.split('?')[0]\n          if (!pathname?.endsWith('/@tanstack-start/styles.css')) {\n            return next()\n          }\n\n          try {\n            // Parse route IDs from query param\n            const urlObj = new URL(url, 'http://localhost')\n            const routesParam = urlObj.searchParams.get('routes')\n            const routeIds = routesParam ? routesParam.split(',') : []\n\n            // Build entries list from route file paths\n            const entries: Array<string> = []\n\n            // Look up route file paths from manifest\n            // Only routes registered in the manifest are used - this prevents path injection\n            const routesManifest = (globalThis as any).TSS_ROUTES_MANIFEST as\n              | Record<string, { filePath: string; children?: Array<string> }>\n              | undefined\n\n            if (routesManifest && routeIds.length > 0) {\n              for (const routeId of routeIds) {\n                const route = routesManifest[routeId]\n                if (route?.filePath) {\n                  entries.push(route.filePath)\n                }\n              }\n            }\n\n            const css =\n              entries.length > 0\n                ? await collectDevStyles({\n                    viteDevServer,\n                    entries,\n                    cssModulesCache,\n                  })\n                : undefined\n\n            res.setHeader('Content-Type', 'text/css')\n            res.setHeader('Cache-Control', 'no-store')\n            res.end(css ?? '')\n          } catch (e) {\n            // Log error but still return valid CSS response to avoid MIME type issues\n            console.error('[tanstack-start] Error collecting dev styles:', e)\n            res.setHeader('Content-Type', 'text/css')\n            res.setHeader('Cache-Control', 'no-store')\n            res.end(\n              `/* Error collecting styles: ${e instanceof Error ? e.message : String(e)} */`,\n            )\n          }\n        })\n\n        return () => {\n          const serverEnv = viteDevServer.environments[\n            VITE_ENVIRONMENT_NAMES.server\n          ] as DevEnvironment | undefined\n\n          if (!serverEnv) {\n            throw new Error(\n              `Server environment ${VITE_ENVIRONMENT_NAMES.server} not found`,\n            )\n          }\n\n          const { startConfig } = getConfig()\n          const installMiddleware = startConfig.vite?.installDevServerMiddleware\n          if (installMiddleware === false) {\n            return\n          }\n          if (installMiddleware == undefined) {\n            // do not install middleware in middlewareMode by default\n            if (viteDevServer.config.server.middlewareMode) {\n              return\n            }\n\n            // do not install middleware if SSR env in case another plugin already did\n            if (\n              !isRunnableDevEnvironment(serverEnv) ||\n              // do not check via `isFetchableDevEnvironment` since nitro does implement the `FetchableDevEnvironment` interface but not via inheritance (which this helper checks)\n              'dispatchFetch' in serverEnv\n            ) {\n              return\n            }\n          }\n\n          if (!isRunnableDevEnvironment(serverEnv)) {\n            throw new Error(\n              'cannot install vite dev server middleware for TanStack Start since the SSR environment is not a RunnableDevEnvironment',\n            )\n          }\n\n          viteDevServer.middlewares.use(async (req, res) => {\n            // fix the request URL to match the original URL\n            // otherwise, the request URL will '/index.html'\n            if (req.originalUrl) {\n              req.url = req.originalUrl\n            }\n            const webReq = new NodeRequest({ req, res })\n\n            try {\n              // Import and resolve the request by running the server request entry point\n              // this request entry point must implement the `fetch` API as follows:\n              /**\n               * export default {\n               *  fetch(req: Request): Promise<Response>\n               * }\n               */\n              const serverEntry = await serverEnv.runner.import(\n                ENTRY_POINTS.server,\n              )\n              const webRes = await serverEntry['default'].fetch(webReq)\n\n              return sendNodeResponse(res, webRes)\n            } catch (e) {\n              console.error(e)\n              try {\n                viteDevServer.ssrFixStacktrace(e as Error)\n              } catch (_e) {}\n\n              if (\n                webReq.headers.get('content-type')?.includes('application/json')\n              ) {\n                return sendNodeResponse(\n                  res,\n                  new Response(\n                    JSON.stringify(\n                      {\n                        status: 500,\n                        error: 'Internal Server Error',\n                        message:\n                          'An unexpected error occurred. Please try again later.',\n                        timestamp: new Date().toISOString(),\n                      },\n                      null,\n                      2,\n                    ),\n                    {\n                      status: 500,\n                      headers: {\n                        'Content-Type': 'application/json',\n                      },\n                    },\n                  ),\n                )\n              }\n\n              return sendNodeResponse(\n                res,\n                new Response(\n                  `\n              <!DOCTYPE html>\n              <html lang=\"en\">\n                <head>\n                  <meta charset=\"UTF-8\" />\n                  <title>Error</title>\n                  <script type=\"module\">\n                    import { ErrorOverlay } from '/@vite/client'\n                    document.body.appendChild(new ErrorOverlay(${JSON.stringify(\n                      prepareError(req, e),\n                    ).replace(/</g, '\\\\u003c')}))\n                  </script>\n                </head>\n                <body>\n                </body>\n              </html>\n            `,\n                  {\n                    status: 500,\n                    headers: {\n                      'Content-Type': 'text/html',\n                    },\n                  },\n                ),\n              )\n            }\n          })\n        }\n      },\n    },\n    {\n      name: 'tanstack-start-core:dev-server:injected-head-scripts',\n      sharedDuringBuild: true,\n      applyToEnvironment: (env) => env.config.consumer === 'server',\n      resolveId: {\n        filter: { id: new RegExp(VIRTUAL_MODULES.injectedHeadScripts) },\n        handler(_id) {\n          return resolveViteId(VIRTUAL_MODULES.injectedHeadScripts)\n        },\n      },\n      load: {\n        filter: {\n          id: new RegExp(resolveViteId(VIRTUAL_MODULES.injectedHeadScripts)),\n        },\n        handler() {\n          const mod = `\n        export const injectedHeadScripts = ${JSON.stringify(injectedHeadScripts) || 'undefined'}`\n          return mod\n        },\n      },\n    },\n  ]\n}\n\n/**\n * Formats error for SSR message in error overlay\n * @param req\n * @param error\n * @returns\n */\nfunction prepareError(req: Connect.IncomingMessage, error: unknown) {\n  const e = error as Error\n  return {\n    message: `An error occurred while server rendering ${req.url}:\\n\\n\\t${\n      typeof e === 'string' ? e : e.message\n    } `,\n    stack: typeof e === 'string' ? '' : e.stack,\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/start-plugin-core",
-  "version": "1.149.1",
+  "version": "1.149.3",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -59,12 +59,12 @@
     "vitefu": "^1.1.1",
     "xmlbuilder2": "^4.0.3",
     "zod": "^3.24.2",
-    "@tanstack/router-core": "1.147.1",
-    "@tanstack/router-generator": "1.149.0",
-    "@tanstack/router-plugin": "1.149.0",
+    "@tanstack/router-core": "1.149.3",
+    "@tanstack/router-generator": "1.149.3",
+    "@tanstack/router-plugin": "1.149.3",
+    "@tanstack/start-client-core": "1.149.3",
     "@tanstack/router-utils": "1.143.11",
-    "@tanstack/start-client-core": "1.149.1",
-    "@tanstack/start-server-core": "1.149.1"
+    "@tanstack/start-server-core": "1.149.3"
   },
   "devDependencies": {
     "@types/babel__code-frame": "^7.0.6",

package/src/dev-server-plugin/dev-styles.ts

@@ -2,18 +2,37 @@
  * CSS collection for dev mode.
  * Crawls the Vite module graph to collect CSS from the router entry and all its dependencies.
  */
+import path from 'node:path'
 import type { ModuleNode, ViteDevServer } from 'vite'
 
 // CSS file extensions supported by Vite
 const CSS_FILE_REGEX =
   /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/
+// CSS modules file pattern - exported for use in plugin hook filters
+// Note: allow query/hash suffix since Vite ids often include them.
+export const CSS_MODULES_REGEX =
+  /\.module\.(css|less|sass|scss|styl|stylus)(?:$|[?#])/i
+
+export function normalizeCssModuleCacheKey(idOrFile: string): string {
+  const baseId = idOrFile.split('?')[0]!.split('#')[0]!
+  return baseId.replace(/\\/g, '/')
+}
 // URL params that indicate CSS should not be injected (e.g., ?url, ?inline)
 const CSS_SIDE_EFFECT_FREE_PARAMS = ['url', 'inline', 'raw', 'inline-css']
 
+const VITE_CSS_REGEX = /const\s+__vite__css\s*=\s*["'`]([\s\S]*?)["'`]/
+
+const ESCAPE_CSS_COMMENT_START_REGEX = /\/\*/g
+const ESCAPE_CSS_COMMENT_END_REGEX = /\*\//g
+
 function isCssFile(file: string): boolean {
   return CSS_FILE_REGEX.test(file)
 }
 
+export function isCssModulesFile(file: string): boolean {
+  return CSS_MODULES_REGEX.test(file)
+}
+
 function hasCssSideEffectFreeParam(url: string): boolean {
   const queryString = url.split('?')[1]
   if (!queryString) return false
@@ -27,9 +46,31 @@ function hasCssSideEffectFreeParam(url: string): boolean {
   )
 }
 
+/**
+ * Resolve a file path to a Vite dev server URL.
+ * Files within the root directory use relative paths, files outside use /@fs prefix.
+ */
+function resolveDevUrl(rootDirectory: string, filePath: string): string {
+  const normalizedPath = filePath.replace(/\\/g, '/')
+  const relativePath = path.posix.relative(
+    rootDirectory.replace(/\\/g, '/'),
+    normalizedPath,
+  )
+  const isWithinRoot =
+    !relativePath.startsWith('..') && !path.isAbsolute(relativePath)
+
+  if (isWithinRoot) {
+    return path.posix.join('/', relativePath)
+  }
+  // Files outside root need /@fs prefix
+  return path.posix.join('/@fs', normalizedPath)
+}
+
 export interface CollectDevStylesOptions {
   viteDevServer: ViteDevServer
   entries: Array<string>
+  /** Cache of CSS modules content captured during transform hook */
+  cssModulesCache?: Record<string, string>
 }
 
 /**
@@ -38,139 +79,182 @@ export interface CollectDevStylesOptions {
 export async function collectDevStyles(
   opts: CollectDevStylesOptions,
 ): Promise<string | undefined> {
-  const { viteDevServer, entries } = opts
+  const { viteDevServer, entries, cssModulesCache = {} } = opts
   const styles: Map<string, string> = new Map()
   const visited = new Set<ModuleNode>()
 
-  for (const entry of entries) {
-    const normalizedPath = entry.replace(/\\/g, '/')
-    let node = viteDevServer.moduleGraph.getModuleById(normalizedPath)
+  const rootDirectory = viteDevServer.config.root
+
+  // Process entries in parallel - each entry is independent
+  await Promise.all(
+    entries.map((entry) =>
+      processEntry(viteDevServer, resolveDevUrl(rootDirectory, entry), visited),
+    ),
+  )
 
-    // If module isn't in the graph yet, request it to trigger transform
-    if (!node) {
-      try {
-        await viteDevServer.transformRequest(normalizedPath)
-      } catch (err) {
-        // Ignore - the module might not exist yet
+  // Collect CSS from visited modules in parallel
+  const cssPromises: Array<Promise<readonly [string, string] | null>> = []
+
+  for (const dep of visited) {
+    if (hasCssSideEffectFreeParam(dep.url)) {
+      continue
+    }
+
+    if (dep.file && isCssModulesFile(dep.file)) {
+      const css = cssModulesCache[normalizeCssModuleCacheKey(dep.file)]
+      if (!css) {
+        throw new Error(
+          `[tanstack-start] Missing CSS module in cache: ${dep.file}`,
+        )
       }
-      node = viteDevServer.moduleGraph.getModuleById(normalizedPath)
+      styles.set(dep.url, css)
+      continue
     }
 
-    if (node) {
-      await crawlModuleForCss(viteDevServer, node, visited, styles)
+    const fileOrUrl = dep.file ?? dep.url
+    if (!isCssFile(fileOrUrl)) {
+      continue
+    }
+
+    // Load regular CSS files in parallel
+    cssPromises.push(
+      fetchCssFromModule(viteDevServer, dep).then((css) =>
+        css ? ([dep.url, css] as const) : null,
+      ),
+    )
+  }
+
+  // Wait for all CSS loads to complete
+  const cssResults = await Promise.all(cssPromises)
+  for (const result of cssResults) {
+    if (result) {
+      styles.set(result[0], result[1])
     }
   }
 
   if (styles.size === 0) return undefined
 
-  return Array.from(styles.entries())
-    .map(([fileName, css]) => {
-      const escapedFileName = fileName
-        .replace(/\/\*/g, '/\\*')
-        .replace(/\*\//g, '*\\/')
-      return `\n/* ${escapedFileName} */\n${css}`
-    })
-    .join('\n')
+  const parts: Array<string> = []
+  for (const [fileName, css] of styles.entries()) {
+    const escapedFileName = fileName
+      .replace(ESCAPE_CSS_COMMENT_START_REGEX, '/\\*')
+      .replace(ESCAPE_CSS_COMMENT_END_REGEX, '*\\/')
+    parts.push(`\n/* ${escapedFileName} */\n${css}`)
+  }
+  return parts.join('\n')
 }
 
-async function crawlModuleForCss(
-  vite: ViteDevServer,
-  node: ModuleNode,
+/**
+ * Process an entry URL: transform it if needed, get the module node, and crawl its dependencies.
+ */
+async function processEntry(
+  viteDevServer: ViteDevServer,
+  entryUrl: string,
   visited: Set<ModuleNode>,
-  styles: Map<string, string>,
 ): Promise<void> {
-  if (visited.has(node)) return
-  visited.add(node)
-
-  const branches: Array<Promise<void>> = []
+  let node = await viteDevServer.moduleGraph.getModuleByUrl(entryUrl)
 
-  // Ensure the module has been transformed to populate its deps
-  // This is important for code-split modules that may not have been processed yet
-  if (!node.ssrTransformResult) {
+  // Only transform if not yet SSR-transformed (need ssrTransformResult.deps for crawling)
+  if (!node?.ssrTransformResult) {
     try {
-      await vite.transformRequest(node.url, { ssr: true })
-      // Re-fetch the node to get updated state
-      const updatedNode = await vite.moduleGraph.getModuleByUrl(node.url)
-      if (updatedNode) {
-        node = updatedNode
-      }
+      await viteDevServer.transformRequest(entryUrl)
     } catch {
-      // Ignore transform errors - the module might not be transformable
+      // ignore - module might not exist yet
     }
+    node = await viteDevServer.moduleGraph.getModuleByUrl(entryUrl)
   }
 
-  // Check if this is a CSS file
-  if (
-    node.file &&
-    isCssFile(node.file) &&
-    !hasCssSideEffectFreeParam(node.url)
-  ) {
-    const css = await loadCssContent(vite, node)
-    if (css) {
-      styles.set(node.url, css)
-    }
+  if (!node || visited.has(node)) return
+
+  visited.add(node)
+  await findModuleDeps(viteDevServer, node, visited)
+}
+
+/**
+ * Find all module dependencies by crawling the module graph.
+ * Uses transformResult.deps for URL-based lookups (parallel) and
+ * importedModules for already-resolved nodes (parallel).
+ */
+async function findModuleDeps(
+  viteDevServer: ViteDevServer,
+  node: ModuleNode,
+  visited: Set<ModuleNode>,
+): Promise<void> {
+  // Note: caller must add node to visited BEFORE calling this function
+  // to prevent race conditions with parallel traversal
+
+  // Process deps from transformResult if available (URLs including bare imports)
+  const deps =
+    node.ssrTransformResult?.deps ?? node.transformResult?.deps ?? null
+
+  const importedModules = node.importedModules
+
+  // Fast path: no deps and no imports
+  if ((!deps || deps.length === 0) && importedModules.size === 0) {
+    return
   }
 
-  // Crawl dependencies using ssrTransformResult.deps and importedModules
-  // We need both because:
-  // 1. ssrTransformResult.deps has resolved URLs for SSR dependencies
-  // 2. importedModules may contain CSS files and code-split modules not in SSR deps
-  const depsFromSsr = node.ssrTransformResult?.deps ?? []
-  const urlsToVisit = new Set<string>(depsFromSsr)
-
-  // Check importedModules for CSS files and additional modules
-  for (const importedNode of node.importedModules) {
-    if (importedNode.file && isCssFile(importedNode.file)) {
-      // CSS files often don't appear in ssrTransformResult.deps, add them explicitly
-      branches.push(crawlModuleForCss(vite, importedNode, visited, styles))
-    } else if (!urlsToVisit.has(importedNode.url)) {
-      // Also add non-CSS imports that aren't in SSR deps (e.g., code-split modules)
-      urlsToVisit.add(importedNode.url)
+  // Build branches only when needed (avoid array allocation on leaf nodes)
+  const branches: Array<Promise<void>> = []
+
+  if (deps) {
+    for (const depUrl of deps) {
+      const dep = await viteDevServer.moduleGraph.getModuleByUrl(depUrl)
+      if (!dep) continue
+
+      if (visited.has(dep)) continue
+      visited.add(dep)
+      branches.push(findModuleDeps(viteDevServer, dep, visited))
     }
   }
 
-  for (const depUrl of urlsToVisit) {
-    branches.push(
-      (async () => {
-        const depNode = await vite.moduleGraph.getModuleByUrl(depUrl)
-        if (depNode) {
-          await crawlModuleForCss(vite, depNode, visited, styles)
-        }
-      })(),
-    )
+  // ALWAYS also traverse importedModules - this catches:
+  // - Code-split chunks (e.g. ?tsr-split=component) not in deps
+  // - Already-resolved nodes
+  for (const depNode of importedModules) {
+    if (visited.has(depNode)) continue
+    visited.add(depNode)
+    branches.push(findModuleDeps(viteDevServer, depNode, visited))
+  }
+
+  if (branches.length === 1) {
+    await branches[0]
+    return
   }
 
   await Promise.all(branches)
 }
 
-async function loadCssContent(
-  vite: ViteDevServer,
+async function fetchCssFromModule(
+  viteDevServer: ViteDevServer,
   node: ModuleNode,
 ): Promise<string | undefined> {
-  // For ALL CSS files (including CSS modules), get the transformed content
-  // and extract __vite__css. Vite's transform puts the final CSS (with hashed
-  // class names for modules) into the __vite__css variable.
-  const transformResult = await vite.transformRequest(node.url)
-  if (!transformResult?.code) return undefined
-
-  // Extract CSS content from Vite's transformed module
-  return extractCssFromViteModule(transformResult.code)
-}
+  // Use cached transform result if available
+  const cachedCode = node.transformResult?.code ?? node.ssrTransformResult?.code
+  if (cachedCode) {
+    return extractCssFromCode(cachedCode)
+  }
 
-/**
- * Extract CSS string from Vite's transformed CSS module code.
- * Vite wraps CSS content in a JS module with __vite__css variable.
- */
-function extractCssFromViteModule(code: string): string | undefined {
-  // Match: const __vite__css = "..."
-  const match = code.match(/const\s+__vite__css\s*=\s*["'`]([\s\S]*?)["'`]/)
-  if (match?.[1]) {
-    // Unescape the string
-    return match[1]
-      .replace(/\\n/g, '\n')
-      .replace(/\\t/g, '\t')
-      .replace(/\\"/g, '"')
-      .replace(/\\\\/g, '\\')
+  // Otherwise request a fresh transform
+  try {
+    const transformResult = await viteDevServer.transformRequest(node.url)
+    if (!transformResult?.code) return undefined
+
+    return extractCssFromCode(transformResult.code)
+  } catch {
+    // Preprocessor partials (e.g., Sass files with mixins) can't compile in isolation.
+    // The root stylesheet that @imports them will contain the compiled CSS.
+    return undefined
   }
-  return undefined
+}
+
+function extractCssFromCode(code: string): string | undefined {
+  const match = VITE_CSS_REGEX.exec(code)
+  if (!match?.[1]) return undefined
+
+  return match[1]
+    .replace(/\\n/g, '\n')
+    .replace(/\\t/g, '\t')
+    .replace(/\\"/g, '"')
+    .replace(/\\\\/g, '\\')
 }

package/src/dev-server-plugin/plugin.ts

@@ -4,7 +4,11 @@ import { NodeRequest, sendNodeResponse } from 'srvx/node'
 import { ENTRY_POINTS, VITE_ENVIRONMENT_NAMES } from '../constants'
 import { resolveViteId } from '../utils'
 import { extractHtmlScripts } from './extract-html-scripts'
-import { collectDevStyles } from './dev-styles'
+import {
+  CSS_MODULES_REGEX,
+  collectDevStyles,
+  normalizeCssModuleCacheKey,
+} from './dev-styles'
 import type { Connect, DevEnvironment, PluginOption } from 'vite'
 import type { GetConfigFn } from '../types'
 
@@ -17,12 +21,26 @@ export function devServerPlugin({
 
   let injectedHeadScripts: string | undefined
 
+  // Cache CSS modules content during transform hook.
+  // For CSS modules, the transform hook receives the raw CSS content before
+  // Vite wraps it in JS. We capture this to use during SSR style collection.
+  const cssModulesCache: Record<string, string> = {}
+
   return [
     {
       name: 'tanstack-start-core:dev-server',
       config(_userConfig, { mode }) {
         isTest = isTest ? isTest : mode === 'test'
       },
+      // Capture CSS modules content during transform
+      transform: {
+        filter: {
+          id: CSS_MODULES_REGEX,
+        },
+        handler(code, id) {
+          cssModulesCache[normalizeCssModuleCacheKey(id)] = code
+        },
+      },
       async configureServer(viteDevServer) {
         if (isTest) {
           return
@@ -39,6 +57,66 @@ export function devServerPlugin({
           .flatMap((script) => script.content ?? [])
           .join(';')
 
+        // CSS middleware registered in PRE-PHASE (before Vite's internal middlewares)
+        // This ensures it handles /@tanstack-start/styles.css before any catch-all middleware
+        // from other plugins (like nitro) that may be registered in the post-phase.
+        // This makes the CSS endpoint work regardless of plugin order in the Vite config.
+        // We check pathname.endsWith() to handle basepaths (e.g., /my-app/@tanstack-start/styles.css)
+        // since pre-phase runs before Vite's base middleware strips the basepath.
+        viteDevServer.middlewares.use(async (req, res, next) => {
+          const url = req.url ?? ''
+          const pathname = url.split('?')[0]
+          if (!pathname?.endsWith('/@tanstack-start/styles.css')) {
+            return next()
+          }
+
+          try {
+            // Parse route IDs from query param
+            const urlObj = new URL(url, 'http://localhost')
+            const routesParam = urlObj.searchParams.get('routes')
+            const routeIds = routesParam ? routesParam.split(',') : []
+
+            // Build entries list from route file paths
+            const entries: Array<string> = []
+
+            // Look up route file paths from manifest
+            // Only routes registered in the manifest are used - this prevents path injection
+            const routesManifest = (globalThis as any).TSS_ROUTES_MANIFEST as
+              | Record<string, { filePath: string; children?: Array<string> }>
+              | undefined
+
+            if (routesManifest && routeIds.length > 0) {
+              for (const routeId of routeIds) {
+                const route = routesManifest[routeId]
+                if (route?.filePath) {
+                  entries.push(route.filePath)
+                }
+              }
+            }
+
+            const css =
+              entries.length > 0
+                ? await collectDevStyles({
+                    viteDevServer,
+                    entries,
+                    cssModulesCache,
+                  })
+                : undefined
+
+            res.setHeader('Content-Type', 'text/css')
+            res.setHeader('Cache-Control', 'no-store')
+            res.end(css ?? '')
+          } catch (e) {
+            // Log error but still return valid CSS response to avoid MIME type issues
+            console.error('[tanstack-start] Error collecting dev styles:', e)
+            res.setHeader('Content-Type', 'text/css')
+            res.setHeader('Cache-Control', 'no-store')
+            res.end(
+              `/* Error collecting styles: ${e instanceof Error ? e.message : String(e)} */`,
+            )
+          }
+        })
+
         return () => {
           const serverEnv = viteDevServer.environments[
             VITE_ENVIRONMENT_NAMES.server
@@ -50,60 +128,6 @@ export function devServerPlugin({
             )
           }
 
-          // CSS middleware is always installed - it doesn't depend on the server environment type
-          // This ensures dev styles work with nitro, cloudflare, and other environments
-          viteDevServer.middlewares.use(async (req, res, next) => {
-            const url = req.url ?? ''
-            if (!url.startsWith('/@tanstack-start/styles.css')) {
-              return next()
-            }
-
-            try {
-              // Parse route IDs from query param
-              const urlObj = new URL(url, 'http://localhost')
-              const routesParam = urlObj.searchParams.get('routes')
-              const routeIds = routesParam ? routesParam.split(',') : []
-
-              // Build entries list from route file paths
-              const entries: Array<string> = []
-
-              // Look up route file paths from manifest
-              // Only routes registered in the manifest are used - this prevents path injection
-              const routesManifest = (globalThis as any).TSS_ROUTES_MANIFEST as
-                | Record<string, { filePath: string; children?: Array<string> }>
-                | undefined
-
-              if (routesManifest && routeIds.length > 0) {
-                for (const routeId of routeIds) {
-                  const route = routesManifest[routeId]
-                  if (route?.filePath) {
-                    entries.push(route.filePath)
-                  }
-                }
-              }
-
-              const css =
-                entries.length > 0
-                  ? await collectDevStyles({
-                      viteDevServer,
-                      entries,
-                    })
-                  : undefined
-
-              res.setHeader('Content-Type', 'text/css')
-              res.setHeader('Cache-Control', 'no-store')
-              res.end(css ?? '')
-            } catch (e) {
-              // Log error but still return valid CSS response to avoid MIME type issues
-              console.error('[tanstack-start] Error collecting dev styles:', e)
-              res.setHeader('Content-Type', 'text/css')
-              res.setHeader('Cache-Control', 'no-store')
-              res.end(
-                `/* Error collecting styles: ${e instanceof Error ? e.message : String(e)} */`,
-              )
-            }
-          })
-
           const { startConfig } = getConfig()
           const installMiddleware = startConfig.vite?.installDevServerMiddleware
           if (installMiddleware === false) {