Add CSS modules experiment

This would potentially replace Linaria

package.json

@@ -155,6 +155,7 @@
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.13.0",
     "vite": "^5.4.10",
+    "vite-css-modules": "^1.5.2",
     "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.2",

src/features/post/shared/SaveButton.tsx

@@ -1,6 +1,5 @@
 import { ImpactStyle } from "@capacitor/haptics";
 import { IonIcon } from "@ionic/react";
-import { css } from "@linaria/core";
 import { bookmarkOutline } from "ionicons/icons";
 import { PostView } from "lemmy-js-client";
 import { MouseEvent, useContext } from "react";
@@ -13,11 +12,7 @@ import useHapticFeedback from "#/helpers/useHapticFeedback";
 import { useAppDispatch, useAppSelector } from "#/store";
 
 import { savePost } from "../postSlice";
-
-const savedButtonCss = css`
-  background: var(--ion-color-success);
-  color: var(--ion-color-primary-contrast);
-`;
+import styles from "./saveButton.module.css";
 
 interface SaveButtonProps {
   post: PostView;
@@ -52,7 +47,7 @@ export function SaveButton({ post }: SaveButtonProps) {
 
   return (
     <ActionButton
-      className={mySaved ? savedButtonCss : undefined}
+      className={mySaved ? styles.button : undefined}
       onClick={onSavePost}
     >
       <IonIcon icon={bookmarkOutline} />