css-modules: add typechecking for css module classes

pkgs/clan-app/ui/.gitignore

@@ -3,3 +3,4 @@ app/.fonts
 
 .vite
 storybook-static
+*.css.d.ts

pkgs/clan-app/ui/package.json

@@ -57,7 +57,9 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.32.1",
+    "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^6.3.5",
+    "vite-css-modules": "^1.10.0",
     "vite-plugin-solid": "^2.8.2",
     "vite-plugin-solid-svg": "^0.8.1",
     "vitest": "^3.2.3",

pkgs/clan-app/ui/src/components/Alert/Alert.css

@@ -1,43 +0,0 @@
-div.alert {
-  @apply flex flex-row gap-2.5 p-4 rounded-md items-start;
-
-  &.has-icon {
-    @apply pl-3;
-
-    svg.icon {
-      @apply relative top-0.5;
-    }
-  }
-
-  &.has-dismiss {
-    @apply pr-3;
-  }
-
-  & > button.dismiss-trigger {
-    @apply relative top-0.5;
-  }
-
-  & > div.content {
-    @apply flex flex-col size-full gap-1;
-  }
-
-  &.info {
-    @apply bg-semantic-info-1 border border-semantic-info-3 fg-semantic-info-3;
-  }
-
-  &.error {
-    @apply bg-semantic-error-2 border border-semantic-error-3 fg-semantic-error-3;
-  }
-
-  &.warning {
-    @apply bg-semantic-warning-2 border border-semantic-warning-3 fg-semantic-warning-3;
-  }
-
-  &.success {
-    @apply bg-semantic-success-1 border border-semantic-success-3 fg-semantic-success-3;
-  }
-
-  &.transparent {
-    @apply bg-transparent border-none p-0;
-  }
-}

pkgs/clan-app/ui/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
     "strict": true,
     "target": "ESNext",
     "module": "ESNext",

pkgs/clan-app/ui/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
 import solidSvg from "vite-plugin-solid-svg";
+import { patchCssModules } from "vite-css-modules";
 import path from "node:path";
 import { exec } from "child_process";
 
@@ -40,6 +41,7 @@ export default defineConfig({
     solidPlugin(),
     solidSvg(),
     regenPythonApiOnFileChange(),
+    patchCssModules({ generateSourceTypes: true }),
   ],
   server: {
     port: 3000,