Fix stylelint auto fix not working changes

Author: Brugarolas

.stylelintrc.json

@@ -7,7 +7,6 @@
     "stylelint-declaration-strict-value",
     "stylelint-high-performance-animation",
     "stylelint-group-selectors",
-    "stylelint-use-nesting",
     "stylelint-no-nested-media",
     "stylelint-selector-tag-no-without-class"
   ],
@@ -27,7 +26,6 @@
     ],
     "plugin/no-low-performance-animation-properties": true,
     "plugin/stylelint-group-selectors": true,
-    "csstools/use-nesting": "always",
     "pitcher/no-nested-media": true,
     "plugin/selector-tag-no-without-class": ["div", "span"]
   }

package.json

@@ -9,9 +9,9 @@
     "start": "cross-env NODE_ENV=development webpack serve --hot",
     "start:local": "cross-env NODE_ENV=development LOCAL=true webpack serve --hot",
     "start:static": "npm run build && http-server ./dist",
-    "build": "cross-env NODE_ENV=production webpack --progress --performance",
-    "build:gh-pages": "cross-env NODE_ENV=production PUBLIC_PATH=bruga-music webpack --progress --performance",
-    "build:analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --progress --performance",
+    "build": "cross-env NODE_ENV=production webpack --progress",
+    "build:gh-pages": "cross-env NODE_ENV=production PUBLIC_PATH=bruga-music webpack --progress",
+    "build:analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --progress",
     "lint": "npm run lint:eslint && npm run lint:stylelint",
     "lint:eslint": "eslint babel.config.js webpack.config.js src/**/*.{js,vue}",
     "lint:eslint:fix": "eslint babel.config.js webpack.config.js src/**/*.{js,vue} --fix",
@@ -28,7 +28,7 @@
     "vue-router": "^3.5.2",
     "vuex": "^3.6.2",
     "vue-async-computed": "^3.9.0",
-    "nanoid": "^3.1.24",
+    "nanoid": "^3.1.25",
     "format-duration": "^1.4.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "unfetch": "^4.2.0",
@@ -58,6 +58,7 @@
     "file-loader": "^6.2.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
+    "http-server": "^13.0.0",
     "less": "^4.1.1",
     "less-loader": "^10.0.1",
     "mini-css-extract-plugin": "^2.2.0",
@@ -72,7 +73,6 @@
     "stylelint-selector-bem-pattern": "^2.1.1",
     "stylelint-selector-no-empty": "^1.0.8",
     "stylelint-selector-tag-no-without-class": "^2.0.4",
-    "stylelint-use-nesting": "^3.0.0",
     "vue-eslint-parser": "^7.10.0",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14",

src/components/artist/Albums.vue

@@ -95,11 +95,11 @@ export default {
       opacity: 0.5;
       transition: all 0.3s ease-in-out;
       overflow: hidden;
+    }
 
-      @nest &:hover & {
-        opacity: 0.75;
-        transform: scale(1.1);
-      }
+    &:hover .see-more-icon {
+      opacity: 0.75;
+      transform: scale(1.1);
     }
   }
 </style>

src/components/common/AnimatedEllipsis.vue

@@ -37,10 +37,10 @@ export default {
     &.three {
       animation-delay: 0.3s;
     }
+  }
 
-    @nest &.stop-animation & {
-      animation: none;
-    }
+  &.stop-animation .dot {
+    animation: none;
   }
 }
 

src/components/common/CloseButton.vue

@@ -47,10 +47,10 @@ export default {
     color: @color-red;
     opacity: 0.35;
     transition: all 0.3s ease-in-out;
+  }
 
-    @nest &:hover & {
-      opacity: 1;
-    }
+  &:hover .icon-cancel {
+    opacity: 1;
   }
 }
 </style>

src/components/player/ProgressBar.vue

@@ -196,10 +196,10 @@ export default {
         background-color: @color-red;
         opacity: 1;
       }
+    }
 
-      & + .duration-hover::before {
-        opacity: 1;
-      }
+    & + .duration-progress + .duration-hover::before {
+      opacity: 1;
     }
   }
 }

src/components/player/SoundControl.vue

@@ -101,10 +101,10 @@ export default {
     vertical-align: 65%;
     opacity: 0;
     transition: all 0.3s ease-in-out;
+  }
 
-    @nest &:hover & {
-      opacity: 1;
-    }
+  &:hover .volume-bar-wrapper {
+    opacity: 1;
   }
 }
 </style>

src/components/player/VolumeBar.vue

