refactor: replace linaria with css modules (#1658)

.github/workflows/ci.yml

@@ -35,5 +35,11 @@ jobs:
       - name: 📝 Prettier formatting
         run: pnpm lint:formatting
 
+      - name: 📝 Generate CSS types
+        run: pnpm test:generatecsstypes
+
       - name: 💪 Type check
         run: pnpm test:typecheck
+
+      - name: 📦 Build
+        run: pnpm build

.gitignore

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -6,5 +6,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.codeActionsOnSave.rules": ["perfectionist/*"]
+  "eslint.codeActionsOnSave.rules": ["perfectionist/*"],
+  "css.lint.validProperties": ["composes"],
+  "css.lint.vendorPrefix": "ignore"
 }

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 .",
@@ -65,8 +66,6 @@
     "@ionic/core": "npm:voyager-ionic-core@8.4.0",
     "@ionic/react": "8.4.0",
     "@ionic/react-router": "8.4.0",
-    "@linaria/core": "^6.2.0",
-    "@linaria/react": "^6.2.1",
     "@mantine/hooks": "^7.14.0",
     "@reduxjs/toolkit": "^2.3.0",
     "capacitor-android-nav-mode": "^1.0.0",
@@ -122,8 +121,6 @@
     "virtua": "^0.37.0"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.26.0",
     "@capacitor/cli": "^6.1.2",
     "@eslint/js": "^9.14.0",
     "@ionic/cli": "^7.2.0",
@@ -139,7 +136,6 @@
     "@types/ua-parser-js": "^0.7.39",
     "@vitejs/plugin-legacy": "^5.4.3",
     "@vitejs/plugin-react": "^4.3.3",
-    "@wyw-in-js/vite": "^0.5.5",
     "babel-plugin-react-compiler": "0.0.0-experimental-19c7e06-20241113",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
@@ -148,16 +144,18 @@
     "eslint-plugin-react-hooks": "0.0.0-experimental-b01722d5-20241114",
     "eslint-plugin-vitest": "^0.5.4",
     "jsdom": "^25.0.1",
+    "lightningcss": "^1.28.1",
     "mdast-util-lemmy-spoiler": "^2.0.0",
     "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",
+    "vite-css-modules": "^1.5.2",
     "vite-plugin-pwa": "^0.21.0",
     "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.2",
     "vitest": "^2.1.5"
   }
 }