Move from Sass-lint to stylelint

Author: philwareham

.stylelintrc.yml

@@ -215,12 +215,12 @@ module.exports = function (grunt)
             }
         },
 
-        // Validate Sass files via sass-lint.
-        sasslint: {
+        // Validate CSS files via stylelint.
+        stylelint: {
             options: {
-                configFile: '.sass-lint.yml'
+                configFile: '.stylelintrc.yml'
             },
-            target: ['<%= paths.src.sass %>**/*.scss']
+            src: ['<%= paths.src.sass %>**/*.{css,scss}']
         },
 
         // Uglify and copy JavaScript files from `node_modules` and from `src/js/` to `public/assets/js/`.
@@ -280,7 +280,7 @@ module.exports = function (grunt)
 
     // Register tasks.
     grunt.registerTask('build', ['clean', 'concurrent', 'replace', 'uglify']);
-    grunt.registerTask('css', ['sasslint', 'sass', 'postcss']);
+    grunt.registerTask('css', ['stylelint', 'sass', 'postcss']);
     grunt.registerTask('default', ['watch']);
     grunt.registerTask('travis', ['build']);
 };

Gruntfile.js

@@ -23,10 +23,12 @@
     "grunt-postcss": "0.9.0",
     "grunt-replace-regex": "1.0.3",
     "grunt-sass": "3.1.0",
-    "grunt-sass-lint": "0.2.4",
+    "grunt-stylelint": "0.11.0",
     "load-grunt-tasks": "5.1.0",
     "sass": "1.23.7",
