Add tsc step

.github/workflows/ci.yml

@@ -35,6 +35,9 @@ jobs:
       - name: 📝 Prettier formatting
         run: pnpm lint:formatting
 
+      - name: 📝 Generate CSS types
+        run: pnpm test:generatecsstypes
+
       - name: 💪 Type check
         run: pnpm test:typecheck
 

.gitignore

@@ -41,3 +41,5 @@ fly.toml
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+*.css.d.ts

.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "ionic.ionic",
     "esbenp.prettier-vscode",
-    "styled-components.vscode-styled-components", // TODO remove
     "github.vscode-github-actions",
     "clinyong.vscode-css-modules"
   ]

package.json

@@ -13,6 +13,7 @@
     "preview": "vite preview",
     "test": "vitest",
     "test:e2e": "playwright test",
+    "test:generatecsstypes": "tcm src",
     "test:typecheck": "tsc",
     "lint": "eslint src --max-warnings=0",
     "lint:formatting": "prettier --check .",
@@ -148,6 +149,7 @@
     "prettier": "^3.3.3",
     "pwa-asset-generator": "^6.4.0",
     "release-it": "^17.10.0",
+    "typed-css-modules": "^0.9.1",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.14.0",
     "vite": "^5.4.11",

src/features/inbox/InboxItem.tsx

@@ -200,7 +200,7 @@ export default function InboxItem({ item }: InboxItemProps) {
           <VoteArrow vote={vote} />
         </div>
         <div className={styles.content}>
-          <div className={styles.header}>{renderHeader()}</div>
+          <div>{renderHeader()}</div>
           <div className={styles.body}>
             <CommentMarkdown id={getItemId(item)}>
               {renderContents()}