feat(storefront): BCTHEME-152 Replaced scss-lint with stylelint

.github/workflows/pull_request_review.yml

@@ -1,4 +1,4 @@
-# This workflow will do a clean install of your theme's dependencies and attempt to bundle the theme with Stencil CLI. 
+# This workflow will do a clean install of your theme's dependencies and attempt to bundle the theme with Stencil CLI.
 # If the theme fails to bundle, you can review the error logs to find out why.
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
@@ -23,20 +23,6 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v2
 
-    - name: Ruby Gem cache
-      uses: actions/cache@v2.1.3
-      with:
-        path: vendor/bundle
-        key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-gems-
-
-    - name: Setup Ruby 2.7
-      uses: ruby/setup-ruby@v1.51.1
-      with:
-        ruby-version: 2.7
-    - run: bundle install
-
     - name: Use Node.js ${{ matrix.node }}
       uses: actions/setup-node@v2-beta
       with:
@@ -56,7 +42,7 @@ jobs:
     - name: Install Theme Dependencies
       run: npm ci
 
-    - name: Grunt Check  
+    - name: Grunt Check
       run: npx grunt check
 
     - name: Validate theme successfully bundles
@@ -67,7 +53,7 @@ jobs:
       with:
         name: Bundled Theme
         path: bundle.zip
-        
+
     - name: Upload bundle analysis
       uses: actions/upload-artifact@v2
       with:

.stylelintrc

