feat(dev): eslint and stylelint on dev, improvements, cleanup

.gitignore

@@ -8,6 +8,7 @@ dist/
 
 # Files
 package-lock.json
+.stylelintcache
 yarn-error.log
 .eslintcache
 stats.json

.stylelintrc.json

@@ -1,8 +1,6 @@
 {
-  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
-  "formatter": "stylelint-checkstyle-formatter",
+  "extends": ["stylelint-config-standard-scss"],
   "plugins": ["stylelint-scss"],
-  "customSyntax": "postcss-scss",
   "rules": {
     "selector-class-pattern": null,
     "no-descending-specificity": null

package.json

@@ -42,15 +42,14 @@
     "eslint-config-prettier": "^8.7.0",
     "eslint-config-react-app": "^7.0.1",
     "husky": "^8.0.3",
-    "postcss-scss": "^4.0.6",
     "prettier": "^2.8.4",
     "sass": "^1.59.2",
     "stylelint": "^15.2.0",
-    "stylelint-checkstyle-formatter": "^0.1.2",
-    "stylelint-config-prettier-scss": "^0.0.1",
     "stylelint-config-standard-scss": "^7.0.1",
     "stylelint-scss": "^4.4.0",
-    "vite": "4.1.4"
+    "vite": "4.1.4",
+    "vite-plugin-checker": "^0.5.6",
+    "vite-plugin-progress": "^0.0.6"
   },
   "scripts": {
     "dev": "vite",
@@ -58,8 +57,8 @@
     "translations": "cd scripts && node updatetranslations.js",
     "build": "vite build",
     "pretty": "prettier --write \"./**/*.{js,jsx,json,scss,css}\"",
-    "lint": "eslint --ext .js,.jsx src/** && stylelint \"**/*.scss\"",
-    "lint:fix": "eslint --ext .js,.jsx src/** --fix && stylelint \"**/*.scss\" --fix",
+    "lint": "eslint \"./src/**/*.{js,jsx}\" && stylelint \"./src/**/*.{scss,css}\"",
+    "lint:fix": "eslint \"./src/**/*.{js,jsx}\" --fix && stylelint \"./src/**/*.{scss,css}\" --fix",
     "postinstall": "husky install"
   }
 }

pnpm-lock.yaml

@@ -22,7 +22,6 @@ specifiers:
   fast-blurhash: ^1.1.2
   husky: ^8.0.3
   image-conversion: ^2.1.1
-  postcss-scss: ^4.0.6
   prettier: ^2.8.4
   react: ^18.2.0
   react-clock: 4.1.0
@@ -34,11 +33,11 @@ specifiers:
   react-toastify: 9.1.1
   sass: ^1.59.2
   stylelint: ^15.2.0
-  stylelint-checkstyle-formatter: ^0.1.2
-  stylelint-config-prettier-scss: ^0.0.1
   stylelint-config-standard-scss: ^7.0.1
   stylelint-scss: ^4.4.0
   vite: 4.1.4
+  vite-plugin-checker: ^0.5.6
+  vite-plugin-progress: ^0.0.6
 
 dependencies:
   '@eartharoid/i18n': 1.2.1
@@ -72,15 +71,14 @@ devDependencies:
   eslint-config-prettier: 8.7.0_eslint@8.36.0
   eslint-config-react-app: 7.0.1_eslint@8.36.0
   husky: 8.0.3
-  postcss-scss: 4.0.6
   prettier: 2.8.4
   sass: 1.59.2
   stylelint: 15.2.0
-  stylelint-checkstyle-formatter: 0.1.2
-  stylelint-config-prettier-scss: 0.0.1_stylelint@15.2.0
   stylelint-config-standard-scss: 7.0.1_stylelint@15.2.0
   stylelint-scss: 4.4.0_stylelint@15.2.0
   vite: 4.1.4_sass@1.59.2
+  vite-plugin-checker: 0.5.6_rzude4b3lxomcvk3ztmusddici
+  vite-plugin-progress: 0.0.6_vite@4.1.4
 
 packages:
 
@@ -2547,6 +2545,10 @@ packages:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
 
