Upgrade to latest Sass and stylelint configuration, with needed refactorings

- Tweak stylesheets for compatibility with latest stylelint configuration
- Move stylelint config to JS for ease of copying rules with main config
- Enforce scss/no-global-function-names by refactoring code with sass-migrator
- Run Sass code through sass-migrator
- Change stylelint configuration and code to enforce font-family-no-missing-generic-family-keyword
- Manually switch to math.div where migrator used * 0.5

Author: thibaudcolas

.stylelintignore

@@ -0,0 +1,3 @@
+node_modules
+venv
+build

.stylelintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: '@wagtail/stylelint-config-wagtail',
+  rules: {
+    // Would be valuable for strict BEM components but is too hard to enforce with legacy code.
+    'no-descending-specificity': null,
+  },
+};

.stylelintrc.yaml

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Core button style
 // Note that these styles include methods to render buttons the same x-browser, described here:
 // http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
@@ -214,6 +215,7 @@
         }
     }
 
+    // stylelint-disable-next-line no-duplicate-selectors
     &:hover {
         background-color: $color-button-hover;
         color: $color-white;
@@ -302,12 +304,6 @@
         border: 0;
     }
 
-    &.button--icon {
-        .icon {
-            @include svg-icon(1.5em);
-        }
-    }
-
     &.button-strokeonhover {
         border: 1px solid transparent;
 
@@ -597,7 +593,7 @@ button {
         background-color: $color-white;
         padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
         margin-bottom: 1em;
-        border: 1px solid lighten($color-grey-4, 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
+        border: 1px solid color.adjust($color-grey-4, $lightness: 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
     }
 
     &.moving {

client/scss/components/_button.scss

@@ -36,7 +36,7 @@ overridden here? hmm.
         // TODO: [icon-font] remove when the Wagtail icon font is removed
         &:before {
             vertical-align: middle;
-            font-family: wagtail;
+            font-family: $font-wagtail-icons;
             content: '';
             // position: relative
             display: inline-block;

client/scss/components/_chooser.scss

@@ -329,6 +329,7 @@
 }
 
 // Transitions
+// stylelint-disable-next-line no-duplicate-selectors
 .dropdown ul {
     @include transition(opacity 0.2s linear);
 }

client/scss/components/_dropdown.legacy.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .footer {
     $border-curvature: 3px;
     @include transition(bottom 0.5s ease 1s);
@@ -82,7 +84,7 @@
     .meta {
         float: right;
         text-align: right;
-        padding: 7px $grid-gutter-width / 2;
+        padding: 7px math.div($grid-gutter-width, 2);
         font-size: 0.85em;
 
         p {

client/scss/components/_footer.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:math";
+// stylelint-disable scss/comment-no-empty
 // These are the generic stylings for forms of any type.
 // If you're styling something specific to the page editing interface,
 // it probably ought to go in layouts/page-editor.scss
@@ -92,8 +95,8 @@ select::-ms-expand {
         top: 1px;
         bottom: 0;
         width: 1.5em;
-        font-family: wagtail;
-        content: map-get($icons, 'arrow-down');
+        font-family: $font-wagtail-icons;
+        content: map.get($icons, 'arrow-down');
         border: 1px solid $color-input-border;
         border-width: 0 0 0 1px;
         text-align: center;
@@ -134,9 +137,9 @@ select::-ms-expand {
     }
 
     &::before {
-        font-family: wagtail;
+        font-family: $font-wagtail-icons;
         vertical-align: -10%;
-        content: map-get($icons, 'cross');
+        content: map.get($icons, 'cross');
     }
 }
 
@@ -191,7 +194,7 @@ label.required:after {
 
         &:before,
         &:after {
-            font-family: wagtail;
+            font-family: $font-wagtail-icons;
             position: absolute;
             top: 0.5em;
             line-height: 100%;
@@ -246,19 +249,19 @@ label.required:after {
 .date_field,
 .date_time_field {
     .input:before {
-        content: map-get($icons, 'date');
+        content: map.get($icons, 'date');
     }
 }
 
 .time_field {
     .input:before {
-        content: map-get($icons, 'time');
+        content: map.get($icons, 'time');
     }
 }
 
 .url_field {
     .input:before {
-        content: map-get($icons, 'link');
+        content: map.get($icons, 'link');
     }
 }
 
@@ -345,7 +348,7 @@ li.inline .field {
 // solve gutter issues of inline fields
 ul.inline li:first-child,
 li.inline:first-child {
-    margin-left: -$grid-gutter-width / 2;
+    margin-left: math.div(-$grid-gutter-width, 2);
 }
 
 // search-bars
@@ -380,6 +383,7 @@ li.inline:first-child {
 }
 
 // Transitions
+// stylelint-disable-next-line no-duplicate-selectors
 .help {
     @include transition(opacity 0.2s ease);
 }

client/scss/components/_forms.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 header {
     padding-top: 1em;
     padding-bottom: 1em;
@@ -67,7 +69,7 @@ header {
             .breadcrumb {
                 margin-left: -$desktop-nice-padding;
                 margin-right: -$desktop-nice-padding;
-                padding-left: $desktop-nice-padding / 2;
+                padding-left: math.div($desktop-nice-padding, 2);
             }
         }
     }
@@ -77,7 +79,7 @@ header {
 
         .breadcrumb {
             margin-bottom: 1rem;
-            padding-left: $desktop-nice-padding / 2; // rather than padding-left: revert;
+            padding-left: math.div($desktop-nice-padding, 2); // rather than padding-left: revert;
         }
     }
 

client/scss/components/_header.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+@use "sass:map";
 // Help text formatters
 .help-block {
     padding: 1em;
@@ -26,38 +28,38 @@
     position: relative;
 
     &:before {
-        font-family: wagtail;
+        font-family: $font-wagtail-icons;
         position: absolute;
         left: 1em;
         top: 0.7em;
-        content: map-get($icons, 'help');
+        content: map.get($icons, 'help');
         font-size: 1.4em;
     }
 }
 
 .help-info {
-    background-color: lighten($color-blue, 30%);
+    background-color: color.adjust($color-blue, $lightness: 30%);
 
     &:before {
         color: $color-blue;
     }
 }
 
 .help-warning {
-    background-color: lighten($color-orange, 30%);
+    background-color: color.adjust($color-orange, $lightness: 30%);
 
     &:before {
         color: $color-orange;
-        content: map-get($icons, 'warning');
+        content: map.get($icons, 'warning');
     }
 }
 
 .help-critical {
-    background-color: lighten($color-red, 40%);
+    background-color: color.adjust($color-red, $lightness: 40%);
 
     &:before {
         color: $color-red;
-        content: map-get($icons, 'warning');
+        content: map.get($icons, 'warning');
     }
 }
 

client/scss/components/_help-block.scss

@@ -1,3 +1,4 @@
+@use "sass:string";
 // The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
 @font-face {
     font-family: 'wagtail';
@@ -29,12 +30,14 @@
     @include icon(); // from _mixins.scss
 }
 
+// stylelint-disable-next-line no-duplicate-selectors
 .icon:after,
 .hallotoolbar [class^='icon-']:after,
 .hallotoolbar [class^='icon-']:after {
     text-align: right;
 }
 
+// stylelint-disable-next-line no-duplicate-selectors
 .hallotoolbar [class^='icon-'],
 .hallotoolbar [class*=' icon-']:before,
 .hallotoolbar [class*=' icon-']:before,
@@ -50,13 +53,13 @@
 
 @each $icon, $content in $icons {
     .icon-#{$icon}:before {
-        content: quote(#{$content});
+        content: string.quote(#{$content});
     }
 }
 
 @each $icon, $content in $icons-after {
     .icon-#{$icon}:after {
-        content: quote(#{$content});
+        content: string.quote(#{$content});
     }
 }
 
@@ -155,6 +158,7 @@ svg.icon-spinner { // TODO: leave only class when iconfont styles are removed
     }
 }
 
+// stylelint-disable-next-line no-duplicate-selectors
 .icon {
     &.initial {
         @include svg-icon(1em);

client/scss/components/_icons.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 // =============================================================================
 // Indicator light
 // =============================================================================
@@ -42,7 +43,7 @@ $c-indicator-margin: 0.25rem;
 
     &:before {
         content: '';
-        width: $c-indicator-size / 2;
+        width: math.div($c-indicator-size, 2);
         height: $c-indicator-size;
         position: absolute;
         top: 0;

client/scss/components/_indicator.scss

@@ -253,6 +253,7 @@ ul.listing {
         }
     }
 
+    // stylelint-disable-next-line no-duplicate-selectors
     .button-secondary {
         background-color: $color-white;
     }
@@ -450,6 +451,7 @@ ul.listing {
     word-wrap: break-word;
 }
 
+// stylelint-disable-next-line no-duplicate-selectors
 ul.listing {
     border-top: 1px dashed $color-input-border;
     margin-bottom: 2em;
@@ -534,9 +536,6 @@ table.listing {
 
     ul {
         @include unlist();
-    }
-
-    ul {
         margin-top: -1.7em;
     }
 
@@ -739,6 +738,7 @@ table.listing {
     }
 }
 
+// stylelint-disable no-duplicate-selectors
 
 // Transitions
 .listing {

client/scss/components/_listing.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
 .loading-mask {
     &.loading {
@@ -26,9 +27,9 @@
             left: 50%;
             top: 50%;
             margin: -15px 0 0 -15px;
-            font-family: wagtail;
+            font-family: $font-wagtail-icons;
             animation: spin-wag 0.5s infinite linear;
-            content: map-get($icons, 'spinner');
+            content: map.get($icons, 'spinner');
             z-index: 2;
             color: $color-teal;
         }

client/scss/components/_loading-mask.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .nav-wrapper {
     position: relative;
     margin-left: -$menu-width;
@@ -257,10 +259,10 @@
         }
 
         &:before {
-            font-family: wagtail;
+            font-family: $font-wagtail-icons;
             font-weight: 200;
             text-transform: none;
-            content: map-get($icons, 'search');
+            content: map.get($icons, 'search');
             display: block;
             height: 100%;
             line-height: 3.3em;
@@ -508,6 +510,7 @@ body.explorer-open {
     z-index: 5;
 }
 
+// stylelint-disable-next-line no-duplicate-selectors
 .nav-wrapper {
     z-index: 2;
 }
@@ -520,6 +523,7 @@ body.explorer-open {
 // .content-wrapper {
 // z-index: 3;
 // }
+// stylelint-disable-next-line no-duplicate-selectors
 .nav-submenu {
     z-index: 6;
 }

client/scss/components/_main-nav.scss

@@ -1,6 +1,5 @@
 // Messages are specific to Django's 'Messaging' system which adds messages into the session,
 // for display on the next page visited. These appear as an animated banner at the top of the page.
-//
 // For inline help text, see typography.scss
 .messages {
     position: relative;