replaced sass-lint with style-lint

.stylelintrc.json

@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    "stylelint-prettier"
+  ],
+  "extends": [
+    "stylelint-config-standard-scss"
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "scss/at-extend-no-missing-placeholder": null,
+    "no-descending-specificity": null
+  }
+}

package.json

@@ -18,8 +18,8 @@
     "prebuilder": "npm run sass",
     "builder": "electron-builder --publish=never",
     "sass": "sass ./src/pages/settings/settings.scss ./src/pages/settings/settings.css",
-    "sass-lint": "sass-lint -vc ./sass-lint.yml ./src/pages/settings/settings.scss",
+    "style-lint": "npx stylelint **/*.scss",
-    "sass-lint-fix": "sass-lint-auto-fix ./src/pages/settings/settings.scss --config-sass-lint ./sass-lint.yml"
+    "style-lint-fix": "npx stylelint --fix **/*.scss"
   },
   "keywords": [
     "electron",
@@ -46,9 +46,11 @@
     "electron-builder": "^24.2.1",
     "js-yaml": "^4.1.0",
     "markdown-toc": "^1.2.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
-    "sass-lint": "^1.13.1",
+    "stylelint": "^15.6.0",
-    "sass-lint-auto-fix": "^0.21.2"
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-prettier": "^3.0.0",
   },
   "prettier": "@mastermindzh/prettier-config"
 }

sass-lint.yml

@@ -1,21 +0,0 @@
-rules:
-  property-sort-order:
-    - 1
-    - order: "smacss"
-  class-name-format:
-    - 1
-    - convention: "hyphenatedbem"
-  quotes:
-    - 1
-    - style: "double"
-  nesting-depth:
-    - 1
-    - max-depth: 3
-  placeholder-in-extend:
-    - 0
-  no-vendor-prefixes:
-    - 0
-  empty-line-between-blocks:
-    - 0
-  force-pseudo-nesting:
-    - 0

src/pages/settings/settings.scss

@@ -3,7 +3,6 @@
 $black: #17171a;
 $grey-333: #333;
 $white: #f9f9f9;
-
 $tidal-blue: #0ff;
 $tidal-grey: #72777f;
 $tidal-grey-darker: #404248;
@@ -36,16 +35,14 @@ $tidal-grey-darkest: #242528;
   src: url("fonts/NotoSans-Bold.ttf") format("truetype");
 }
 
-$font1: "Noto Sans", Helvetica, sans-serif;
+$font1: "Noto Sans", helvetica, sans-serif;
 
 // --- Mixins ---
 
 @mixin drag($enabled: true) {
   @if $enabled {
     -webkit-app-region: drag;
-  }
+  } @else {
-
-  @else {
     -webkit-app-region: no-drag;
   }
 }
@@ -62,6 +59,7 @@ html {
 
 .external-link {
   @extend button;
+
   text-decoration: underline;
 }
 
@@ -80,6 +78,7 @@ html {
 
   &__drag-area {
     @include drag;
+
     position: absolute;
     width: 100%;
     height: 50px;
@@ -90,6 +89,7 @@ html {
   &__close-button {
     @extend button;
     @include drag(false);
+
     position: absolute;
     top: 12px;
     right: 10px;
@@ -106,7 +106,7 @@ html {
     display: block;
     width: 18px;
     height: 18px;
-    opacity: .7;
+    opacity: 0.7;
   }
 
   // --- Settings tabs ---
@@ -125,8 +125,9 @@ html {
       outline: none;
     }
 
-    &+label {
+    & + label {
       @include drag(false);
+
       display: inline-block;
       position: relative;
       margin-right: 35px;
@@ -138,7 +139,7 @@ html {
       user-select: none;
     }
 
-    &:checked+label {
+    &:checked + label {
       border-bottom: 2px solid $tidal-blue;
       color: $tidal-blue;
     }
@@ -156,7 +157,7 @@ html {
   }
 
   @for $i from 1 to 6 {
-    .settings>input:nth-child(#{$i*2-1}):checked~&>.tabs__section:nth-child(#{$i}) {
+    .settings > input:nth-child(#{$i * 2 - 1}):checked ~ & > .tabs__section:nth-child(#{$i}) {
       display: block;
     }
   }
@@ -217,7 +218,7 @@ html {
       width: 100%;
       margin-bottom: 10px;
       padding: 5px 0;
-      transition: .2s;
+      transition: 0.2s;
       border: 0;
       border-bottom: solid 1px $grey-333;
       outline: none;
@@ -237,38 +238,36 @@ html {
 
 .switch {
   $this: &;
+
   position: relative;
   min-width: 50px;
   height: 28px;
-
   margin-left: 10px;
 
   input {
     transform: scale(0);
     outline: none;
 
-    &:checked+#{$this}__slider {
+    &:checked + #{$this}__slider {
       background-color: $tidal-blue;
 
       &::before {
         transform: translateX(22px);
-        background-color: white;
+        background-color: $white;
       }
     }
 
-    &:focus+#{$this}__slider {
+    &:focus + #{$this}__slider {
       box-shadow: inset 0 0 0 1px $tidal-blue;
     }
   }
 
   &__slider {
     @extend button;
+
     position: absolute;
-    top: 0;
+    inset: 0;
-    right: 0;
+    transition: 0.4s;
-    bottom: 0;
-    left: 0;
-    transition: .4s;
     border-radius: 40px;
     background-color: $tidal-grey-darkest;
 
@@ -278,7 +277,7 @@ html {
       left: 2px;
       width: 24px;
       height: 24px;
-      transition: .4s;
+      transition: 0.4s;
       border-radius: 50%;
       background-color: $white;
       content: "";
@@ -294,7 +293,7 @@ html {
   min-height: 50px;
   max-height: 100px;
   padding: 8px;
-  transition: .2s;
+  transition: 0.2s;
   border: 0;
   border-bottom: 1px solid transparent;
   background: $tidal-grey-darkest;
@@ -345,11 +344,12 @@ html {
 
   &__button {
     @extend button;
+
     display: block;
     height: 48px;
     margin: auto;
     padding: 0 24px;
-    transition: .2s;
+    transition: 0.2s;
     border: 0;
     border-radius: 12px;
     background: $tidal-grey-darker;