Update Stylelint and format scss files (Fixes mozilla#10713)

ChaseKnowlden · Nov 24, 2021 · 0f59dc0 · 0f59dc0
1 parent 39d9fae
commit 0f59dc0
Show file tree

Hide file tree

Showing 183 changed files with 2,149 additions and 3,548 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -10,7 +10,7 @@ exclude: >
     | git-repos
   )
 repos:
-  # Note: hooks that add content must run before ones which check formatting, lint, etc 
+  # Note: hooks that add content must run before ones which check formatting, lint, etc
   - repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.1.10
     hooks:
@@ -80,8 +80,10 @@ repos:
     hooks:
       - id: stylelint
         additional_dependencies:
-          - "stylelint@13.12.0"
-          - "stylelint-config-standard@20.0.0"
+          - "stylelint@14.0.1"
+          - "stylelint-config-standard-scss@2.0.1"
+          - "postcss-scss@4.0.2"
+          - "postcss@8.3.11"
   - repo: https://github.com/eslint/eslint
     rev: v7.32.0
     hooks:

diff --git a/.stylelintrc b/.stylelintrc
@@ -1,43 +1,39 @@
 {
+    "extends": "stylelint-config-standard-scss",
     "rules": {
-        "color-no-invalid-hex": true,
-        "font-family-no-duplicate-names": true,
-        "font-family-name-quotes": "always-where-recommended",
-        "function-name-case": "lower",
-        "function-url-no-scheme-relative": true,
-        "function-url-quotes": "always",
-        "number-no-trailing-zeros": true,
-        "length-zero-no-unit": true,
-        "unit-case": "lower",
-        "unit-no-unknown": true,
-        "property-case": "lower",
-        "property-no-unknown": true,
-        "keyframe-declaration-no-important": true,
-        "declaration-no-important": true,
-        "declaration-block-no-shorthand-property-overrides": true,
-        "declaration-block-single-line-max-declarations": 1,
-        "declaration-block-trailing-semicolon": "always",
-        "declaration-block-semicolon-newline-after": "always-multi-line",
-        "block-no-empty": true,
-        "selector-pseudo-class-no-unknown": true,
-        "selector-pseudo-element-no-unknown": true,
-        "selector-pseudo-element-case": "lower",
-        "selector-type-case": "lower",
-        "selector-type-no-unknown": true,
-        "selector-max-empty-lines": 0,
-        "media-feature-name-case": "lower",
-        "media-feature-name-no-unknown": [
+        "indentation": 4,
+        "string-quotes": "single",
+        "declaration-empty-line-before": "never",
+        "color-function-notation": "legacy",
+        "alpha-value-notation": "number",
+        "property-no-vendor-prefix": null,
+        "value-no-vendor-prefix": null,
+        "at-rule-empty-line-before": null,
+        "no-descending-specificity": null,
+        "value-keyword-case": [
+            "lower",
+            {
+                "ignoreFunctions": ["local"]
+            }
+        ],
+        "max-line-length": null,
+        "font-family-no-missing-generic-family-keyword": [
             true,
             {
-                "ignoreMediaFeatureNames": ["min--moz-device-pixel-ratio"]
+                "ignoreFontFamilies": ["FA-Icons-Contact"]
             }
         ],
-        "comment-no-empty": true,
-        "max-nesting-depth": 5,
-        "no-invalid-double-slash-comments": true,
-        "no-unknown-animations": true,
-        "no-extra-semicolons": true,
-        "no-missing-end-of-source-newline": true,
-        "no-eol-whitespace": true
+        "declaration-block-no-redundant-longhand-properties": [
+            true,
+            {
+                "ignoreShorthands": [
+                    "grid-area",
+                    "grid-column",
+                    "grid-gap",
+                    "grid-row",
+                    "grid-template"
+                ]
+            }
+        ]
     }
 }
diff --git a/Makefile b/Makefile
@@ -19,7 +19,7 @@ help:
 	@echo "  clean         - remove all build, test, coverage and Python artifacts"
 	@echo "  rebuild       - force a rebuild of all of the docker images"
 	@echo "  lint          - check style with Flake8, ESlint, Stylelint, and Prettier"
-	@echo "  format        - format front-end code using Prettier"
+	@echo "  format        - format front-end code using Stylelint and Prettier"
 	@echo "  test          - run tests against local files"
 	@echo "  test-image    - run tests against files in docker image"
 	@echo "  test-cdn      - run CDN tests against TEST_DOMAIN"
@@ -99,7 +99,7 @@ lint: .docker-build-pull
 	${DC} run assets npm run lint
 
 format: .docker-build-pull
-	${DC} run assets npm run prettier
+	${DC} run assets npm run format
 	${DC} run app black .
 
 test: .docker-build-pull

diff --git a/bedrock/firefox/templates/firefox/browsers/compare/brave.html b/bedrock/firefox/templates/firefox/browsers/compare/brave.html
@@ -47,7 +47,7 @@ <h1 class="compare-hero-title">{{ ftl('compare-brave-comparing-firefox-browser')
         <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
         <thead>
           <tr>
             <th>{{ ftl('compare-shared-security-and-privacy') }}</th>
@@ -107,7 +107,7 @@ <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
         <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
         <thead>
           <tr>
             <th>{{ ftl('compare-shared-utility') }}</th>
@@ -188,7 +188,7 @@ <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
         <h2>{{ ftl('compare-shared-portability-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
         <thead>
           <tr>
             <th>{{ ftl('compare-shared-portability') }}</th>

diff --git a/bedrock/firefox/templates/firefox/browsers/compare/chrome.html b/bedrock/firefox/templates/firefox/browsers/compare/chrome.html
@@ -53,7 +53,7 @@ <h1 class="compare-hero-title">{{ ftl('compare-chrome-comparing-firefox-browser'
         <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-security-and-privacy') }}</th>
@@ -108,7 +108,7 @@ <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
         <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-utility') }}</th>
@@ -191,7 +191,7 @@ <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
         <h2>{{ ftl('compare-shared-portability-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-portability') }}</th>

diff --git a/bedrock/firefox/templates/firefox/browsers/compare/edge.html b/bedrock/firefox/templates/firefox/browsers/compare/edge.html
@@ -49,7 +49,7 @@ <h1 class="compare-hero-title">{{ ftl('compare-edge-comparing-firefox-browser-wi
         <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-security-and-privacy') }}</th>
@@ -102,7 +102,7 @@ <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
         <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-utility') }}</th>
@@ -187,7 +187,7 @@ <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
         <h2>{{ ftl('compare-shared-portability-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-portability') }}</th>

diff --git a/bedrock/firefox/templates/firefox/browsers/compare/ie.html b/bedrock/firefox/templates/firefox/browsers/compare/ie.html
@@ -51,7 +51,7 @@ <h1 class="compare-hero-title">{{ ftl('compare-ie-comparing-firefox-browser-with
         <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-security-and-privacy') }}</th>
@@ -101,7 +101,7 @@ <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
         <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-utility') }}</th>
@@ -181,7 +181,7 @@ <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
         <h2>{{ ftl('compare-shared-portability-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-portability') }}</th>

diff --git a/bedrock/firefox/templates/firefox/browsers/compare/opera.html b/bedrock/firefox/templates/firefox/browsers/compare/opera.html
@@ -49,7 +49,7 @@ <h1 class="compare-hero-title">{{ ftl('compare-opera-comparing-firefox-browser')
         <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-security-and-privacy') }}</th>
@@ -102,7 +102,7 @@ <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
         <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-utility') }}</th>
@@ -181,7 +181,7 @@ <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
         <h2>{{ ftl('compare-shared-portability-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-portability') }}</th>

diff --git a/bedrock/firefox/templates/firefox/browsers/compare/safari.html b/bedrock/firefox/templates/firefox/browsers/compare/safari.html
@@ -49,7 +49,7 @@ <h1 class="compare-hero-title">{{ ftl('compare-safari-comparing-firefox-browser'
         <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-security-and-privacy') }}</th>
@@ -104,7 +104,7 @@ <h2>{{ ftl('compare-shared-security-and-privacy-strong') }}</h2>
         <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-utility') }}</th>
@@ -194,7 +194,7 @@ <h2>{{ ftl('compare-shared-utility-strong') }}</h2>
         <h2>{{ ftl('compare-shared-portability-strong') }}</h2>
       </header>
 
-      <table class="mzp-u-data-table compare-table compare-table--details">
+      <table class="mzp-u-data-table compare-table compare-table-details">
           <thead>
             <tr>
               <th>{{ ftl('compare-shared-portability') }}</th>

diff --git a/media/css/base/banners/firefox-app-store.scss b/media/css/base/banners/firefox-app-store.scss
@@ -8,9 +8,9 @@ $image-path: '/media/protocol/img';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 
 #firefox-app-store-banner {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     position: relative;
-    z-index: 1000; //banner shares same z-index as sticky nav.
+    z-index: 1000; // banner shares same z-index as sticky nav.
 
     // conditional messaging for iOS (Android is default)
     .show-ios {
@@ -48,7 +48,7 @@ $image-path: '/media/protocol/img';
     .c-banner-button {
         @include bidi(((margin-left, auto, margin-right, 0),));
         @include text-body-md;
-        background-color: #68A036;
+        background-color: #68a036;
         border-radius: $border-radius-sm;
         color: $color-white;
         padding: $spacing-xs $spacing-md;
@@ -78,7 +78,7 @@ $image-path: '/media/protocol/img';
         @include bidi(((padding-right, $spacing-lg, 0), (padding-left, 0, $spacing-lg),));
         @include text-body-md;
         color: $color-black;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
         font-weight: 500;
         line-height: 1.2;
         margin: 0;
@@ -111,7 +111,7 @@ $image-path: '/media/protocol/img';
         &:hover,
         &:focus {
             @include transform(scale(1.1));
-            @include transition(transform .1s ease-in-out);
+            @include transition(transform 0.1s ease-in-out);
         }
 
         &:focus {

diff --git a/media/css/base/banners/fundraiser.scss b/media/css/base/banners/fundraiser.scss
@@ -55,7 +55,7 @@ $image-path: '/media/protocol/img';
 
         &:focus,
         &:hover {
-            background-color: rgba(255, 255, 255, .15);
+            background-color: rgba(255, 255, 255, 0.15);
         }
     }
 
@@ -81,7 +81,7 @@ $image-path: '/media/protocol/img';
         top: 0;
 
         &:checked + .mzp-c-button.mzp-t-secondary {
-            background-color: rgba(255, 255, 255, .25);
+            background-color: rgba(255, 255, 255, 0.25);
             font-weight: bold;
         }
     }

diff --git a/media/css/base/banners/includes/_base.scss b/media/css/base/banners/includes/_base.scss
@@ -44,7 +44,6 @@ $image-path: '/media/protocol/img';
             padding-top: $spacing-lg;
             padding-bottom: $spacing-lg;
         }
-
     }
 }
 
@@ -101,7 +100,7 @@ $image-path: '/media/protocol/img';
 
     &:hover,
     &:focus {
-        @include transition(transform .1s ease-in-out);
+        @include transition(transform 0.1s ease-in-out);
         @include transform(scale(1.1));
     }
 

diff --git a/media/css/base/banners/mobile-compare.scss b/media/css/base/banners/mobile-compare.scss
@@ -76,7 +76,7 @@ $image-path: '/media/protocol/img';
 
         &:hover,
         &:focus {
-            @include transition(transform .1s ease-in-out);
+            @include transition(transform 0.1s ease-in-out);
             @include transform(scale(1.1));
         }
 

diff --git a/media/css/base/mozilla-fxa-state.scss b/media/css/base/mozilla-fxa-state.scss
@@ -14,12 +14,12 @@
 }
 
 // Show elements for current variation
-.state-fxa-supported-signed-in  .show-fxa-supported-signed-in,
+.state-fxa-supported-signed-in .show-fxa-supported-signed-in,
 .state-fxa-supported-signed-out .show-fxa-supported-signed-out,
-.state-fxa-unsupported          .show-fxa-unsupported,
-.state-fxa-android              .show-fxa-android,
-.state-fxa-ios                  .show-fxa-ios,
-.state-fxa-not-fx               .show-fxa-not-fx,
-.state-fxa-default              .show-fxa-default {
+.state-fxa-unsupported .show-fxa-unsupported,
+.state-fxa-android .show-fxa-android,
+.state-fxa-ios .show-fxa-ios,
+.state-fxa-not-fx .show-fxa-not-fx,
+.state-fxa-default .show-fxa-default {
     display: block;
 }
diff --git a/media/css/base/mozilla-lazy-image.scss b/media/css/base/mozilla-lazy-image.scss
@@ -5,7 +5,7 @@
 /* -------------------------------------------------------------------------- */
 // lazy loaded images
 
-//don't display placeholder at same time as <img> in <noscript>
+// don't display placeholder at same time as <img> in <noscript>
 .no-js {
     .lazy-image {
         display: none;