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
2024-11-23 04:41:11 +00:00 · 2024-10-15 19:39:46 +00:00 · 2024-10-15 19:39:46 +00:00 · 7d802bf04c
commit 7d802bf04c
parent 4a64d54996
14 changed files with 310 additions and 581 deletions
--- a/.stylelintrc.js
+++ b/.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,
      },
--- a/browser/components/aboutwelcome/content/aboutwelcome.css
+++ b/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);
--- a/browser/components/asrouter/bin/import-rollouts.js
+++ b/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,
        },
      },
--- a/browser/components/asrouter/content-src/styles/_feature-callout-theme.scss
+++ b/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);
--- a/browser/components/newtab/bin/render-activity-stream-html.js
+++ b/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,
        },
      },
--- a/browser/components/newtab/bin/try-runner.js
+++ b/browser/components/newtab/bin/try-runner.js
@ -310,7 +310,7 @@ async function main() {
        test: {
          type: "string",
          isMultiple: true,
-          alias: "t",
+          shortFlag: "t",
        },
      },
    }
--- a/devtools/client/themes/webconsole.css
+++ b/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);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/tools/lint/stylelint/init.py
+++ b/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 = []
--- a/tools/lint/stylelint/stylelint-plugin-mozilla/helpers.mjs
+++ b/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 };
--- a/tools/lint/stylelint/stylelint-plugin-mozilla/index.mjs
+++ b/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;
--- a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs
+++ b/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,
 };
--- a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/no-base-design-tokens.mjs
+++ b/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;