Add a new linting task in order to detect unused/unknown css variables in the Firefox build

The goal is to be able to catch the errors before making a release.
And fix some css issues (especially the missing css code for the newly added menu.css)

Author: calixteman

.github/workflows/lint.yml

@@ -32,3 +32,6 @@ jobs:
 
       - name: Run lint-chromium
         run: npx gulp lint-chromium
+
+      - name: Run lint-mozcentral
+        run: npx gulp lint-mozcentral

.stylelintrc

@@ -17,9 +17,9 @@
       "float": ["inline-start", "inline-end"]
     },
     "length-zero-no-unit": [true, {
-      ignore: ["custom-properties"]
+      "ignore": ["custom-properties"]
     }],
     "selector-pseudo-element-colon-notation": "double",
-    "shorthand-property-no-redundant-values": true,
-  },
+    "shorthand-property-no-redundant-values": true
+  }
 }

external/builder/builder.mjs

@@ -39,15 +39,22 @@ function preprocess(inFilename, outFilename, defines) {
   }
 
   function expandCssImports(content, baseUrl) {
+    if (defines.GECKOVIEW) {
+      // In Geckoview, we don't need some styles.
+      const startComment = "/* Ignored in GECKOVIEW: begin */";
+      const endComment = "/* Ignored in GECKOVIEW: end */";
+      const beginIndex = content.indexOf(startComment);
+      const endIndex = content.indexOf(endComment);
+      if (beginIndex >= 0 && endIndex > beginIndex) {
+        content =
+          content.substring(0, beginIndex) +
+          content.substring(endIndex + endComment.length);
+      }
+    }
+
     return content.replaceAll(
       /^\s*@import\s+url\(([^)]+)\);\s*$/gm,
       function (all, url) {
-        if (defines.GECKOVIEW) {
-          switch (url) {
-            case "annotation_editor_layer_builder.css":
-              return "";
-          }
-        }
         const file = path.join(path.dirname(baseUrl), url);
         const imported = fs.readFileSync(file, "utf8").toString();
         return expandCssImports(imported, file);

external/stylelint/no-unused-custom-properties.mjs

@@ -0,0 +1,110 @@
+/* Copyright 2025 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// TODO: Remove the exception below once someone figures out how to fix it.
+// eslint-disable-next-line import/no-unresolved
+import { parse, registerWalkers, Root } from "postcss-values-parser";
+import { isString } from "stylelint/lib/utils/validateTypes.mjs";
+import stylelint from "stylelint";
+
+const {
+  createPlugin,
+  utils: { report, validateOptions },
+} = stylelint;
+
+registerWalkers(Root);
+
+const ruleName = "pdfjs/no-unused-custom-properties";
+
+// It's a very basic linter: we don't take into account scopes.
+// But it should be enough for our use case.
+
+/** @type {import('stylelint').Plugin} */
+const ruleFunction =
+  (enabled, { ignoreList = [] } = {}, context = {}) =>
+  (root, result) => {
+    const validOptions = validateOptions(
+      result,
+      ruleName,
+      {
+        actual: enabled,
+        possible: [true],
+      },
+      {
+        actual: ignoreList,
+        possible: [isString],
+        optional: true,
+      }
+    );
+
+    if (!validOptions) {
+      return;
+    }
+
+    ignoreList = ignoreList.map(s => (s.startsWith("--") ? s : `--${s}`));
+
+    const usedCustomProperties = new Set(ignoreList);
+    const definedCustomProperties = new Set();
+    const usedBy = new Map();
+    root.walkDecls(decl => {
+      let definingProperty = null;
+      if (decl.prop.startsWith("--")) {
+        // This is a custom property definition.
+        definingProperty = decl.prop;
+        definedCustomProperties.add(definingProperty);
+      }
+      // Parse the declaration value to find var() usages.
+      const parsedValue = parse(decl.value);
+      parsedValue.walkFuncs(node => {
+        if (!node.isVar || node.nodes.length === 0) {
+          return;
+        }
+        // This is a var() function; get the custom property name.
+        const property = node.nodes[0].value;
+        if (!definingProperty) {
+          // This is a usage of a custom property but not in a definition.
+          // width: var(--foo);
+          usedCustomProperties.add(property);
+          return;
+        }
+        let usages = usedBy.get(property);
+        if (!usages) {
+          usages = [];
+          usedBy.set(property, usages);
+        }
+        // Record that this custom property is used by the defining property.
+        // --foo: var(--bar);
+        // bar is really used only if foo is.
+        usages.push(definingProperty);
+      });
+    });
+    const isUsed = p =>
+      usedCustomProperties.has(p) || (usedBy.get(p) || []).some(isUsed);
+    for (const customProperty of definedCustomProperties) {
+      if (isUsed(customProperty)) {
+        continue;
+      }
+      report({
+        message: `Custom property "${customProperty}" is defined but never used.`,
+        node: root,
+        result,
+        ruleName,
+      });
+    }
+  };
+
+ruleFunction.ruleName = ruleName;
+
+export default createPlugin(ruleName, ruleFunction);

gulpfile.mjs

@@ -2099,6 +2099,35 @@ gulp.task("lint", function (done) {
   });
 });
 
+gulp.task(
+  "lint-mozcentral",
+  gulp.series("mozcentral", function runLintMozcentral(done) {
+    console.log();
+    console.log("### Checking mozilla-central files");
+
+    const styleLintOptions = [
+      "../../node_modules/stylelint/bin/stylelint.mjs",
+      "**/*.css",
+      "--report-needless-disables",
+      "--config",
+      "../../stylelint-mozcentral.json",
+    ];
+
+    const styleLintProcess = startNode(styleLintOptions, {
+      stdio: "inherit",
+      cwd: BUILD_DIR + "mozcentral/",
+    });
+    styleLintProcess.on("close", function (styleLintCode) {
+      if (styleLintCode !== 0) {
+        done(new Error("Stylelint failed."));
+        return;
+      }
+      console.log("files checked, no errors found");
+      done();
+    });
+  })
+);
+
 gulp.task(
   "lint-chromium",
   gulp.series(