Merge pull request #12301 from Snuffleupagus/stylelint

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

.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,
+  },
+}

examples/mobile-viewer/viewer.css

@@ -113,7 +113,8 @@ footer {
   background-color: rgba(0, 0, 0, 0);
   font-size: 1.2rem;
   color: rgba(255, 255, 255, 1);
-  background-image: url(images/div_line_left.png), url(images/div_line_right.png);
+  background-image: url(images/div_line_left.png),
+    url(images/div_line_right.png);
   background-repeat: no-repeat;
   background-position: left, right;
   background-size: 0.2rem, 0.2rem;
@@ -138,7 +139,7 @@ footer {
 }
 
 .toolbarButton[disabled] {
-  opacity: .3;
+  opacity: 0.3;
 }
 
 .hidden {
@@ -166,7 +167,7 @@ canvas {
 .pdfViewer .page .loadingIcon {
   width: 2.9rem;
   height: 2.9rem;
-  background: url("images/spinner.png") no-repeat left top / 38rem ;
+  background: url("images/spinner.png") no-repeat left top / 38rem;
   border: medium none;
   animation: 1s steps(10, end) 0s normal none infinite moveDefault;
   display: block;
@@ -187,7 +188,7 @@ canvas {
 
 #loadingBar {
   position: relative;
-  height: .6rem;
+  height: 0.6rem;
   background-color: rgba(51, 51, 51, 1);
   border-bottom: 1px solid rgba(51, 51, 51, 1);
   margin-top: 5rem;
@@ -204,9 +205,15 @@ canvas {
 }
 
 @keyframes progressIndeterminate {
-  0% { left: 0; }
-  50% { left: 100%; }
-  100% { left: 100%; }
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 100%;
+  }
+  100% {
+    left: 100%;
+  }
 }
 
 #loadingBar .progress.indeterminate {
@@ -220,10 +227,12 @@ canvas {
   left: 0;
   height: 100%;
   width: 5rem;
-  background-image: linear-gradient(to right,
-                                    rgba(153, 153, 153, 1) 0%,
-                                    rgba(255, 255, 255, 1) 50%,
-                                    rgba(153, 153, 153, 1) 100%);
+  background-image: linear-gradient(
+    to right,
+    rgba(153, 153, 153, 1) 0%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(153, 153, 153, 1) 100%
+  );
   background-size: 100% 100%;
   background-repeat: no-repeat;
   animation: progressIndeterminate 2s linear infinite;

extensions/chromium/contentstyle.css

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

gulpfile.js

@@ -1471,27 +1471,45 @@ 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",
     ".",
     "--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) {
-    if (code !== 0) {
+
+  const styleLintOptions = [
+    "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();
+    });
   });
 });