Swap out sass-lint with stylelint (#328)

* Swap out sass-lint

* Include standard SCSS rules for stylelint

* Fix stylelint violations

* Update Actions to use stylelint

Co-authored-by: Jake Gealer <jake@gealer.email>

.github/workflows/test-workflow.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Test with eslint
         run: npm run test:eslint
 
-  sass-lint:
+  stylelint:
     runs-on: ubuntu-latest
 
     steps:
@@ -52,8 +52,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Test with sass-lint
+      - name: Test with stylelint
-        run: npm run test:sass-lint
+        run: npm run test:stylelint
 
   i18n-packs:
     runs-on: ubuntu-latest

.sasslintrc

@@ -1,38 +0,0 @@
-{
-  "rules": {
-    "quotes": [
-      2,
-      {
-        "style": "double"
-      }
-    ],
-    "pseudo-element": 2,
-    "trailing-semicolon": 2,
-    "final-newline": 2,
-    "leading-zero": 2,
-    "no-trailing-zero": 2,
-    "no-css-comments": 0,
-    "no-vendor-prefixes": 0,
-    "no-transition-all": 0,
-    "property-sort-order": 2,
-    "empty-line-between-blocks": 2,
-    "single-line-per-selector": 2,
-    "no-duplicate-properties": 2,
-    "no-color-literals": 0,
-    "hex-notation": [
-      2,
-      {
-        "style": "lowercase"
-      }
-    ],
-    "hex-length": 2,
-    "force-element-nesting": 0,
-    "force-pseudo-nesting": 0,
-    "nesting-depth": 0,
-    "no-qualifying-elements": 0,
-    "indentation": 1,
-    "no-url-domains": 0,
-    "no-url-protocols": 0,
-    "placeholder-in-extend": 0
-  }
-}

README.md

@@ -83,7 +83,7 @@ routing, reverse proxy, www/non-www redirect, CDN, PHP (TCP/socket, WordPress, D
 
 4. Open the development site **[localhost:8080](http://localhost:8080)**
 
-5. Lint your code *(eslint & sass-lint)*
+5. Lint your code *(eslint & stylelint)*
     ```sh
     npm test
     ```

package.json

@@ -20,12 +20,12 @@
     "dev": "npm run build:template && npm run build:prism && npm run dev:tool",
     "dev:tool": "vue-cli-service serve src/nginxconfig/mount.js",
     "deploy:spaces:comment": "do-vue comment nginxconfig",
-    "test": "npm run test:eslint && npm run test:sass-lint && npm run test:i18n-packs && npm run test:jest",
+    "test": "npm run test:eslint && npm run test:stylelint && npm run test:i18n-packs && npm run test:jest",
     "test:jest": "jest --env=jsdom /test/.*.js?$",
     "test:fix": "npm run test:eslint:fix",
     "test:eslint": "eslint 'src/**/*.{js,vue}'",
     "test:eslint:fix": "npm run test:eslint -- --fix",
-    "test:sass-lint": "sass-lint 'src/**/*.scss' --verbose --no-exit --config .sasslintrc",
+    "test:stylelint": "stylelint 'src/**/*.scss' --config node_modules/do-bulma/.stylelintrc.json",
     "test:i18n-packs": "node --es-module-specifier-resolution=node src/nginxconfig/i18n/verify.js"
   },
   "jest": {
@@ -80,8 +80,10 @@
     "node-fetch": "^3.2.0",
     "postcss": "^8.4.6",
     "sass": "^1.49.7",
-    "sass-lint": "git+https://github.com/do-community/sass-lint.git",
     "sass-loader": "^11.1.1",
+    "stylelint": "^14.3.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-order": "^5.0.0",
     "vue-template-compiler": "^2.6.14",
     "webpack-bundle-analyzer": "^4.5.0"
   },

src/nginxconfig/scss/_callout.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -42,8 +42,7 @@ THE SOFTWARE.
 
     .close {
       display: flex;
-      flex-direction: row;
+      flex-flow: row nowrap;
-      flex-wrap: nowrap;
       margin: 0 0 1.25rem;
 
       p {

src/nginxconfig/scss/_fields.scss

@@ -26,8 +26,7 @@ THE SOFTWARE.
 
 .field-row {
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
-  flex-wrap: wrap;
   margin: 0 -.5rem;
 
   .field {
@@ -87,7 +86,7 @@ THE SOFTWARE.
 
   .is-changed {
     input {
-      &:not(.vs__search) {
+      &:not(.vs__search) { // stylelint-disable-line selector-class-pattern
         &,
         &:focus {
           background: rgba($highlight, .35);
@@ -108,7 +107,7 @@ THE SOFTWARE.
     }
 
     .v-select {
-      .vs__dropdown-toggle { // sass-lint:disable-line class-name-format
+      .vs__dropdown-toggle { // stylelint-disable-line selector-class-pattern
         background: rgba($highlight, .35);
       }
     }

src/nginxconfig/scss/_panel.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -36,8 +36,7 @@ THE SOFTWARE.
     .header-group,
     .buttons-group {
       display: flex;
-      flex-direction: row;
+      flex-flow: row wrap;
-      flex-wrap: wrap;
       justify-content: space-between;
     }
 

src/nginxconfig/scss/_tabs.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -28,8 +28,7 @@ THE SOFTWARE.
   ul {
     li {
       display: flex;
-      flex-direction: row;
+      flex-flow: row nowrap;
-      flex-wrap: nowrap;
 
       &:hover,
       &:focus {

src/nginxconfig/scss/_vue-select.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -24,7 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-// sass-lint:disable-block class-name-format
+// stylelint-disable selector-class-pattern
 .v-select {
   &.vs--open {
     > ul {
@@ -49,7 +49,7 @@ THE SOFTWARE.
   }
 
   > ul {
-    display: block !important; // sass-lint:disable-line no-important
+    display: block !important;
     margin: 0;
     opacity: 0;
     transition: opacity $transition;

src/nginxconfig/scss/style.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -27,21 +27,25 @@ THE SOFTWARE.
 $header: #0071fe;
 $highlight: #f2c94c;
 $callout: #f3f5f9;
+
 @import "~do-bulma/src/style";
 
 .do-bulma {
   @import "../../../build/prism";
 
-  $pretty--color-dark: $primary;
+  $pretty--color-dark: $primary; // stylelint-disable-line scss/dollar-variable-pattern
-  $pretty--color-default: $primary;
+  $pretty--color-default: $primary; // stylelint-disable-line scss/dollar-variable-pattern
+
   @import "~pretty-checkbox/src/pretty-checkbox";
 
   $vs-border-color: $border;
   $vs-border-radius: $border-radius;
   $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
   $vs-state-active-bg: $primary;
+
   @import "~vue-select/src/scss/vue-select";
 
+  // Local imports
   @import "header";
   @import "tabs";
   @import "panel";