fix: dev errors + outdated scss

Author: kevinjosethomas

package-lock.json

@@ -2,7 +2,7 @@
   "name": "next-app",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "export": "next export",
@@ -17,8 +17,8 @@
     "@vercel/analytics": "^1.3.1",
     "chart.js": "^4.4.2",
     "chess.ts": "^0.16.2",
+    "chessground": "^8.3.5",
     "chroma-js": "^2.4.2",
-    "classnames": "^2.3.1",
     "exponential-backoff": "^3.1.1",
     "framer-motion": "^11.5.6",
     "gray-matter": "^4.0.3",

package.json

@@ -6,6 +6,9 @@ export const useLocalStorage = <T>(
 ): [T, (arg0: T) => void] => {
   const isClient = typeof window !== 'undefined'
   const [storedValue, setStoredValue] = useState<T>(() => {
+    if (!isClient) {
+      return initialValue
+    }
     try {
       const item = window.localStorage.getItem(key)
       return item ? JSON.parse(item) : initialValue
@@ -20,8 +23,9 @@ export const useLocalStorage = <T>(
       const valueToStore =
         value instanceof Function ? value(storedValue) : value
       setStoredValue(valueToStore)
-      if (isClient)
-        window?.localStorage?.setItem(key, JSON.stringify(valueToStore))
+      if (isClient) {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore))
+      }
     } catch (error) {
       console.error(error)
     }

src/hooks/useLocalStorage/useLocalStorage.ts

@@ -1,28 +1,28 @@
-@import './theme';
-@import './layout';
+@use 'theme';
+@use 'layout';
 
 @mixin rounded {
   border-radius: 10px;
 }
 
 @mixin shadowed {
-  @include themed-styles {
-    filter: drop-shadow(0px 2px 8px rgba(themed-colour('background0'), 1));
+  @include theme.themed-styles {
+    filter: drop-shadow(0px 2px 8px rgba(theme.themed-colour('background0'), 1));
   }
 }
 
 @mixin boxed {
   @include rounded;
-  @include themed-styles {
-    background-color: rgba(themed-colour('background0'), 0.75);
+  @include theme.themed-styles {
+    background-color: rgba(theme.themed-colour('background0'), 0.75);
   }
 }
 
 @mixin scroll {
   &::-webkit-scrollbar {
     width: 7px;
 
-    @include mobile {
+    @include layout.mobile {
       width: 4px;
       height: 8px;
     }
@@ -36,13 +36,13 @@
     border-radius: 1px;
     transition: 150ms;
 
-    @include themed-styles {
-      background-color: rgba(themed-colour('human-accent'), 0.4);
+    @include theme.themed-styles {
+      background-color: rgba(theme.themed-colour('human-accent'), 0.4);
     }
 
     &:hover {
-      @include themed-styles {
-        background-color: rgba(themed-colour('human-accent'), 0.65);
+      @include theme.themed-styles {
+        background-color: rgba(theme.themed-colour('human-accent'), 0.65);
       }
     }
   }

src/styles/_base.scss

@@ -1,3 +1,7 @@
+@use 'sass:map';
+
+$theme-map: null !default;
+
 $themes: (
   light: (
     backdrop: #f6f6f6,
@@ -28,8 +32,8 @@ $themes: (
     :global(.theme-#{$theme}) & {
       $theme-map: () !global;
       @each $key, $submap in $map {
-        $value: map-get($map, '#{$key}');
-        $theme-map: map-merge(
+        $value: map.get($map, '#{$key}');
+        $theme-map: map.merge(
           $theme-map,
           (
             $key: $value,
@@ -45,8 +49,8 @@ $themes: (
     .theme-#{$theme} & {
       $theme-map: () !global;
       @each $key, $submap in $map {
-        $value: map-get($map, '#{$key}');
-        $theme-map: map-merge(
+        $value: map.get($map, '#{$key}');
+        $theme-map: map.merge(
           $theme-map,
           (
             $key: $value,
@@ -60,5 +64,5 @@ $themes: (
 }
 
 @function themed-colour($key) {
-  @return map-get($theme-map, $key);
+  @return map.get($theme-map, $key);
 }

src/styles/_theme.scss

@@ -1,7 +1,7 @@
-@import './theme';
-@import './layout';
-@import './fonts';
-@import './base';
+@use 'theme';
+@use 'layout';
+@use 'fonts';
+@use 'base';
 
 button {
   &:disabled {
@@ -31,12 +31,12 @@ a {
 
   width: 100%;
   min-height: 100vh;
-  @include themed-styles {
-    background-color: themed-colour(backdrop);
-    color: themed-colour(text-primary);
+  @include theme.themed-styles {
+    background-color: theme.themed-colour(backdrop);
+    color: theme.themed-colour(text-primary);
   }
 
-  @include mobile {
+  @include layout.mobile {
     flex-direction: column;
     overflow-x: hidden;
   }
@@ -45,7 +45,7 @@ a {
 .content-container {
   flex-grow: 1;
   position: relative;
-  @include rounded;
+  @include base.rounded;
   display: flex;
   flex-direction: column;
 }
@@ -65,7 +65,7 @@ h5 {
   flex-grow: 1;
   margin-left: 2vw;
 
-  @include mobile {
+  @include layout.mobile {
     flex-direction: column;
     margin-left: 0px;
   }
@@ -79,7 +79,7 @@ h5 {
   flex-grow: 1;
   padding: 2em;
 
-  @include mobile {
+  @include layout.mobile {
     width: 100%;
     padding: 1em;
     max-width: none;
@@ -96,15 +96,15 @@ h5 {
   gap: 10px;
   margin: 10px;
 
-  @include mobile {
+  @include layout.mobile {
     margin: 0px;
     width: 100%;
     max-width: none;
   }
 }
 
 .action {
-  @include boxed;
+  @include base.boxed;
   width: 100%;
   padding: 25px;
 }