Fix bun run build

.gitignore

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

.zed/settings.json

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

packages/web/app/routes.ts

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

packages/web/app/routes/home.tsx

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

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

@@ -0,0 +1,31 @@
+.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,46 +1,43 @@
 import logoDark from "./logo-dark.svg";
 import logoLight from "./logo-light.svg";
+import styles from "./welcome.module.css";
 
 export function Welcome() {
   return (
-    <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>
+    <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>
       </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",
+    "typecheck": "react-router typegen && tsc -p tsconfig.cssmodulehack.json",
     "test": "vitest"
   },
   "dependencies": {

packages/web/tsconfig.cssmodulehack.json

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

packages/web/vite.config.ts

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