Fix style loading on docs-layout.tsx

app/pages/docs-layout.tsx

@@ -14,6 +14,7 @@ import { useRef } from "react";
 import { useCodeBlockCopyButton } from "~/ui/utils";
 
 import docsCss from "~/styles/docs.css?url";
+import { preload } from "react-dom";
 
 export let loader = async ({ request, params }: Route.LoaderArgs) => {
   let url = new URL(request.url);
@@ -58,6 +59,11 @@ export let loader = async ({ request, params }: Route.LoaderArgs) => {
   return { menu, header };
 };
 
+export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
+  preload(docsCss, { as: "style" });
+  return await serverLoader();
+}
+
 export default function DocsLayout({ loaderData }: Route.ComponentProps) {
   const { menu, header } = loaderData;
 

package.json

@@ -22,8 +22,8 @@
   "dependencies": {
     "@docsearch/css": "^3.8.3",
     "@docsearch/react": "^3.8.3",
-    "@react-router/express": "^7.1.5",
-    "@react-router/node": "^7.1.5",
+    "@react-router/express": "0.0.0-nightly-f9f4a27a3-20250211",
+    "@react-router/node": "0.0.0-nightly-f9f4a27a3-20250211",
     "@types/express": "^5.0.0",
     "cheerio": "^1.0.0-rc.12",
     "classnames": "^2.3.2",
@@ -44,7 +44,7 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.1.5",
+    "react-router": "0.0.0-nightly-f9f4a27a3-20250211",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
@@ -61,7 +61,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.1.5",
+    "@react-router/dev": "0.0.0-nightly-f9f4a27a3-20250211",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/eslint": "^8.56.6",
     "@types/express-serve-static-core": "^5.0.6",

react-router.config.ts

@@ -3,5 +3,6 @@ import type { Config } from "@react-router/dev/config";
 export default {
   future: {
     unstable_optimizeDeps: true,
+    unstable_splitRouteModules: "enforce",
   },
 } satisfies Config;