@@ -179,10 +179,10 @@ export default {
         background-color: @color-music;
         opacity: 1;
       }
+    }
 
-      & + .volume-hover::before {
-        opacity: 1;
-      }
+    & + .volume-progress + .volume-hover::before {
+      opacity: 1;
     }
   }
 }

src/components/playlist/DeleteButton.vue

@@ -46,10 +46,10 @@ export default {
     color: @color-red;
     opacity: 0.35;
     transition: all 0.3s ease-in-out;
+  }
 
-    @nest &:hover & {
-      opacity: 1;
-    }
+  &:hover .icon-delete {
+    opacity: 1;
   }
 }
 </style>

src/components/playlist/Song.vue

@@ -58,10 +58,10 @@ export default {
 
   .track-play {
     opacity: 0;
+  }
 
-    @nest &:hover & {
-      opacity: 0.9;
-    }
+  &:hover .track-play {
+    opacity: 0.9;
   }
 
   .track-title {

src/partials/loading.html

@@ -19,31 +19,31 @@
     z-index: 1;
     transition: opacity 0.55s ease-in-out;
     opacity: 1;
+  }
 
-    &.pushed {
-      z-index: -1;
-      opacity: 0.9;
-      pointer-events: none;
-    }
+  #background.pushed {
+    z-index: -1;
+    opacity: 0.9;
+    pointer-events: none;
   }
 
   #app {
     z-index: 1;
     transition: opacity 0.55s ease-in-out;
     opacity: 0;
+  }
 
-    &.visible {
-      opacity: 1;
-    }
+  #app.visible {
+    opacity: 1;
   }
 
   #loader-spinner {
     transition: opacity 0.55s ease-in-out;
     opacity: 0;
+  }
 
-    &.visible {
-      opacity: 1;
-    }
+  #loader-spinner.visible {
+    opacity: 1;
   }
 
   #svg-gradient {
@@ -114,11 +114,14 @@
       font-weight: 600;
       letter-spacing: 4px;
       text-shadow: 2px 2px 2px #982726; /* IE fix */
-      &.hidden {
-        opacity: 0;
-      }
+    }
+
+    .loader-title.hidden {
+      opacity: 0;
+    }
 
-      @media (max-width: 720px) {
+    @media (max-width: 720px) {
+      .loader-title {
         top: 6%;
       }
     }
@@ -139,20 +142,21 @@
       height: 34px;
       top: calc(50% - 17px);
       left: calc(50% - 88px);
+    }
 
-      & .ball {
-        display: inline-block;
-        text-align: center;
-        width: 32px;
-        height: 32px;
-        margin-right: 36px;
-        border-radius: 50%;
-        background-color: #be484d; /* IE fix */
-        box-shadow: 0 0 6px 1px #8c2332; /* IE fix */
-        &:last-child {
-          margin-right: 0;
-        }
-      }
+    .bouncing-balls .ball {
+      display: inline-block;
+      text-align: center;
+      width: 32px;
+      height: 32px;
+      margin-right: 36px;
+      border-radius: 50%;
+      background-color: #be484d; /* IE fix */
+      box-shadow: 0 0 6px 1px #8c2332; /* IE fix */
+    }
+
+    .bouncing-balls .ball:last-child {
+      margin-right: 0;
     }
 
     @supports (mix-blend-mode: soft-light) { /* Good browsers */
@@ -166,21 +170,21 @@
     .bouncing-balls-animation .ball {
       -webkit-animation: bouncedelay 1.32s infinite ease-in-out both;
       animation: bounceDelay 1.32s infinite ease-in-out both;
+    }
 
-      &:nth-child(1) {
-        -webkit-animation-delay: -0.32s;
-        animation-delay: -0.32s;
-      }
+    .bouncing-balls-animation .ball:nth-child(1) {
+      -webkit-animation-delay: -0.32s;
+      animation-delay: -0.32s;
+    }
 
-      &:nth-child(2) {
-        -webkit-animation-delay: -0.16s;
-        animation-delay: -0.16s;
-      }
+    .bouncing-balls-animation .ball:nth-child(2) {
+      -webkit-animation-delay: -0.16s;
+      animation-delay: -0.16s;
+    }
 
-      &:nth-child(3) {
-        -webkit-animation-delay: 0;
-        animation-delay: 0;
-      }
+    .bouncing-balls-animation .ball:nth-child(3) {
+      -webkit-animation-delay: 0;
+      animation-delay: 0;
     }
 
     .bouncing-balls .ball.hidden {