Replace deprecated sass-lint with stylelint

Author: peruukki

.sass-lint.yml

@@ -5,7 +5,8 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "editorConfig.editorConfig",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "stylelint.vscode-stylelint"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []

.vscode/extensions.json

@@ -2,6 +2,7 @@
 
 .clock {
   @include base.stretch;
+
   text-align: right;
 
   &__time {

app/src/components/clock.scss

@@ -2,5 +2,6 @@
 
 .date {
   @include base.stretch;
+
   text-align: right;
 }

app/src/components/date.scss

@@ -2,6 +2,7 @@
 
 .expandable {
   @include animations.delayed-animation;
+
   display: grid;
   overflow: hidden;
 

app/src/components/expandable.scss

@@ -23,6 +23,7 @@
 
   &__title {
     @include base.stretch;
+
     display: inline;
     margin: 0;
     font-size: 1.6rem;

app/src/components/header.scss

@@ -3,6 +3,7 @@
 
 .stats {
   @include animations.delayed-animation;
+
   display: flex;
   flex-direction: column;
   width: 100%;

app/src/components/info-panel/stats-panel/stats.scss

@@ -59,6 +59,7 @@ $hover-timing-function: ease-out;
     &--#{$i} {
       // easeOutCubic for delay
       $delay: 50ms + cubic-bezier-to-func-of-t(0.215, 0.61, 0.355, 1, math.div($i, 15)) * 500ms;
+
       animation:
         $delay hidden,
         $expand-duration $expand-timing-function expand $delay,
@@ -75,6 +76,7 @@ $hover-timing-function: ease-out;
 
 .expand--last {
   $delay: 1000ms;
+
   animation:
     $delay hidden,
     $expand-duration $expand-timing-function expand $delay,

app/src/styles/animations.scss

@@ -1,13 +1,13 @@
 // Color values
-$blue-dark: hsl(227, 77%, 25%);
-$blue-dark-semi-transparent: hsla(227, 77%, 25%, 0.5);
-$blue-light: hsl(226, 47%, 49%);
-$blue-medium: hsl(227, 51%, 38%);
-$gray: hsl(198, 16%, 84%);
+$blue-dark: hsl(227deg, 77%, 25%);
+$blue-dark-semi-transparent: hsla(227deg, 77%, 25%, 0.5);
+$blue-light: hsl(226deg, 47%, 49%);
+$blue-medium: hsl(227deg, 51%, 38%);
+$gray: hsl(198deg, 16%, 84%);
 $gray-semi-transparent: rgba(0, 0, 0, 0.5);
-$white: hsl(0, 0%, 97%);
-$yellow-dark: hsl(43, 96%, 58%);
-$yellow-medium: hsl(54, 100%, 67%);
+$white: hsl(0deg, 0%, 97%);
+$yellow-dark: hsl(43deg, 96%, 58%);
+$yellow-medium: hsl(54deg, 100%, 67%);
 
 // Background colors
 $background-body: $blue-light;

app/src/styles/colors.scss

@@ -31,6 +31,7 @@
 .gallery-heading {
   &__description {
     @include gallery-description;
+
     color: colors.$color-accent-light;
   }
 
@@ -44,6 +45,7 @@
 
   &__description {
     @include gallery-description;
+
     font-size: 1.2rem;
     text-align: left;
   }