Fixing all stylelint errors

package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "watch": "webpack -w --progress --debug",
     "build": "NODE_ENV=production webpack --progress --debug",
-    "css-lint": "stylelint \"**/*.scss\" --cache --cache-location .cache/.stylelintcache"
+    "scss-lint": "stylelint \"**/*.scss\" --cache --cache-location .cache/.stylelintcache"
   },
   "author": "PrestaShop",
   "license": "OSL-3.0",

scss/_alerts.scss

@@ -1,28 +1,28 @@
 .alert {
-  padding: $alert-padding-y 0 $alert-padding-y 2.875rem;
-  background-color: $white;
   position: relative;
+  padding: $alert-padding-y 0 $alert-padding-y 2.875rem;
   color: $body-color;
+  background-color: $white;
 
   &::before {
     @include use-material-icon();
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     width: 2.875rem;
     height: 100%;
-    text-align: center;
     font-size: 1.563rem;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
+    text-align: center;
   }
 
   p,
   ul {
-    font-size: $font-size-base;
     margin: 0;
+    font-size: $font-size-base;
   }
 
   > * {
@@ -66,77 +66,77 @@
       }
 
       p {
-        color: inherit;
         font-size: $font-size-sm;
+        color: inherit;
       }
     }
   }
 }
 
 .alert-info {
-  border-color: theme-color('info');
+  border-color: theme-color("info");
 
   &::before {
-    content: '\E88F';
-    background-color: theme-color-background('info');
-    color: theme-color('info')
+    color: theme-color("info");
+    content: "\E88F";
+    background-color: theme-color-background("info");
   }
 
   .close,
   &.expandable-alert .read-more,
   &.expandable-alert .read-more:hover,
   &.expandable-alert .read-more:focus {
-    color: theme-color('info')
+    color: theme-color("info");
   }
 }
 
 .alert-success {
-  border-color: theme-color('success');
+  border-color: theme-color("success");
 
   &::before {
-    content: '\E5CA';
-    background-color: theme-color-background('success');
-    color: theme-color('success')
+    color: theme-color("success");
+    content: "\E5CA";
+    background-color: theme-color-background("success");
   }
 
   .close,
   &.expandable-alert .read-more,
   &.expandable-alert .read-more:hover,
   &.expandable-alert .read-more:focus {
-    color: theme-color('success')
+    color: theme-color("success");
   }
 }
 
 .alert-warning {
-  border-color: theme-color('warning');
+  border-color: theme-color("warning");
 
   &::before {
-    content: '\E001';
-    background-color: theme-color-background('warning');
-    color: theme-color('warning')
+    color: theme-color("warning");
+    content: "\E001";
+    background-color: theme-color-background("warning");
   }
 
   .close,
   &.expandable-alert .read-more,
   &.expandable-alert .read-more:hover,
   &.expandable-alert .read-more:focus  {
-    color: theme-color('warning')
+    color: theme-color("warning");
   }
 }
 
 .alert-danger {
-  border-color: theme-color('danger');
+  border-color: theme-color("danger");
 
   &::before {
-    content: '\E001';
-    background-color: theme-color-background('danger');
-    color: theme-color('danger');
+    color: theme-color("danger");
+    content: "\E001";
+    background-color: theme-color-background("danger");
   }
 
   .close,
   &.expandable-alert .read-more,
   &.expandable-alert .read-more:hover,
   &.expandable-alert .read-more:focus  {
-    color: theme-color('danger');
+    color: theme-color("danger");
   }
 }

scss/_breadcrumb.scss

