add css modules to project

package.json

@@ -44,6 +44,7 @@
     "lint-staged": "^15.2.1",
     "prettier": "^3.2.4",
     "typescript": "^5.3.3",
+    "typescript-plugin-css-modules": "^5.0.2",
     "vite": "^5.0.12"
   }
 }

src/components/ConfigView/ConfigButton/ConfigButton.tsx

@@ -1,13 +1,13 @@
 import SettingsIcon from "@mui/icons-material/Settings";
 import { IconButton } from "@mui/material";
-import "./ConfigButton.less";
+import styles from "./ConfigButton.module.less";
 
 type ConfigButtonProps = {
   callback: () => void;
 };
 export const ConfigButton = (props: ConfigButtonProps) => {
   return (
-    <div className="config-button">
+    <div className={styles.configButton}>
       <IconButton size="large" onClick={() => props.callback()}>
         <SettingsIcon />
       </IconButton>

src/components/StreakView/StreakView.module.less

@@ -0,0 +1,36 @@
+.container {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: 1rem;
+  overflow-y: auto;
+
+  .streak-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .pointer {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    animation: pulsate 4s infinite;
+  }
+
+  @keyframes pulsate {
+    0% {
+      transform: scale(1);
+      opacity: 0.8;
+    }
+    50% {
+      transform: scale(1.75);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 0.8;
+    }
+  }
+}

src/components/StreakView/StreakView.tsx

@@ -1,8 +1,8 @@
+import NorthWestIcon from "@mui/icons-material/NorthWest";
 import { Typography } from "@mui/material";
 import { useConfiguration } from "../../hooks/useConfiguration";
-import "./StreakView.less";
+import styles from "./StreakView.module.less";
 import { User } from "./User/User";
-import NorthWestIcon from "@mui/icons-material/NorthWest";
 
 export const StreakView = () => {
   const { config } = useConfiguration();
@@ -17,7 +17,7 @@ export const StreakView = () => {
 
   const StreakGrid = () => {
     return (
-      <div className="streak-grid">
+      <div className={styles.streakGrid}>
         {config.userNames.map((userName) => (
           <User userName={userName} key={userName} />
         ))}
@@ -28,7 +28,7 @@ export const StreakView = () => {
   const EmptyState = () => {
     const ConfigPointer = () => {
       return (
-        <div className="pointer">
+        <div className={styles.pointer}>
           <NorthWestIcon fontSize="large" />
         </div>
       );
@@ -45,7 +45,7 @@ export const StreakView = () => {
   };
 
   return (
-    <div className="container">
+    <div className={styles.container}>
       <Header />
       {config.userNames.length === 0 && <EmptyState />}
       <StreakGrid />

src/components/StreakView/User/FireBorder/FireBorder.less → src/components/StreakView/User/FireBorder/FireBorder.module.less

@@ -76,7 +76,7 @@
   }
 }
 
-svg {
+.filter-svg {
   width: 0;
   height: 0;
 }

src/components/StreakView/User/FireBorder/FireBorder.tsx

@@ -1,4 +1,4 @@
-import "./FireBorder.less";
+import styles from "./FireBorder.module.less";
 
 type FireBorderProps = {
   children?: React.ReactNode;
@@ -8,10 +8,12 @@ type FireBorderProps = {
 export const FireBorder = (props: FireBorderProps) => {
   return (
     <>
-      <div className={`fire-border ${props.enabled ? "enabled" : ""}`}>
-        <div className="content">{props.children}</div>
+      <div
+        className={`${styles.fireBorder} ${props.enabled && styles.enabled}`}
+      >
+        <div className={styles.content}>{props.children}</div>
       </div>
-      <svg>
+      <svg className={styles.filterSvg}>
         <filter id="wavy">
           <feTurbulence
             type="turbulence"

src/components/StreakView/User/StreakBlock/StreakBlock.tsx

@@ -1,4 +1,4 @@
-import "./StreakBlock.less";
+import styles from "./StreakBlock.module.less";
 
 type StreakBlockProps = {
   days: number;
@@ -7,20 +7,20 @@ export const StreakBlock = (props: StreakBlockProps) => {
   const isActive = props.days > 0;
 
   return (
-    <div className="streak-block">
-      <div className="container">
+    <div className={styles.streakBlock}>
+      <div className={styles.container}>
         {isActive && (
           <>
-            <Star positionClass="star-position-a" />
-            <Star positionClass="star-position-b" />
+            <Star positionClass={styles.starPositionA} />
+            <Star positionClass={styles.starPositionB} />
           </>
         )}
         {isActive ? (
-          <Flame positionClass="flame-position" />
+          <Flame positionClass={styles.flamePosition} />
         ) : (
-          <DisabledFlame positionClass="flame-position" />
+          <DisabledFlame positionClass={styles.flamePosition} />
         )}
-        <div className="streak-number-wrapper">
+        <div className={styles.streakNumberWrapper}>
           <h1>{props.days}</h1>
           <span>Day streak</span>
         </div>
@@ -32,7 +32,7 @@ export const StreakBlock = (props: StreakBlockProps) => {
 const Star = (props: { positionClass: string }) => {
   return (
     <img
-      className={`icon ${props.positionClass}`}
+      className={`${styles.icon} ${props.positionClass}`}
       src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/f68d647fdc1536870945a5c84f3b3b82.svg"
     />
   );
@@ -41,7 +41,7 @@ const Star = (props: { positionClass: string }) => {
 const Flame = (props: { positionClass: string }) => {
   return (
     <img
-      className={`icon ${props.positionClass}`}
+      className={`${styles.icon} ${props.positionClass}`}
       src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/8a6dca76019d059a81c4c7c1145aa7a4.svg"
     />
   );
@@ -50,7 +50,7 @@ const Flame = (props: { positionClass: string }) => {
 const DisabledFlame = (props: { positionClass: string }) => {
   return (
     <img
-      className={`icon ${props.positionClass}`}
+      className={`${styles.icon} ${props.positionClass}`}
       src="https://d35aaqx5ub95lt.cloudfront.net/images/icons/ba95e6081679d9d7e8c132da5cfce1ec.svg"
     />
   );

src/components/StreakView/User/User.tsx

@@ -2,7 +2,7 @@ import { useUserData } from "../../../hooks/useUserData";
 import { proxyify } from "../../../utilities";
 import { FireBorder } from "./FireBorder/FireBorder";
 import { StreakBlock } from "./StreakBlock/StreakBlock";
-import "./User.less";
+import styles from "./User.module.less";
 
 type UserProps = {
   userName: string;
@@ -20,11 +20,11 @@ export const User = (props: UserProps) => {
 
   return (
     <FireBorder enabled={user.streak.didALessonToday()}>
-      <div className="user">
+      <div className={styles.user}>
         <h2>{user.name}</h2>
         <i>({user.currentCourse?.title})</i>
         <img
-          className="avatar"
+          className={styles.avatar}
           alt={user.name}
           src={proxyify(user.pictureUrl)}
         />

tsconfig.json

@@ -19,6 +19,17 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+
+    "plugins": [
+      {
+        /* Configure checkin + intellisense for css modules */
+        "name": "typescript-plugin-css-modules",
+        "options": {
+          "goToDefinition": true,
+          "classnameTransform": "camelCaseOnly",
+        },
+      },
+    ],
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }],

vite.config.ts

@@ -5,4 +5,9 @@ import react from "@vitejs/plugin-react-swc";
 export default defineConfig({
   plugins: [react()],
   base: "/duolingo-streak-checker",
+  css: {
+    modules: {
+      localsConvention: "camelCase",
+    },
+  },
 });