Add typescripted css modules

packages/web/app/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite/client" />

packages/web/package.json

@@ -21,19 +21,20 @@
     "vite-plugin-top-level-await": "1.5.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.3.6",
     "@react-router/dev": "7.10.1",
     "@tailwindcss/vite": "^4.1.13",
     "@types/node": "^22",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "tailwindcss": "^4.1.13",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
-    "vite-tsconfig-paths": "^5.1.4",
-    "@biomejs/biome": "2.3.6",
     "stylelint": "16.26.1",
     "stylelint-config-standard": "39.0.1",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "typescript-plugin-css-modules": "5.2.0",
+    "vite": "^7.1.7",
     "vite-plugin-checker": "0.12.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "4.0.16"
   }
 }

packages/web/tsconfig.json

@@ -8,10 +8,16 @@
     ".react-router/types/**/*"
   ],
   "compilerOptions": {
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+        "options": { "classnameTransform": "camelCase" }
+      }
+    ],
     "rootDirs": [".", "./.react-router/types"],
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
-    },
+    }
   }
 }

packages/web/vite.config.ts

@@ -14,6 +14,11 @@ export default defineConfig({
     reactRouter(),
     tsconfigPaths(),
   ],
+  css: {
+    modules: {
+      localsConvention: "camelCaseOnly",
+    },
+  },
   server: {
     fs: {
       deny: [".devenv/", ".direnv/"],