.gitignore

@@ -10,7 +10,7 @@ node_modules
 
 # React Router
 .react-router/
-build/
+/build/
 
 
 # misc

.zed/settings.json

@@ -17,9 +17,6 @@
   "languages": {
     "TSX": {
       "language_servers": ["stylelint-lsp", "..."]
-    },
-    "JSON": {
-      "language_servers": ["biome", "..."]
     }
   }
 }

packages/web/app/routes.ts

@@ -1,3 +1,3 @@
-import { index, type RouteConfig } from "@react-router/dev/routes";
+import { type RouteConfig, index } from "@react-router/dev/routes";
 
 export default [index("routes/home.tsx")] satisfies RouteConfig;

packages/web/app/routes/home.tsx

@@ -1,5 +1,5 @@
-import { Welcome } from "../welcome/welcome";
 import type { Route } from "./+types/home";
+import { Welcome } from "../welcome/welcome";
 
 export function meta(_args: Route.MetaArgs) {
   return [

packages/web/app/welcome/welcome.module.css

@@ -1,31 +0,0 @@
-.welcome {
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 500px;
-    max-width: 100vw;
-    padding: 4px;
-
-    img {
-      width: 100%;
-    }
-  }
-}
-
-.links {
-  max-width: 300px;
-  width: 100%;
-  padding: 0 4px;
-
-  nav {
-    border-radius: 48px;
-    border: 1px solid gray;
-    padding: 6px;
-  }
-}

packages/web/app/welcome/welcome.tsx

@@ -1,43 +1,46 @@
 import logoDark from "./logo-dark.svg";
 import logoLight from "./logo-light.svg";
-import styles from "./welcome.module.css";
 
 export function Welcome() {
   return (
-    <main className={styles.welcome}>
-      <header className="flex flex-col items-center gap-9">
-        <img
-          src={logoLight}
-          alt="React Router"
-          className="block w-full dark:hidden"
-        />
-        <img
-          src={logoDark}
-          alt="React Router"
-          className="hidden w-full dark:block"
-        />
-      </header>
-      <div className={styles.links}>
-        <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
-          <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
-            What&apos;s next?
-          </p>
-          <ul>
-            {resources.map(({ href, text, icon }) => (
-              <li key={href}>
-                <a
-                  className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
-                  href={href}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {icon}
-                  {text}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
+    <main className="flex items-center justify-center pt-16 pb-4">
+      <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
+        <header className="flex flex-col items-center gap-9">
+          <div className="w-[500px] max-w-[100vw] p-4">
+            <img
+              src={logoLight}
+              alt="React Router"
+              className="block w-full dark:hidden"
+            />
+            <img
+              src={logoDark}
+              alt="React Router"
+              className="hidden w-full dark:block"
+            />
+          </div>
+        </header>
+        <div className="max-w-[300px] w-full space-y-6 px-4">
+          <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
+            <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
+              What&apos;s next?
+            </p>
+            <ul>
+              {resources.map(({ href, text, icon }) => (
+                <li key={href}>
+                  <a
+                    className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
+                    href={href}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {icon}
+                    {text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
       </div>
     </main>
   );

packages/web/package.json

@@ -7,7 +7,7 @@
     "build": "react-router build",
     "dev": "react-router dev",
     "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc -p tsconfig.cssmodulehack.json",
+    "typecheck": "react-router typegen && tsc",
     "test": "vitest"
   },
   "dependencies": {

packages/web/tsconfig.cssmodulehack.json

@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    // the typescript-plugin-css-modules only works when typescript is used as a LSP and not when "tsc" is invoked.
-    // Therefore when tsc is invoked, we need to disable the noPropertyAccessFromIndexSignature option.
-    // This is good, because its more of a lint anyways - the heavy lifting is done by the
-    // noUncheckedIndexedAccess rule
-    "noPropertyAccessFromIndexSignature": false
-  }
-}

packages/web/tsconfig.json

@@ -2,8 +2,7 @@
   "files": [],
   "extends": "../../tsconfig.base.json",
   "include": [
-    "app/**/*",
-    "*.ts",
+    "**/*",
     "**/.server/**/*",
     "**/.client/**/*",
     ".react-router/types/**/*"
@@ -12,9 +11,7 @@
     "plugins": [
       {
         "name": "typescript-plugin-css-modules",
-        "options": {
-          "classnameTransform": "camelCaseOnly"
-        }
+        "options": { "classnameTransform": "camelCase" }
       }
     ],
     "rootDirs": [".", "./.react-router/types"],

packages/web/vite.config.ts

@@ -8,9 +8,7 @@ export default defineConfig({
   plugins: [
     checker({
       biome: { command: "check", dev: { command: "lint" } },
-      typescript: {
-        tsconfigPath: "./tsconfig.cssmodulehack.json",
-      },
+      typescript: true,
       stylelint: { lintCommand: "stylelint ./app/**/*.css" },
     }),
     reactRouter(),