@@ -0,0 +1,23 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "color-named": null,
+    "indentation": 4,
+    "max-nesting-depth": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "scss/at-mixin-pattern": null,
+    "scss/dollar-variable-colon-space-after": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/percent-placeholder-pattern": null,
+    "selector-class-pattern": null,
+    "selector-max-compound-selectors": null,
+    "selector-max-id": null,
+    "selector-no-qualifying-type": null,
+    "string-quotes": "double",
+    "value-no-vendor-prefix": null
+  }
+}

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Scss lint has been replaced with stylelint. [#2069](https://github.com/bigcommerce/cornerstone/pull/2069)
 - Fixed possibility to select 'None' on multi unrequired Swatch Options. [#2068](https://github.com/bigcommerce/cornerstone/pull/2068)
 - Translation Gap: Account -> Wish List -> Name required message. [#2060](https://github.com/bigcommerce/cornerstone/pull/2060)
 - Translation Gap: Cart -> Shipping estimator error messages. [#2066](https://github.com/bigcommerce/cornerstone/pull/2066)

Gruntfile.js

@@ -1,13 +1,8 @@
-module.exports = function(grunt) {
+module.exports = function (grunt) {
     require('time-grunt')(grunt);
-    require('load-grunt-config')(grunt, {
-        jitGrunt: {
-            staticMappings: {
-                scsslint: 'grunt-scss-lint'
-            }
-        }
-    });
+    require('load-grunt-config')(grunt);
 
     grunt.loadNpmTasks('grunt-run');
-    grunt.registerTask('default', ['eslint', 'jest', 'scsslint', 'svgstore'])
+    grunt.loadNpmTasks('grunt-stylelint');
+    grunt.registerTask('default', ['eslint', 'svgstore']);
 };

assets/scss/common/_aria.scss

@@ -1,11 +1,11 @@
 .aria-description {
     &--hidden {
+        height: 1px;
+        left: 0;
+        margin-left: -10000px;
+        overflow: hidden;
         position: absolute;
         top: 0;
-        left: 0;
-        height: 1px;
         width: 1px;
-        overflow: hidden;
-        margin-left: -10000px;
     }
 }

assets/scss/common/_focus-tooltip.scss

@@ -1,37 +1,37 @@
 @mixin addFocusTooltip ($attr: title) {
-        &:before {
-            content: " ";
-            position: absolute;
-            right: 0;
-            top: 50%;
-            border-width: remCalc(10px);
-            border-style: solid;
-            border-color: transparent transparent $focusTooltip-backgroundColor transparent;
-        }
+    &::before {
+        border-color: transparent transparent $focusTooltip-backgroundColor transparent;
+        border-style: solid;
+        border-width: remCalc(10px);
+        content: " ";
+        position: absolute;
+        right: 0;
+        top: 50%;
+    }
 
-        &:after {
-            content: attr($attr);
-            padding: remCalc(4px) remCalc(6px);
-            background-color: $focusTooltip-backgroundColor;
-            color: $focusTooltip-textColor;
-            position: absolute;
-            font-size: 1rem;
-            white-space: nowrap;
-            right: 0;
-            top: 100%;
-            cursor: default;
-            border-radius: remCalc(8px);
-        }
+    &::after {
+        background-color: $focusTooltip-backgroundColor;
+        border-radius: remCalc(8px);
+        color: $focusTooltip-textColor;
+        content: attr($attr);
+        cursor: default;
+        font-size: 1rem;
+        padding: remCalc(4px) remCalc(6px);
+        position: absolute;
+        right: 0;
+        top: 100%;
+        white-space: nowrap;
+    }
 
-        &:before,
-        &:after {
-            display: none;
-        }
+    &::before,
+    &::after {
+        display: none;
+    }
 
-        &:focus {
-            &:before,
-            &:after {
-                display: block;
-            }
+    &:focus {
+        &::before,
+        &::after {
+            display: block;
         }
+    }
 }

assets/scss/common/index.scss

@@ -1,2 +1,2 @@
-@import 'aria';
-@import 'focus-tooltip';
+@import "aria";
+@import "focus-tooltip";

assets/scss/components/citadel/actionBar/_actionBar.scss

@@ -4,17 +4,14 @@
 
 
 .actionBar-section {
-
     .form-field {
         background-color: $input-bg-color;
         border: $actionBar-form-field-border;
         border-radius: $actionBar-form-field-radius;
 
-        // scss-lint:disable NestingDepth
         &:hover {
             border-color: stencilColor("input-border-color-active");
         }
-        // scss-lint:enable NestingDepth
     }
 
     .form-label {

assets/scss/components/citadel/cards/_cards.scss

@@ -22,18 +22,16 @@
         .card-figcaption {
             opacity: 1;
         }
-    }    
+    }
 }
 
 .card-figure {
     margin-top: $card-figure-marginTop;
-    position: relative;
-    padding: 3px;
     overflow: hidden;
+    padding: 3px;
+    position: relative;
 
     &:hover {
-
-        // scss-lint:disable NestingDepth
         .card-figcaption {
             opacity: 1;
         }
@@ -46,9 +44,9 @@
 }
 
 .card-img-container {
-    max-width: get-width(stencilString('productgallery_size'));
 
-    @include lazy-loaded-padding('productgallery_size');
+    @include lazy-loaded-padding("productgallery_size");
+    max-width: get-width(stencilString("productgallery_size"));
 }
 
 .card-figcaption {
@@ -70,11 +68,11 @@
 .card-image {
     @include lazy-loaded-img;
     border: 0;
-    width: 100%;
+    /* Object-fit polyfill */
+    font-family: "object-fit: contain;";
     max-height: 100%;
     object-fit: contain;
-    /* Object-fit polyfill */
-    font-family: 'object-fit: contain;';
+    width: 100%;
 }
 
 .card-title {
@@ -83,10 +81,9 @@
 
     > a {
         color: $card-title-color;
-        text-decoration: $card-title-textDecoration;
         display: block;
+        text-decoration: $card-title-textDecoration;
 
-        // scss-lint:disable NestingDepth
         &:hover {
             color: $card-title-color-hover;
         }
@@ -157,7 +154,6 @@
     &:hover {
         border-color: stencilColor("color-primary");
 
-        // scss-lint:disable SelectorDepth, NestingDepth
         .card-body {
             background-color: stencilColor("color-primary");