Add (basic) support for Stylelint, to allow linting of CSS files

This is *similar* to the existing linting for JavaScript files, but covers CSS files instead.
While there's a lot of rules that could potentially be used, the main advantage of using Stylelint is that it has Prettier integration which means that we can automatically enforce a *consistent* style for our CSS files as well.

As a proof of concept, this patch is purposely limited to:
 - Adding a simple rule, here `block-no-empty` is chosen; see https://stylelint.io/user-guide/rules/block-no-empty
 - Adding Prettier integration, to unify the style of our CSS files.

Please find additional information at https://stylelint.io/

.stylelintignore

@@ -0,0 +1,17 @@
+build/
+l10n/
+docs/
+node_modules/
+external/bcmaps/
+external/webL10n/
+external/cmapscompress/
+external/builder/fixtures/
+external/builder/fixtures_esprima/
+src/shared/cffStandardStrings.js
+src/shared/fonts_utils.js
+test/tmp/
+test/features/
+test/pdfs/
+test/resources/
+test/font/*_spec.js
+*~/

.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    "stylelint-prettier"
+  ],
+
+  "extends": [
+    "stylelint-prettier/recommended"
+  ],
+
+
+  "rules": {
+    "block-no-empty": true,
+  },
+}

extensions/chromium/contentstyle.css

@@ -1,8 +1,8 @@
 /**
  * Detect creation of <embed> and <object> tags.
  */
-@-webkit-keyframes pdfjs-detected-object-or-embed { from {} }
+@-webkit-keyframes pdfjs-detected-object-or-embed { from { /* empty */ } }
-@keyframes         pdfjs-detected-object-or-embed { from {} }
+@keyframes         pdfjs-detected-object-or-embed { from { /* empty */ } }
 object, embed {
   -webkit-animation-delay: 0s !important;
   -webkit-animation-name: pdfjs-detected-object-or-embed !important;

gulpfile.js

@@ -1471,10 +1471,10 @@ gulp.task(
 
 gulp.task("lint", function (done) {
   console.log();
-  console.log("### Linting JS files");
+  console.log("### Linting JS/CSS files");
 
   // Ensure that we lint the Firefox specific *.jsm files too.
-  var options = [
+  const esLintOptions = [
     "node_modules/eslint/bin/eslint",
     "--ext",
     ".js,.jsm",
@@ -1482,16 +1482,34 @@ gulp.task("lint", function (done) {
     "--report-unused-disable-directives",
   ];
   if (process.argv.includes("--fix")) {
-    options.push("--fix");
+    esLintOptions.push("--fix");
   }
-  var esLintProcess = startNode(options, { stdio: "inherit" });
+
-  esLintProcess.on("close", function (code) {
+  const styleLintOptions = [
-    if (code !== 0) {
+    "node_modules/stylelint/bin/stylelint",
+    "**/*.css",
+    "--report-needless-disables",
+  ];
+  if (process.argv.includes("--fix")) {
+    styleLintOptions.push("--fix");
+  }
+
+  const esLintProcess = startNode(esLintOptions, { stdio: "inherit" });
+  esLintProcess.on("close", function (esLintCode) {
+    if (esLintCode !== 0) {
       done(new Error("ESLint failed."));
       return;
     }
-    console.log("files checked, no errors found");
+
-    done();
+    const styleLintProcess = startNode(styleLintOptions, { stdio: "inherit" });
+    styleLintProcess.on("close", function (styleLintCode) {
+      if (styleLintCode !== 0) {
+        done(new Error("Stylelint failed."));
+        return;
+      }
+      console.log("files checked, no errors found");
+      done();
+    });
   });
 });
 

package.json

@@ -44,6 +44,9 @@
     "puppeteer": "~3.3.0",
     "rimraf": "^2.7.1",
     "streamqueue": "^1.1.2",
+    "stylelint": "^13.6.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-prettier": "^1.1.2",
     "systemjs": "^0.21.6",
     "systemjs-plugin-babel": "^0.0.25",
     "terser": "^4.8.0",

web/viewer.css

@@ -1371,8 +1371,8 @@ html[dir='rtl'] .treeItem > .treeItems {
   text-decoration: none;
   display: inline-block;
   min-width: 95%;
-  min-width: calc(100% - 4px); /* Subtract the right padding (left, in RTL mode)
+  /* Subtract the right padding (left, in RTL mode) of the container: */
-                                  of the container. */
+  min-width: calc(100% - 4px);
   height: auto;
   margin-bottom: 1px;
   border-radius: 2px;