make css modules build without errors

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

@@ -11,7 +11,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(),