Add typescript CSS module for type safe and autocomplete CSS

web/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

web/package.json

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.41",
-    "typescript": "^5.3.3",
+    "typescript": "^5.3.2",
     "vite": "^4.1.5",
     "vite-plugin-html-env": "^1.2.8",
     "vite-plugin-solid": "^2.8.0"
@@ -18,6 +18,7 @@
   "dependencies": {
     "chart.js": "^4.4.1",
     "moment": "^2.30.1",
-    "solid-js": "^1.8.8"
+    "solid-js": "^1.8.8",
+    "typescript-plugin-css-modules": "^5.1.0"
   }
 }

web/src/App.tsx

@@ -1,6 +1,6 @@
 import { Component, JSXElement, createSignal } from 'solid-js';
 
-import styles from './css/App.module.css';
+import styles from './css/menu.module.css';
 import { Country } from './country/Country';
 import { Cities } from './cities/Cities';
 import { Database } from './database/Database';
@@ -30,7 +30,7 @@ const App: Component = () => {
     }
 
     return (
-        <div class={styles.App}>
+        <div>
             <div class="grid-1-1">
                 <div><WeatherIconStub /></div>
                 <div>

web/src/css/App.module.css

@@ -1,53 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.logo {
-  animation: logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.link {
-  color: #b318f0;
-}
-
-.menu {
-    padding: 8px 20px;
-    text-align: right;
-}
-
-.menu li{
-  display: inline;
-  padding: 10px 0 10px 10px;
-  cursor: pointer;
-}
-
-.menu li:not(:first-child)::before {
-  content: '•';
-  margin-right: 1ch;
-}
-
-.active {
-  font-weight: bold;
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

web/src/css/menu.module.css

@@ -0,0 +1,19 @@
+.menu {
+    padding: 8px 20px;
+    text-align: right;
+}
+
+.menu li{
+  display: inline;
+  padding: 10px 0 10px 10px;
+  cursor: pointer;
+}
+
+.menu li:not(:first-child)::before {
+  content: '•';
+  margin-right: 1ch;
+}
+
+.active {
+  font-weight: bold;
+}

web/tsconfig.json

@@ -10,6 +10,7 @@
     "jsxImportSource": "solid-js",
     "types": ["vite/client"],
     "noEmit": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   }
 }