+  /@types/node/10.17.60:
+    resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
+    dev: true
+
   /@types/node/18.11.18:
     resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
     dev: true
@@ -2792,6 +2794,13 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ansi-escapes/4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.21.3
+    dev: true
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -3141,6 +3150,11 @@ packages:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
     dev: true
 
+  /commander/8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+    dev: true
+
   /compare-func/2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
     dependencies:
@@ -4659,6 +4673,10 @@ packages:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
     dev: true
 
+  /lodash.pick/4.4.0:
+    resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==}
+    dev: true
+
   /lodash.snakecase/4.1.1:
     resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
     dev: true
@@ -5083,6 +5101,11 @@ packages:
     hasBin: true
     dev: true
 
+  /progress/2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
   /prop-types/15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -5109,6 +5132,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /rd/2.0.1:
+    resolution: {integrity: sha512-/XdKU4UazUZTXFmI0dpABt8jSXPWcEyaGdk340KdHnsEOdkTctlX23aAK7ChQDn39YGNlAJr1M5uvaKt4QnpNw==}
+    dependencies:
+      '@types/node': 10.17.60
+    dev: true
+
   /react-clock/4.1.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-1BxIDxH8PcEBEUZDIXXS2njK5Gb84U5egTKXZDimF4aKO1bq+/bdX+chMNouLmaOSYB1of3DriLb0WhLOr8lAA==}
     peerDependencies:
@@ -5602,33 +5631,6 @@ packages:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
     dev: true
 
-  /stylelint-checkstyle-formatter/0.1.2:
-    resolution: {integrity: sha512-bePbF16ei9dCza2SlExRCGYMLVWsw0uQ2WJ5bakuL7lyprlENWz5/3qCZpneRMsFJkq+qtYuvomMoY/VI3AbPw==}
-    dependencies:
-      lodash: 4.17.21
-    dev: true
-
-  /stylelint-config-prettier-scss/0.0.1_stylelint@15.2.0:
-    resolution: {integrity: sha512-lBAYG9xYOh2LeWEPC/64xeUxwOTnQ8nDyBijQoWoJb10/bMGrUwnokpt8jegGck2Vbtxh6XGwH63z5qBcVHreQ==}
-    engines: {node: '>= 12'}
-    hasBin: true
-    peerDependencies:
-      stylelint: '>=11.0.0'
-    dependencies:
-      stylelint: 15.2.0
-      stylelint-config-prettier: 9.0.4_stylelint@15.2.0
-    dev: true
-
-  /stylelint-config-prettier/9.0.4_stylelint@15.2.0:
-    resolution: {integrity: sha512-38nIGTGpFOiK5LjJ8Ma1yUgpKENxoKSOhbDNSemY7Ep0VsJoXIW9Iq/2hSt699oB9tReynfWicTAoIHiq8Rvbg==}
-    engines: {node: '>= 12'}
-    hasBin: true
-    peerDependencies:
-      stylelint: '>=11.0.0'
-    dependencies:
-      stylelint: 15.2.0
-    dev: true
-
   /stylelint-config-recommended-scss/9.0.1_stylelint@15.2.0:
     resolution: {integrity: sha512-qAmz/TdrqslwiMTuLM3QXeISUkfEDUXGMfRBCHm/xrkCJNnQefv+mzG2mWTsWkqcVk8HAyUkug10dwAcYp2fCQ==}
     peerDependencies:
@@ -5802,6 +5804,10 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
+  /tiny-invariant/1.3.1:
+    resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
+    dev: true
+
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -5887,6 +5893,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /type-fest/0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+    dev: true
+
   /type-fest/0.6.0:
     resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
     engines: {node: '>=8'}
