Fix GIFs not loading in production

package.json

@@ -62,9 +62,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
+    "postcss": "^8.4.30",
     "prettier": "^2.7.1",
     "stylelint": "^15.10.1",
-    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-order": "^5.0.0",
     "typed-scss-modules": "^7.0.2"
   }

src/components/leaderboard/LeaderboardRow/index.tsx

@@ -1,3 +1,4 @@
+import { isSrcAGif } from '@/lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import type { RefObject } from 'react';
@@ -37,6 +38,7 @@ const LeaderboardRow = ({
         quality={10}
         alt={`Profile picture for ${name}`}
         className={styles.profilePicture}
+        unoptimized={isSrcAGif(image)}
       />
       <div className={styles.nameRank}>
         <span className={styles.name}>

src/lib/utils.ts

@@ -70,3 +70,10 @@ export const getUserRank = (user: PublicProfile): string => {
 
   return ranks[index] ?? '';
 };
+
+/**
+ * Checks whether an image source is a gif
+ * @param src - source of the image
+ * @returns whether or not the source is a gif
+ */
+export const isSrcAGif = (src: string): boolean => /\.gif($|&)/.test(src);

src/styles/themes.scss

@@ -39,7 +39,7 @@
   --theme-text-on-surface-1: #{vars.$light-text-on-surface-1}; // dark text on sidebar
   --theme-text-on-surface-2: #{vars.$light-text-on-surface-2}; // light titles on sidebar
 
-  --invert: percentage($number: 1);
+  --invert: math.percentage($number: 1);
 }
 
 [data-theme='dark'] {
@@ -78,7 +78,7 @@
   --theme-text-on-surface-1: #{vars.$dark-text-on-surface-1}; // dark text on sidebar
   --theme-text-on-surface-2: #{vars.$dark-text-on-surface-2}; // dark titles on sidebar
 
-  --invert: percentage($number: 1);
+  --invert: math.percentage($number: 1);
 }
 
 html,