Remove SASS, use vanilla CSS

README.md

@@ -4,7 +4,7 @@
 - Customizable controls
 - Installable for offline play
 
-Built with Vite + React + TypeScript + SASS
+Built with Vite + React + TypeScript
 
 ---
 

package.json

@@ -13,8 +13,7 @@
     "canvas-confetti": "^1.9.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-swipeable": "^7.0.1",
-    "sass": "^1.69.5"
+    "react-swipeable": "^7.0.1"
   },
   "devDependencies": {
     "@types/canvas-confetti": "^1.6.4",

src/App.tsx

@@ -2,13 +2,13 @@ import { useState, useEffect } from "react";
 import { defaultSettings, SettingsContext, type Settings } from "./hooks/useSettingsContext";
 import { GameStateContext, type GameState } from "./hooks/useGameStateContext";
 import confetti from "canvas-confetti";
-import styles from "./App.module.scss";
+import styles from "./App.module.css";
 import generateTiles from "./utils/generateTiles";
 import Tile from "./components/tile/Tile";
 import PregameTile from "./components/tile/PregameTile";
 import Header from "./components/header/Header";
 
-const version = "1.0.6";
+const version = "1.0.7";
 
 function App() {
   const settingsOnLoad: Settings = { ...defaultSettings };

src/components/aboutModal/AboutModal.module.scss → src/components/aboutModal/AboutModal.module.css

@@ -28,11 +28,10 @@
       border: 2px solid rgb(55, 48, 9);
     }
   }
-}
-
-.start {
-  width: 100%;
-  height: 40px;
-  font-family: "rs-quill";
-  font-size: 18px;
+  .start {
+    width: 100%;
+    height: 40px;
+    font-family: "rs-quill";
+    font-size: 18px;
+  }
 }

src/components/aboutModal/AboutModal.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, type Dispatch } from "react";
-import styles from "./AboutModal.module.scss";
+import styles from "./AboutModal.module.css";
 
 export default function AboutModal({ shown, setShown }: { shown: boolean; setShown: Dispatch<boolean> }) {
   const dialogRef = useRef<HTMLDialogElement | null>(null);

src/components/header/Header.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import styles from "./Header.module.scss";
+import styles from "./Header.module.css";
 import { useGameStateContext } from "../../hooks/useGameStateContext";
 import { useSettingsContext } from "../../hooks/useSettingsContext";
 import SettingsModal from "../settingsModal/SettingsModal";

src/components/instaloseToast/InstaloseToast.tsx

@@ -1,4 +1,4 @@
-import styles from "./InstaloseToast.module.scss";
+import styles from "./InstaloseToast.module.css";
 
 export default function InstaloseToast({ open }: { open: boolean }) {
   return (

src/components/mineCounter/MineCounter.tsx

@@ -1,5 +1,5 @@
 import { useGameStateContext } from "../../hooks/useGameStateContext";
-import styles from "../../styles/counter.module.scss";
+import styles from "../../styles/counter.module.css";
 
 export default function MineCounter() {
   const { gameState } = useGameStateContext();

src/components/recordModal/RecordModal.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, type Dispatch } from "react";
-import styles from "./RecordModal.module.scss";
+import styles from "./RecordModal.module.css";
 import { useSettingsContext } from "../../hooks/useSettingsContext";
 import { difficultiesDict, sizesDict } from "../../utils/settings";
 

src/components/settingsModal/SettingsModal.tsx

@@ -1,6 +1,6 @@
 import { useRef, useEffect, type Dispatch } from "react";
-import { Settings, useSettingsContext } from "../../hooks/useSettingsContext";
-import styles from "./SettingsModal.module.scss";
+import { type Settings, useSettingsContext } from "../../hooks/useSettingsContext";
+import styles from "./SettingsModal.module.css";
 import { sizesDict, difficultiesDict, controlsDict } from "../../utils/settings";
 
 export default function SettingsModal({ shown, setShown }: { shown: boolean; setShown: Dispatch<boolean> }) {

src/components/tile/PregameTile.tsx

@@ -1,4 +1,4 @@
-import styles from "./Tile.module.scss";
+import styles from "./Tile.module.css";
 import { useGameStateContext } from "../../hooks/useGameStateContext";
 import { useSettingsContext } from "../../hooks/useSettingsContext";
 import generateTiles from "../../utils/generateTiles";

src/components/tile/Tile.module.scss → src/components/tile/Tile.module.css

@@ -34,31 +34,30 @@
     margin: 0;
     text-shadow: none;
   }
-}
-
-.is-1 {
-  color: rgb(138, 88, 0);
-}
-.is-2 {
-  color: green;
-}
-.is-3 {
-  color: rgb(201, 0, 0);
-}
-.is-4 {
-  color: blue;
-}
-.is-5 {
-  color: purple;
-}
-.is-6 {
-  color: rgb(0, 131, 151);
-}
-.is-7 {
-  color: rgb(159, 0, 101);
-}
-.is-8 {
-  color: black;
+  &.is-1 {
+    color: rgb(138, 88, 0);
+  }
+  &.is-2 {
+    color: green;
+  }
+  &.is-3 {
+    color: rgb(201, 0, 0);
+  }
+  &.is-4 {
+    color: blue;
+  }
+  &.is-5 {
+    color: purple;
+  }
+  &.is-6 {
+    color: rgb(0, 131, 151);
+  }
+  &.is-7 {
+    color: rgb(159, 0, 101);
+  }
+  &.is-8 {
+    color: black;
+  }
 }
 
 @keyframes plantFlag {

src/components/tile/Tile.tsx

@@ -1,7 +1,7 @@
 import { useSwipeable } from "react-swipeable";
 import { GameState, useGameStateContext } from "../../hooks/useGameStateContext";
 import { useSettingsContext } from "../../hooks/useSettingsContext";
-import styles from "./Tile.module.scss";
+import styles from "./Tile.module.css";
 import chord from "../../utils/chord";
 import floodFill from "../../utils/floodFill";
 

src/components/timer/Timer.tsx

@@ -3,7 +3,7 @@ import { useGameStateContext } from "../../hooks/useGameStateContext";
 import { useSettingsContext } from "../../hooks/useSettingsContext";
 import RecordModal from "../recordModal/RecordModal";
 import InstaloseToast from "../instaloseToast/InstaloseToast";
-import styles from "../../styles/counter.module.scss";
+import styles from "../../styles/counter.module.css";
 
 export default function Timer() {
   const { gameState, setGameState } = useGameStateContext();

src/styles/counter.module.scss → src/styles/counter.module.css

@@ -1,4 +1,4 @@
-// A shared module for the timer and the mine counter
+/* A shared module for the timer and the mine counter */
 
 .counter {
   border: 1px solid rgb(66, 55, 41);