@@ -5995,6 +6006,70 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vite-plugin-checker/0.5.6_rzude4b3lxomcvk3ztmusddici:
+    resolution: {integrity: sha512-ftRyON0gORUHDxcDt2BErmsikKSkfvl1i2DoP6Jt2zDO9InfvM6tqO1RkXhSjkaXEhKPea6YOnhFaZxW3BzudQ==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      eslint: '>=7'
+      meow: ^9.0.0
+      optionator: ^0.9.1
+      stylelint: '>=13'
+      typescript: '*'
+      vite: '>=2.0.0'
+      vls: '*'
+      vti: '*'
+      vue-tsc: '*'
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      meow:
+        optional: true
+      optionator:
+        optional: true
+      stylelint:
+        optional: true
+      typescript:
+        optional: true
+      vls:
+        optional: true
+      vti:
+        optional: true
+      vue-tsc:
+        optional: true
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      commander: 8.3.0
+      eslint: 8.36.0
+      fast-glob: 3.2.12
+      fs-extra: 11.1.0
+      lodash.debounce: 4.0.8
+      lodash.pick: 4.4.0
+      npm-run-path: 4.0.1
+      strip-ansi: 6.0.1
+      stylelint: 15.2.0
+      tiny-invariant: 1.3.1
+      vite: 4.1.4_sass@1.59.2
+      vscode-languageclient: 7.0.0
+      vscode-languageserver: 7.0.0
+      vscode-languageserver-textdocument: 1.0.8
+      vscode-uri: 3.0.7
+    dev: true
+
+  /vite-plugin-progress/0.0.6_vite@4.1.4:
+    resolution: {integrity: sha512-pIK2TVEY4XFGrz10CQDdEufBBCDaV0geRHfXV3abGTBr+OF9O0Zmd3ZDrHJXDv4Rl3qAQP4BTCuPYQ3XqstmqA==}
+    engines: {node: '>=14', pnpm: '>=7.0.0'}
+    peerDependencies:
+      vite: '>2.0.0-0'
+    dependencies:
+      picocolors: 1.0.0
+      progress: 2.0.3
+      rd: 2.0.1
+      vite: 4.1.4_sass@1.59.2
+    dev: true
+
   /vite/4.1.4_sass@1.59.2:
     resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -6029,6 +6104,46 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vscode-jsonrpc/6.0.0:
+    resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==}
+    engines: {node: '>=8.0.0 || >=10.0.0'}
+    dev: true
+
+  /vscode-languageclient/7.0.0:
+    resolution: {integrity: sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==}
+    engines: {vscode: ^1.52.0}
+    dependencies:
+      minimatch: 3.1.2
+      semver: 7.3.8
+      vscode-languageserver-protocol: 3.16.0
+    dev: true
+
+  /vscode-languageserver-protocol/3.16.0:
+    resolution: {integrity: sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==}
+    dependencies:
+      vscode-jsonrpc: 6.0.0
+      vscode-languageserver-types: 3.16.0
+    dev: true
+
+  /vscode-languageserver-textdocument/1.0.8:
+    resolution: {integrity: sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==}
+    dev: true
+
+  /vscode-languageserver-types/3.16.0:
+    resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==}
+    dev: true
+
+  /vscode-languageserver/7.0.0:
+    resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==}
+    hasBin: true
+    dependencies:
+      vscode-languageserver-protocol: 3.16.0
+    dev: true
+
+  /vscode-uri/3.0.7:
+    resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
+    dev: true
+
   /warning/4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
     dependencies:

postcss.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: {},
-};

src/components/helpers/sharemodal/sharemodal.scss

@@ -8,6 +8,7 @@
   gap: 15px;
   padding: 15px;
   width: 320px;
+
   @include themed {
     background: t($modal-secondaryColour);
   }
@@ -48,6 +49,7 @@
   button {
     place-items: center;
     display: grid;
+
     @include basicIconButton(11px, 1.3rem, modal);
   }
 

src/components/helpers/tooltip/tooltip.scss

@@ -110,6 +110,7 @@
   justify-content: center;
   flex-flow: column;
   gap: 10px;