@@ -1,12 +1,12 @@
 .breadcrumb {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: .75rem;
 
   li {
 
-    & + li:before {
+    & + li::before {
       padding-right: 0;
-      padding-left: 0.1875rem;
+      padding-left: .1875rem;
     }
 
     > a {
@@ -20,6 +20,6 @@
 }
 
 .breadcrumb-item {
-  color: $dark-gray;
   font-weight: $font-weight-normal;
+  color: $dark-gray;
 }

scss/_button-group.scss

@@ -6,21 +6,20 @@
 
     // add spacing between button and dropdown button in split dropdown buttons,
     // except on outline buttons (which already have a border separating them)
-    &:not([class*='outline']) {
+    &:not([class*="outline"]) {
       margin-left: $border-width;
     }
 
     // increased horizontal spacing on the dropdown button of large split dropdowns
     &.btn-lg {
-      padding-right: 0.563rem;
-      padding-left: 0.563rem;
+      padding-right: .563rem;
+      padding-left: .563rem;
     }
   }
 
   // collapse borders on split buttons with outline
-  .btn.dropdown-toggle-split[class*='outline'] {
+  .btn.dropdown-toggle-split[class*="outline"] {
     margin-left: -$border-width;
   }
 }
 
-

scss/_buttons.scss

@@ -1,23 +1,23 @@
 .btn {
-  border-width: $border-width;
   font-weight: $font-weight-semibold;
-  border-radius: $btn-border-radius;
   white-space: nowrap;
+  border-width: $border-width;
+  @include border-radius($btn-border-radius);
 
-  @include hover-focus {
+  @include hover-focus () {
     cursor: pointer;
   }
 
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
-    opacity: 1;
     cursor: not-allowed;
+    opacity: 1;
   }
 
   > .material-icons {
+    margin-top: -.083em;
     font-size: 1.4em;
-    margin-top: -0.083em;
   }
 }
 

scss/_custom-forms.scss

@@ -9,7 +9,7 @@
     height: $input-height;
 
     &:focus ~ .custom-file-label {
-      border-color: theme-color-hover('primary');
+      border-color: theme-color-hover("primary");
     }
 
     &.disabled,
@@ -23,35 +23,35 @@
       cursor: $cursor-disabled;
       background-color: $custom-select-disabled-bg;
 
-      &:after {
+      &::after {
         @extend .btn-primary:disabled;
       }
     }
   }
   .custom-file-label {
-    &:after {
+    &::after {
+
+      // make the button overlap the border
+      top: $input-border-width * -1;
+      right: $input-border-width * -1;
+      bottom: $input-border-width * -1;
+      height: auto;
       font-weight: $font-weight-semibold;
 
-      @include hover-focus {
+      @include hover-focus () {
         cursor: pointer;
       }
 
-      $color: map-get($theme-colors, 'primary');
+      $color: map-get($theme-colors, "primary");
       @include ps-button-variant(
-                      $color,
-                      $color,
-                      theme-color-hover($color),
-                      theme-color-hover($color),
-                      theme-color-active($color),
-                      theme-color-active($color),
-                      $color
+        $color,
+        $color,
+        theme-color-hover($color),
+        theme-color-hover($color),
+        theme-color-active($color),
+        theme-color-active($color),
+        $color
       );
-
-      // make the button overlap the border
-      top: $input-border-width * -1;
-      right: $input-border-width * -1;
-      bottom: $input-border-width * -1;
-      height: auto;
     }
   }
 }

scss/_dropdown.scss

@@ -4,53 +4,53 @@
 
   // use material icons for dropdown and dropup
   &::after {
-    @include material-icon('expand_more');
-    border: none;
+    @include material-icon("expand_more");
     display: inline-block;
-    vertical-align: middle;
     width: auto;
     line-height: 0;
+    vertical-align: middle;
+    border: none;
   }
 }
 
 // dropup icon
 .dropup {
   .dropdown-toggle {
     &::after {
-      content: 'expand_less';
+      content: "expand_less";
     }
   }
 }
 
 // add a bigger margin between the text and the dropdown icon
 .dropdown-toggle:not(.dropdown-toggle-split) {
-  &:after {
-    margin-left: 0.625rem;
+  &::after {
+    margin-left: .625rem;
   }
 }
 
 .dropdown-menu {
-  border: solid $border-width #bbcdd2;
-  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
+  min-width: 15.625rem;
+  padding: .313rem 0;
 
   color: #576c72;
-  padding: 0.313rem 0;
-  min-width: 15.625rem;
+  border: solid $border-width #bbcdd2;
+  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
 
   .material-icons {
-    color: $medium-gray;
+    padding-right: .5rem;
     font-size: 1.125rem;
+    color: $medium-gray;
     vertical-align: text-bottom;
-    padding-right: 0.5rem;
   }
 
   > .dropdown-item {
-    color: inherit;
+    padding: .375rem .938rem{
+      right: 1.5rem;
+    }
     line-height: normal;
+    color: inherit;
     border-bottom: 0;
-    padding: 0.375rem 0.938rem {
-      right: 1.5rem;
-    };
 
     &:hover {
       color: $white;
@@ -63,6 +63,6 @@
   }
 
   > .dropdown-divider {
-    margin: 0.313rem 0;
+    margin: .313rem 0;
   }
 }