Bug 1921088 - Upgrade Stylelint and related libraries to the latest version r=Standard8,devtools-reviewers,omc-reviewers,home-newtab-reviewers,nchevobbe,thecount,desktop-theme-reviewers,dao,aminomancer

In addition to upgrding our Stylelint packages, this patch also introduces the @stylistic/stylelint-plugin to preserve a number of rules that were completely removed in v16. It also migrates the code for the custom plugin introduced in bug 1838298 to ES Modules.

Differential Revision: https://phabricator.services.mozilla.com/D224250

.stylelintrc.js

@@ -25,7 +25,10 @@ const ignoreFiles = [
 
 module.exports = {
   extends: ["stylelint-config-recommended"],
-  plugins: ["./tools/lint/stylelint/stylelint-plugin-mozilla"],
+  plugins: [
+    "./tools/lint/stylelint/stylelint-plugin-mozilla/index.mjs",
+    "@stylistic/stylelint-plugin",
+  ],
   ignoreFiles,
   rules: {
     "stylelint-plugin-mozilla/no-base-design-tokens": true,
@@ -275,6 +278,18 @@ module.exports = {
       customSyntax: "postcss-scss",
       extends: "stylelint-config-standard-scss",
       rules: {
+        "@stylistic/color-hex-case": "upper",
+        "@stylistic/indentation": 2,
+        "@stylistic/no-eol-whitespace": true,
+        "@stylistic/no-missing-end-of-source-newline": true,
+        "@stylistic/number-leading-zero": "always",
+        "@stylistic/number-no-trailing-zeros": true,
+        "@stylistic/string-quotes": [
+          "single",
+          {
+            avoidEscape: true,
+          },
+        ],
         "at-rule-disallowed-list": [
           ["debug", "warn", "error"],
           {
@@ -283,7 +298,6 @@ module.exports = {
         ],
         "at-rule-no-vendor-prefix": null,
         "color-function-notation": null,
-        "color-hex-case": "upper",
         "comment-empty-line-before": [
           "always",
           {
@@ -303,14 +317,9 @@ module.exports = {
           },
         ],
         "function-url-no-scheme-relative": true,
-        indentation: 2,
         "keyframes-name-pattern": null,
         "media-feature-name-no-vendor-prefix": null,
         "no-descending-specificity": null,
-        "no-eol-whitespace": true,
-        "no-missing-end-of-source-newline": true,
-        "number-leading-zero": "always",
-        "number-no-trailing-zeros": true,
         "property-disallowed-list": [
           ["margin-left", "margin-right"],
           {
@@ -329,12 +338,6 @@ module.exports = {
         ],
         "selector-class-pattern": null,
         "selector-no-vendor-prefix": null,
-        "string-quotes": [
-          "single",
-          {
-            avoidEscape: true,
-          },
-        ],
         "value-keyword-case": null,
         "value-no-vendor-prefix": null,
       },

browser/components/aboutwelcome/content/aboutwelcome.css

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* stylelint-disable max-nesting-depth */
 #feature-callout {
-  --fc-background: var(--fc-background-light, #fff);
+  --fc-background: var(--fc-background-light, #FFF);
   --fc-color: var(--fc-color-light, rgb(21, 20, 26));
   --fc-border: var(--fc-border-light, #CFCFD8);
   --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
@@ -16,13 +16,13 @@
   --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
   --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
   --fc-button-border-active: var(--fc-button-border-active-light, transparent);
-  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0);
+  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
   --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
   --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
-  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb);
+  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
   --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
   --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
-  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94);
+  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
   --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
   --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
   --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
@@ -114,7 +114,7 @@
 }
 @media (-moz-content-prefers-color-scheme: light) {
   #feature-callout.simulateContent {
-    --fc-background: var(--fc-background-light, #fff);
+    --fc-background: var(--fc-background-light, #FFF);
     --fc-color: var(--fc-color-light, rgb(21, 20, 26));
     --fc-border: var(--fc-border-light, #CFCFD8);
     --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
@@ -127,13 +127,13 @@
     --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
     --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
     --fc-button-border-active: var(--fc-button-border-active-light, transparent);
-    --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0);
+    --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
     --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
     --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
-    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb);
+    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
     --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
     --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
-    --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94);
+    --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
     --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
     --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
     --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);

browser/components/asrouter/bin/import-rollouts.js

@@ -220,17 +220,17 @@ async function main() {
       flags: {
         collection: {
           type: "string",
-          alias: "c",
+          shortFlag: "c",
           default: DEFAULT_COLLECTION_ID,
         },
         experiments: {
           type: "boolean",
-          alias: "e",
+          shortFlag: "e",
           default: false,
         },
         skipValidation: {
           type: "boolean",
-          alias: "s",
+          shortFlag: "s",
           default: false,
         },
       },

browser/components/asrouter/content-src/styles/_feature-callout-theme.scss

@@ -6,7 +6,7 @@
 // these values exactly, since they're drawn from other parts of the browser.
 
 @mixin light-theme {
-  --fc-background: var(--fc-background-light, #fff);
+  --fc-background: var(--fc-background-light, #FFF);
   --fc-color: var(--fc-color-light, rgb(21, 20, 26));
   --fc-border: var(--fc-border-light, #CFCFD8);
   --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
@@ -19,13 +19,13 @@
   --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
   --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
   --fc-button-border-active: var(--fc-button-border-active-light, transparent);
-  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0);
+  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
   --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
   --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
-  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb);
+  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
   --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
   --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
-  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94);
+  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
   --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
   --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
   --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);

browser/components/newtab/bin/render-activity-stream-html.js

@@ -175,12 +175,12 @@ async function main() {
       flags: {
         addonPath: {
           type: "string",
-          alias: "a",
+          shortFlag: "a",
           default: DEFAULT_OPTIONS.addonPath,
         },
         baseUrl: {
           type: "string",
-          alias: "b",
+          shortFlag: "b",
           default: DEFAULT_OPTIONS.baseUrl,
         },
       },

browser/components/newtab/bin/try-runner.js

@@ -310,7 +310,7 @@ async function main() {
         test: {
           type: "string",
           isMultiple: true,
-          alias: "t",
+          shortFlag: "t",
         },
       },
     }

devtools/client/themes/webconsole.css

@@ -806,7 +806,6 @@ a.learn-more-link.webconsole-learn-more-link {
   max-height: 250px;
   overflow: auto;
   position: relative;
-  border-width: 1px 0 0 1px;
   padding: 0;
   margin-block-end: var(--attachment-margin-block-end);
   border: 1px solid var(--consoletable-border);

package.json

@@ -5,6 +5,7 @@
   "license": "MPL-2.0",
   "devDependencies": {
     "@microsoft/eslint-plugin-sdl": "0.2.2",
+    "@stylistic/stylelint-plugin": "^3.1.0",
     "@types/gecko": "file:tools/@types",
     "eslint": "8.57.1",
     "eslint-config-prettier": "9.1.0",
@@ -22,9 +23,9 @@
     "eslint-plugin-spidermonkey-js": "file:tools/lint/eslint/eslint-plugin-spidermonkey-js",
     "jsdoc": "4.0.3",
     "prettier": "2.8.8",
-    "stylelint": "15.10.3",
-    "stylelint-config-recommended": "13.0.0",
-    "stylelint-config-standard-scss": "11.0.0",
+    "stylelint": "16.9.0",
+    "stylelint-config-recommended": "14.0.1",
+    "stylelint-config-standard-scss": "13.1.0",
     "yarn": "1.22.22"
   },
   "notes(private)": "We don't want to publish to npm, so this is marked as private",

tools/lint/stylelint/__init__.py

@@ -129,30 +129,29 @@ def run(cmd_args, config, fix):
     signal.signal(signal.SIGINT, orig)
 
     try:
-        output, errors = proc.communicate()
+        _, errors = proc.communicate()
     except KeyboardInterrupt:
         proc.kill()
         return {"results": [], "fixed": 0}
 
     if errors:
         errors = errors.decode(encoding, "replace")
-        print(STYLELINT_ERROR_MESSAGE.format(errors))
 
     # 0 is success, 2 is there was at least 1 rule violation. Anything else
     # is more serious.
     if proc.returncode != 0 and proc.returncode != 2:
         if proc.returncode == 78:
             print("Stylelint reported an issue with its configuration file.")
-            print(output)
+            print(errors)
         return 1
 
-    if not output:
-        return {"results": [], "fixed": 0}  # no output means success
-    output = output.decode(encoding, "replace")
+    if not errors:
+        return {"results": [], "fixed": 0}
+
     try:
-        jsonresult = json.loads(output)
+        jsonresult = json.loads(errors)
     except ValueError:
-        print(STYLELINT_ERROR_MESSAGE.format(output))
+        print(STYLELINT_ERROR_MESSAGE.format(errors))
         return 1
 
     results = []

tools/lint/stylelint/stylelint-plugin-mozilla/helpers.mjs

@@ -8,8 +8,6 @@
 
 const MOZILLA_NAMESPACE = "stylelint-plugin-mozilla";
 
-function namespace(ruleName) {
+export function namespace(ruleName) {
   return `${MOZILLA_NAMESPACE}/${ruleName}`;
 }
-
-module.exports = { namespace };

tools/lint/stylelint/stylelint-plugin-mozilla/index.mjs

@@ -6,12 +6,12 @@
 
 /* eslint-env node */
 
-const { createPlugin } = require("stylelint");
-const rules = require("./rules");
-const { namespace } = require("./helpers");
+import stylelint from "stylelint";
+import rules from "./rules/index.mjs";
+import { namespace } from "./helpers.mjs";
 
 const plugins = Object.keys(rules).map(ruleName => {
-  return createPlugin(namespace(ruleName), rules[ruleName]);
+  return stylelint.createPlugin(namespace(ruleName), rules[ruleName]);
 });
 
-module.exports = plugins;
+export default plugins;

tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs

@@ -6,6 +6,8 @@
 
 /* eslint-env node */
 
-module.exports = {
-  "no-base-design-tokens": require("./no-base-design-tokens"),
+import noBaseDesignTokens from "./no-base-design-tokens.mjs";
+
+export default {
+  "no-base-design-tokens": noBaseDesignTokens,
 };

tools/lint/stylelint/stylelint-plugin-mozilla/rules/no-base-design-tokens.mjs

@@ -4,8 +4,8 @@
 
 /* eslint-env node */
 
-const stylelint = require("stylelint");
-const { namespace } = require("../helpers");
+import stylelint from "stylelint";
+import { namespace } from "../helpers.mjs";
 
 const {
   utils: { report, ruleMessages, validateOptions },
@@ -58,4 +58,4 @@ let ruleFunction = primaryOption => {
 ruleFunction.ruleName = ruleName;
 ruleFunction.messages = messages;
 ruleFunction.meta = meta;
-module.exports = ruleFunction;
+export default ruleFunction;