-    "sass-lint": "1.13.1"
+    "stylelint": "12.0.0",
+    "stylelint-order": "3.1.1",
+    "stylelint-scss": "3.13.0"
   },
   "dependencies": {
     "createjs": "1.0.1",

package.json

@@ -14,31 +14,31 @@
     font-family: "PT Serif";
     font-style: normal;
     font-weight: normal;
-    src: url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-regular.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-regular.woff") format("woff");
+    src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-regular.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-regular.woff") format("woff");
 }
 
 // Regular Italic
 @font-face {
     font-family: "PT Serif";
     font-style: italic;
     font-weight: normal;
-    src: url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-italic.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-italic.woff") format("woff");
+    src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-italic.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-italic.woff") format("woff");
 }
 
 // Bold
 @font-face {
     font-family: "PT Serif";
     font-style: normal;
     font-weight: bold;
-    src: url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-700.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-700.woff") format("woff");
+    src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700.woff") format("woff");
 }
 
 // Bold Italic
 @font-face {
     font-family: "PT Serif";
     font-style: italic;
     font-weight: bold;
-    src: url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-700italic.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v9-latin-ext-700italic.woff") format("woff");
+    src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700italic.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700italic.woff") format("woff");
 }
 
 html {
@@ -122,33 +122,33 @@ samp {
 
 pre {
     padding: 0.5714286em 1.1428571em; // 8px / 14px + 16px / 14px
-    word-wrap: normal;
     overflow-x: auto;
+    word-wrap: normal;
     tab-size: 4;
 
     code {
         padding: 0;
         border: 0;
         background-color: transparent;
+        direction: ltr;
         font-size: 1em; // 14px
+        hyphens: none;
         text-align: left;
-        white-space: pre;
-        word-spacing: normal;
-        word-break: normal;
         word-wrap: normal;
-        direction: ltr;
-        hyphens: none;
+        word-break: normal;
+        word-spacing: normal;
+        white-space: pre;
     }
 }
 
 hr {
+    box-sizing: content-box;
     height: 24px;
     margin: 1em 0;
+    overflow: visible;
     border: 0; // remove the default `hr` border
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath fill='%23333' d='M0,0c1.742,13.61,54.74,20.912,119.995,15.279C184.922,9.679,238.594,13.024,240,24c-1.744-13.613-54.742-20.913-120.005-15.284C55.078,14.32,1.405,10.973,0,0z'/%3E%3C/svg%3E") 50% 50% no-repeat;
     background-size: 240px 24px;
-    overflow: visible;
-    box-sizing: content-box;
 }
 
 .container {
@@ -161,12 +161,12 @@ hr {
 
 .site-header {
     position: fixed;
+    z-index: 10;
     top: 0;
     right: 0;
     left: 0;
     border-bottom: 2px solid $color-text;
     background-color: $color-background;
-    z-index: 10;
 }
 
 .open-sidebar,
@@ -193,28 +193,28 @@ hr {
     @include gradient-linear($color-button-primary-gradient-from, $color-button-primary-gradient-to);
 
     display: inline-block;
+    box-sizing: border-box;
     height: 2.5em; // 40px / 16px
     margin: 0;
     padding: 0.5em 1em; // 8px / 16px
     border: 1px solid $color-button-primary-border;
     border-radius: 1.25em;
     background-clip: padding-box;
+    box-shadow: 0 2px 0 $color-button-primary-shadow;
     color: $color-text-button;
     font-weight: bolder;
     line-height: 1.375; // 22px / 16px
-    box-shadow: 0 2px 0 $color-button-primary-shadow;
-    cursor: pointer; /* 1 */
     vertical-align: baseline;
-    appearance: none; /* 2 */
-    box-sizing: border-box;
+    appearance: none;
+    cursor: pointer;
 
     &:active {
         position: relative;
         top: 2px;
         border-color: darken($color-button-primary-border, 13%);
+        box-shadow: none;
         color: $color-text-button-active;
         text-decoration: none;
-        box-shadow: none;
     }
 }
 
@@ -262,9 +262,9 @@ amp-sidebar {
     height: 1px;
     margin: -1px;
     padding: 0;
-    border: 0;
-    white-space: nowrap;
     overflow: hidden;
     clip: rect(0 0 0 0); // TODO: Deprecated - use `clip-path` when browser support is better.
     //clip-path: inset(50%); // TODO: Currently causes severe performance issues in Chrome.
+    border: 0;
+    white-space: nowrap;
 }

src/assets/sass/amp.scss

@@ -261,18 +261,18 @@ $dark-colors: (
 
     .docs-menu {
         position: fixed;
+        z-index: 2000;
         top: 0;
         bottom: 0;
         left: 0;
+        box-sizing: border-box;
         width: 29%;
         padding: 0.5em 2%;
+        overflow-x: hidden;
+        overflow-y: auto;
         border-right: 1px solid $color-border;
         background-color: $color-background-box;
         box-shadow: inset -0.25em 0 0.25em -0.25em rgba(0, 0, 0, 0.2);
-        z-index: 2000;
-        overflow-x: hidden;
-        overflow-y: auto;
-        box-sizing: border-box;
     }
 
     .docs-content {

src/assets/sass/designpatterns.scss

@@ -37,9 +37,9 @@ nav ul,
 nav ol,
 .clearfix {
     &::after {
+        content: "";
         display: table;
         clear: both;
-        content: "";
     }
 }
 

src/assets/sass/modules/_base.scss

@@ -84,6 +84,7 @@
     }
 
     // Put a bit more margin on 2nd category link, if it exists (for better touch accessibility).
+
     a + a {
         margin-left: 0.25em;
     }

src/assets/sass/modules/_blog.scss

@@ -16,14 +16,15 @@
     margin: 0 -1.3333333em;
     padding: 0.5em 1.3333333em; // 6px / 12px + 16px / 12px
     background-color: $color-background-box;
-    font-size: $small-font-size;
     list-style: none;
+    font-size: $small-font-size;
 
     li {
         display: inline-block;
     }
 
     // Path-like breadcrumb styling.
+
     > li + li::before {
         content: "\00A0" "\002F" "\00A0";
     }

src/assets/sass/modules/_breadcrumbs.scss

@@ -22,9 +22,9 @@ button::-moz-focus-inner,
 }
 
 /**
- * 1. Improve usability and consistency of cursor style between image-type
+ * 1. Remove browser-specific default styling.
+ * 2. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
- * 2. Remove browser-specific default styling.
  */
 
 button,
@@ -42,12 +42,12 @@ button,
     border: 1px solid $color-button-border;
     border-radius: 1em;
     background-clip: padding-box;
+    box-shadow: 0 2px 0 $color-button-shadow;
     color: $color-text-button;
     font-weight: normal;
     text-align: center;
-    box-shadow: 0 2px 0 $color-button-shadow;
-    cursor: pointer; /* 1 */
-    appearance: none; /* 2 */
+    appearance: none; /* 1 */
+    cursor: pointer; /* 2 */
     user-select: none;
 
     &:hover {
@@ -61,9 +61,9 @@ button,
     &:active {
         top: 2px;
         border-color: shade($color-button-border, 15%);
+        box-shadow: none;
         color: $color-text-button-active;
         text-decoration: none;
-        box-shadow: none;
     }
 
     &:focus {
@@ -84,8 +84,8 @@ button,
     @include gradient-linear($color-button-primary-gradient-from, $color-button-primary-gradient-to);
 
     border-color: $color-button-primary-border;
-    font-weight: bolder;
     box-shadow: 0 2px 0 $color-button-primary-shadow;
+    font-weight: bolder;
 
     &:hover {
         @include gradient-linear(lighten($color-button-primary-gradient-from, 6%), lighten($color-button-primary-gradient-to, 6%));

src/assets/sass/modules/_buttons.scss

@@ -3,13 +3,13 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
     direction: ltr;
     hyphens: none;
+    text-align: left;
+    word-wrap: normal;
+    word-break: normal;
+    word-spacing: normal;
+    white-space: pre;
 }
 
 /**
@@ -123,16 +123,16 @@ pre.line-numbers > code {
 
 .line-numbers-rows > span {
     display: block;
-    pointer-events: none;
     counter-increment: linenumber;
+    pointer-events: none;
 }
 
 .line-numbers-rows > span::before {
+    content: counter(linenumber);
     display: block;
     padding-right: 0.8em;
     color: #999999;
     text-align: right;
-    content: counter(linenumber);
 }
 
 @include dark-mode {