From 875f2f2d46c2a8f21295bd72ce716e7c11a02891 Mon Sep 17 00:00:00 2001
From: Mona Mayrhofer <mona.mayrhofer@proton.me>
Date: Fri, 26 Dec 2025 13:54:09 +0100
Subject: [PATCH] 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(),