From 875f2f2d46c2a8f21295bd72ce716e7c11a02891 Mon Sep 17 00:00:00 2001 From: Mona Mayrhofer Date: Fri, 26 Dec 2025 13:54:09 +0100 Subject: [PATCH 1/4] make css modules build without errors --- packages/web/tsconfig.cssmodulehack.json | 11 +++++++++++ packages/web/tsconfig.json | 4 +++- packages/web/vite.config.ts | 4 +++- 3 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 packages/web/tsconfig.cssmodulehack.json diff --git a/packages/web/tsconfig.cssmodulehack.json b/packages/web/tsconfig.cssmodulehack.json new file mode 100644 index 0000000..c00a32a --- /dev/null +++ b/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 + } +} diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json index 6a2bd6d..df6be6d 100644 --- a/packages/web/tsconfig.json +++ b/packages/web/tsconfig.json @@ -11,7 +11,9 @@ "plugins": [ { "name": "typescript-plugin-css-modules", - "options": { "classnameTransform": "camelCase" } + "options": { + "classnameTransform": "camelCaseOnly", + } } ], "rootDirs": [".", "./.react-router/types"], diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts index 3055fb4..568cb33 100644 --- a/packages/web/vite.config.ts +++ b/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(), From ddf96e81bbfc4605d82f62f27bd329feec44eefc Mon Sep 17 00:00:00 2001 From: Mona Mayrhofer Date: Fri, 26 Dec 2025 14:12:06 +0100 Subject: [PATCH 2/4] Add biome for json files --- .zed/settings.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.zed/settings.json b/.zed/settings.json index e42156a..45d6c30 100644 --- a/.zed/settings.json +++ b/.zed/settings.json @@ -17,6 +17,9 @@ "languages": { "TSX": { "language_servers": ["stylelint-lsp", "..."] + }, + "JSON": { + "language_servers": ["biome", "..."] } } } From b4f77693759b030beec3a50cb869741610a7e8bf Mon Sep 17 00:00:00 2001 From: Mona Mayrhofer Date: Fri, 26 Dec 2025 14:12:06 +0100 Subject: [PATCH 3/4] Add example cssmodule --- packages/web/app/welcome/welcome.module.css | 31 +++++++++ packages/web/app/welcome/welcome.tsx | 73 ++++++++++----------- 2 files changed, 66 insertions(+), 38 deletions(-) create mode 100644 packages/web/app/welcome/welcome.module.css diff --git a/packages/web/app/welcome/welcome.module.css b/packages/web/app/welcome/welcome.module.css new file mode 100644 index 0000000..960d595 --- /dev/null +++ b/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; + } +} diff --git a/packages/web/app/welcome/welcome.tsx b/packages/web/app/welcome/welcome.tsx index f4c185f..cfb28b0 100644 --- a/packages/web/app/welcome/welcome.tsx +++ b/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 ( -
-
-
-
- React Router - React Router -
-
-
- -
+
+
+ React Router + React Router +
+
+
); From 7462e56d74b376012c77341c4607046b6c43e765 Mon Sep 17 00:00:00 2001 From: Mona Mayrhofer Date: Fri, 26 Dec 2025 14:12:06 +0100 Subject: [PATCH 4/4] Fix bun run build --- .gitignore | 2 +- packages/web/app/routes.ts | 2 +- packages/web/app/routes/home.tsx | 2 +- packages/web/package.json | 2 +- packages/web/tsconfig.json | 5 +++-- 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index acf6b4a..09d7f9a 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,7 @@ node_modules # React Router .react-router/ -/build/ +build/ # misc diff --git a/packages/web/app/routes.ts b/packages/web/app/routes.ts index 102b402..38f1a4d 100644 --- a/packages/web/app/routes.ts +++ b/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; diff --git a/packages/web/app/routes/home.tsx b/packages/web/app/routes/home.tsx index 28efe48..cc4d73f 100644 --- a/packages/web/app/routes/home.tsx +++ b/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 [ diff --git a/packages/web/package.json b/packages/web/package.json index 5b68bc5..7b54c5e 100644 --- a/packages/web/package.json +++ b/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": { diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json index df6be6d..be26c19 100644 --- a/packages/web/tsconfig.json +++ b/packages/web/tsconfig.json @@ -2,7 +2,8 @@ "files": [], "extends": "../../tsconfig.base.json", "include": [ - "**/*", + "app/**/*", + "*.ts", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*" @@ -12,7 +13,7 @@ { "name": "typescript-plugin-css-modules", "options": { - "classnameTransform": "camelCaseOnly", + "classnameTransform": "camelCaseOnly" } } ],