+
   @include themed {
     background-color: t($modal-background);
     border-radius: t($borderRadius);

src/components/modals/main/scss/index.scss

@@ -1,13 +1,10 @@
 @import 'scss/variables';
-
 @import 'modules/sidebar';
 @import 'modules/navbar';
 @import 'modules/tab-content';
 @import 'modules/links';
 @import 'modules/scrollbars';
-
 @import 'settings/main';
-
 @import 'marketplace/main';
 
 .Overlay {
@@ -84,6 +81,7 @@
 #modal {
   height: 80vh;
   width: clamp(60vw, 1200px, 90vw);
+
   @include themed {
     background-color: t($modal-background);
   }
@@ -120,6 +118,7 @@ h5 {
   display: inline-block;
   width: 50px;
   height: 50px;
+
   @include themed {
     border: 3px solid t($modal-sidebar);
     border-radius: 50%;
@@ -134,6 +133,7 @@ h5 {
     transform: rotate(360deg);
   }
 }
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -188,6 +188,7 @@ h5 {
       flex-direction: row-reverse;
       justify-content: space-between;
       padding: 5px 5px 5px 20px;
+
       @include themed {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
@@ -222,6 +223,7 @@ h5 {
   padding: 25px;
   margin-top: 20px;
   transition: 0.5s;
+
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
@@ -263,6 +265,7 @@ h5 {
   bottom: 0;
   padding: 15px;
   gap: 15px;
+
   @include themed {
     background-color: t($modal-secondaryColour);
     border-radius: t($borderRadius);
@@ -284,6 +287,7 @@ h5 {
   svg {
     margin: 0 !important;
   }
+
   @extend %tabText;
 }
 
@@ -321,6 +325,7 @@ h5 {
         place-items: center;
       }
     }
+
     @include themed {
       background-color: t($modal-sidebarActive);
       border-radius: t($borderRadius);
@@ -350,6 +355,7 @@ h5 {
       border-radius: 100%;
       display: grid;
       place-items: center;
+
       @include themed {
         background-color: t($modal-sidebarActive);
       }

src/components/modals/main/scss/marketplace/_main.scss

@@ -87,6 +87,7 @@
         margin-top: 8px;
         font-size: 12px;
         font-weight: bolder;
+
         @include themed {
           color: t($subColor);
         }
@@ -148,6 +149,7 @@
       box-sizing: border-box !important;
       border-radius: 12px 12px 0 0;
       backdrop-filter: blur(40px) saturate(150%) brightness(75%);
+
       @include themed {
         background-image: linear-gradient(to bottom, transparent, t($modal-background));
       }
@@ -196,6 +198,7 @@
   font-size: 12px;
   display: grid;
   place-items: center;
+
   @include themed {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
@@ -519,6 +522,7 @@ p.author {
 a.collectionButton {
   height: 40px;
   text-decoration: none;
+
   @include themed {
     border-radius: t($borderRadius);
   }
@@ -562,6 +566,7 @@ a.collectionButton {
   padding: 10px 30px;
   border-radius: 10px;
   font-size: 18px;
+
   @include themed {
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
     background: t($modal-sidebar);
@@ -570,6 +575,7 @@ a.collectionButton {
   input {
     all: unset;
   }
+
   @include themed {
     &:focus-within {
       background: t($modal-sidebarActive);

src/components/modals/main/scss/modules/_navbar.scss

@@ -1,6 +1,7 @@
 .navbar-item {
   flex-flow: row !important;
   padding: 0 15px;
+
   @include themed {
     background: t($modal-secondaryColour) !important;
     border-radius: t($borderRadius) !important;

src/components/modals/main/scss/modules/_scrollbars.scss

@@ -4,6 +4,7 @@
   width: 6px;
   height: 6px;
   border-radius: 12px;
+
   @include themed {
     background: t($modal-sidebar);
   }

src/components/modals/main/scss/modules/_tab-content.scss

@@ -4,12 +4,14 @@
   button {
     @include modal-button(standard);
   }
+
   @include themed {
     padding: 1rem 3rem 3rem;
     display: flex;
     flex-direction: column;
     width: 100%;
     background: t($modal-background);
+
     @extend %tabText;
 
     hr {
@@ -73,6 +75,7 @@
 
 table {
   border-collapse: separate;
+
   @include themed {
     border-radius: t($borderRadius);
     margin-top: 20px;
@@ -149,6 +152,7 @@ table {
     place-items: center;
     padding: 15px;
     font-size: 25px;
+
     @include themed {
       background: t($modal-sidebarActive);
     }
@@ -176,6 +180,7 @@ table {
   .messageAction {
     float: right;
   }
+
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);

src/components/modals/main/scss/settings/_main.scss

@@ -1,7 +1,6 @@
 @import 'modules/resetmodal';
 @import 'scss/variables';
 @import 'modules/material-ui';
-
 @import 'modules/tabs/about';
 @import 'modules/tabs/changelog';
 @import 'modules/tabs/order';
@@ -17,6 +16,7 @@ input {
     appearance: none;
     vertical-align: middle;
     background: none;
+
     @include themed {
       border: t($modal-sidebarActive) 1px solid;
     }
@@ -55,6 +55,7 @@ input {
   /* date picker */
   &[type='date'] {
     width: 260px;
+
     @include themed {
       background: t($modal-sidebar);
       border: 3px solid t($modal-sidebarActive);
@@ -108,6 +109,7 @@ h4 {
 
     svg {
       font-size: 30px;
+
       @include themed {
         color: t($subColor);
       }
@@ -210,6 +212,7 @@ h4 {
   display: flex;
   flex-flow: row !important;
   align-items: center;
+
   @include themed {
     background: t($modal-sidebarActive);
     border-radius: t($borderRadius);
@@ -220,6 +223,7 @@ h4 {
     font-size: 20px !important;
     padding: 15px;
     border-radius: 100%;
+
     @include themed {
       background: t($modal-sidebar);
     }
@@ -228,6 +232,7 @@ h4 {
 
 .statSection.rightPanel {
   padding: 25px;
+
   @include themed {
     border-radius: t($borderRadius);
     background: t($modal-sidebar);

src/components/modals/main/scss/settings/modules/tabs/_about.scss

@@ -29,6 +29,7 @@
   img {
     width: 75px;
     height: auto;
+
     @include themed {
       border-radius: t($borderRadius);
     }
@@ -37,6 +38,7 @@
 
 .subtitle-photographers {
   font-size: 16px;
+
   @include themed {
     color: t($color);
 

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -48,6 +48,7 @@
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   padding: 20px;
   grid-gap: 20px;
+
   @include themed {
     div {
       border-radius: t($borderRadius);
@@ -87,6 +88,7 @@
     .iconButton {
       width: calc(100% - 22px);
       margin-top: 10px;
+
       @include basicIconButton(11px, 1.3rem, modal);
     }
   }
@@ -105,6 +107,7 @@
   align-items: center;
   justify-content: center;
   margin-top: 16px;
+
   @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);
@@ -122,6 +125,7 @@
 
     .quotediv .author-holder .author .author-content .title {
       font-size: 1em !important;
+
       @include themed {
         color: t($color) !important;
       }

src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss

@@ -13,6 +13,7 @@ div.color-preview-area > div > div:nth-child(5) {
 
 .ui-color-picker {
   padding: 10px;
+
   @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);

src/components/modals/welcome/welcome.scss

@@ -15,6 +15,7 @@
   .MuiFormControlLabel-root {
     margin-right: 0;
   }
+
   @extend %tabText;
 
   height: 80vh;
@@ -28,6 +29,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     @include themed {
       background-color: t($modal-sidebar);
     }
@@ -163,6 +165,7 @@
   display: flex;
   flex-flow: column;
   align-items: center;
+
   @include themed {
     background: t($modal-sidebar);
     color: t($color);
@@ -196,6 +199,7 @@ a.privacy {
 .examples {
   img {
     width: 60%;
+
     @include themed {
       border-radius: t($borderRadius);
     }
@@ -272,6 +276,7 @@ a.privacy {
     text-decoration: none;
     margin-left: auto;
     padding: 0 20px;
+
     @include modal-button(standard);
   }
 }

src/components/widgets/background/scss/_photoinformation.scss

@@ -29,6 +29,7 @@
         display: flex;
         padding-top: 5px;
         gap: 20px;
+
         @include themed {
           color: t($subColor);
         }
@@ -53,6 +54,7 @@
 
         a {
           text-decoration: none;
+
           @include themed {
             color: t($subColor);
           }
@@ -232,6 +234,7 @@
   .link {
     text-decoration: none;
     cursor: pointer;
+
     @include themed {
       color: t($link);
     }
@@ -262,6 +265,7 @@
     .stats {
       display: flex;
       gap: 15px;
+
       @include themed {
         color: t($subColor);
       }
@@ -286,6 +290,7 @@
 
       a {
         text-decoration: none;
+
         @include themed {
           color: t($subColor);
         }
@@ -332,6 +337,7 @@
 
   .credit {
     font-size: 1.4em;
+
     @include themed {
       color: t($subColor);
     }

src/components/widgets/navbar/scss/_notes.scss

@@ -66,6 +66,7 @@
     textarea {
       max-height: 65vh !important;
       overflow-y: visible !important;
+
       @extend %basic;
 
       border: none;

src/components/widgets/navbar/scss/_todo.scss

@@ -29,12 +29,14 @@
   flex-flow: row;
   align-items: center;
   margin: 15px 5px;
+
   @include themed {
     color: t($color) !important;
   }
 
   textarea {
     width: 120px;
+
     @include themed {
       color: t($color) !important;
     }

src/components/widgets/quicklinks/quicklinks.scss

@@ -166,6 +166,7 @@ button.quicklinks {
     padding-left: 5px;
     color: #e74c3c;
   }
+
   @include themed {
     textarea {
       background: t($modal-sidebar);
@@ -203,6 +204,7 @@ button.quicklinks {
   transition: 0.8s;
   text-align: left;
   padding: 20px 40px;
+
   @include themed {
     &:hover {
       background: t($btn-backgroundHover);
@@ -218,6 +220,7 @@ button.quicklinks {
 .quicklinknostyle {
   text-decoration: none;
   font-size: 14px;
+
   @include themed {
     color: t($subColor);
   }

src/components/widgets/quote/quote.scss

@@ -53,6 +53,7 @@ h1.quoteauthor {
 
 .author-knownfor {
   font-size: clamp(13px, 2.5vw, 0.4em);
+
   @include themed {
     color: t($subColor);
   }
@@ -60,6 +61,7 @@ h1.quoteauthor {
 
 .author-license {
   font-size: clamp(8px, 2.5vw, 0.1em);
+
   @include themed {
     color: t($subColor);
   }
@@ -141,6 +143,7 @@ h1.quoteauthor {
 
 .deleteButton {
   height: auto !important;
+
   @include basicIconButton(11px, 1.3rem, modal);
 
   padding: 10px 20px;

src/scss/_mixins.scss

@@ -32,6 +32,7 @@
   @each $theme, $map in $themes {
     .#{$theme} & {
       $theme-map: () !global;
+
       @each $key, $submap in $map {
         $value: map-get(map-get($themes, $theme), '#{$key}');
         $theme-map: map-merge(

src/scss/_variables.scss

@@ -127,6 +127,7 @@ $themes: (
 
     .backTitle {
       cursor: pointer;
+
       @include themed {
         color: t($subColor);
 

vite.config.js

@@ -4,6 +4,8 @@ import path from 'path';
 import fs from 'fs';
 import ADMZip from 'adm-zip';
 import * as pkg from './package.json';
+import progress from 'vite-plugin-progress';
+import checker from 'vite-plugin-checker';
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -59,15 +61,42 @@ const prepareBuilds = () => ({
 });
 
 export default defineConfig({
-  plugins: [react(), prepareBuilds()],
+  plugins: [
+    react(),
+    prepareBuilds(),
+    progress(),
+    checker({
+      eslint: {
+        lintCommand: 'eslint ./src/**/*.{js,jsx} --fix'
+      },
+      stylelint: {
+        lintCommand: 'stylelint ./src/**/*.{scss,css} --fix',
+      }
+    }),
+  ],
   server: {
+    open: true,
     hmr: {
       protocol: 'ws',
       host: 'localhost',
     },
   },
   build: {
-    minify: isProd,
+    minify: isProd ? 'esbuild' : false,
+    sourcemap: !isProd,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.includes('@mui')) {
+              return 'vendor_mui';
+            }
+
+            return 'vendor';
+          }
+        },
+      },
+    },
   },
   resolve: {
     extensions: ['.js', '.jsx'],