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; }
+  0% {
-  50% { left: 100%; }
+    left: 0;
-  100% { left: 100%; }
+  }
+  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,
+  background-image: linear-gradient(
+    to right,
     rgba(153, 153, 153, 1) 0%,
     rgba(255, 255, 255, 1) 50%,
-                                    rgba(153, 153, 153, 1) 100%);
+    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 {} }
+@-webkit-keyframes pdfjs-detected-object-or-embed {
-@keyframes         pdfjs-detected-object-or-embed { from {} }
+  from {
-object, embed {
+    /* 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,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,17 +1482,35 @@ 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;
     }
+
+    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();
     });
+  });
 });
 
 gulp.task(

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/annotation_layer_builder.css

@@ -98,7 +98,7 @@
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
   background-color: rgba(0, 0, 0, 1);
-  content: '';
+  content: "";
   display: block;
   position: absolute;
 }

web/pdf_viewer.css

@@ -46,13 +46,16 @@
   border: none;
 }
 
-.pdfViewer.scrollHorizontal, .pdfViewer.scrollWrapped, .spread {
+.pdfViewer.scrollHorizontal,
+.pdfViewer.scrollWrapped,
+.spread {
   margin-left: 3.5px;
   margin-right: 3.5px;
   text-align: center;
 }
 
-.pdfViewer.scrollHorizontal, .spread {
+.pdfViewer.scrollHorizontal,
+.spread {
   white-space: nowrap;
 }
 
@@ -102,7 +105,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  background: url('images/loading-icon.gif') center no-repeat;
+  background: url("images/loading-icon.gif") center no-repeat;
 }
 
 .pdfPresentationMode .pdfViewer {

web/text_layer_builder.css

@@ -21,7 +21,7 @@
   bottom: 0;
   overflow: hidden;
   opacity: 0.2;
-  line-height: 1.0;
+  line-height: 1;
 }
 
 .textLayer > span {

web/viewer.css

@@ -253,11 +253,11 @@ select {
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
-html[dir='ltr'] #sidebarContainer {
+html[dir="ltr"] #sidebarContainer {
   transition-property: left;
   left: calc(0px - var(--sidebar-width));
 }
-html[dir='rtl'] #sidebarContainer {
+html[dir="rtl"] #sidebarContainer {
   transition-property: right;
   right: calc(0px - var(--sidebar-width));
 }
@@ -277,10 +277,10 @@ html[dir='rtl'] #sidebarContainer {
 #outerContainer.sidebarOpen #sidebarContainer {
   visibility: visible;
 }
-html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer {
+html[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer {
   left: 0px;
 }
-html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
+html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
   right: 0px;
 }
 
@@ -302,11 +302,11 @@ html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
   width: 100%;
   background-color: rgba(0, 0, 0, 0.1);
 }
-html[dir='ltr'] #sidebarContent {
+html[dir="ltr"] #sidebarContent {
   left: 0;
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
 }
-html[dir='rtl'] #sidebarContent {
+html[dir="rtl"] #sidebarContent {
   right: 0;
   box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
 }
@@ -331,11 +331,15 @@ html[dir='rtl'] #sidebarContent {
   transition-duration: 0s;
 }
 
-html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
+html[dir="ltr"]
+  #outerContainer.sidebarOpen
+  #viewerContainer:not(.pdfPresentationMode) {
   transition-property: left;
   left: var(--sidebar-width);
 }
-html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
+html[dir="rtl"]
+  #outerContainer.sidebarOpen
+  #viewerContainer:not(.pdfPresentationMode) {
   transition-property: right;
   right: var(--sidebar-width);
 }
@@ -357,21 +361,19 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
   height: 32px;
   background-color: var(--sidebar-bg-color);
 }
-html[dir='ltr'] #toolbarSidebar {
+html[dir="ltr"] #toolbarSidebar {
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
-    0 1px 0 rgba(0, 0, 0, 0.15),
     0 0 1px rgba(0, 0, 0, 0.1);
 }
-html[dir='rtl'] #toolbarSidebar {
+html[dir="rtl"] #toolbarSidebar {
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
-    0 1px 0 rgba(0, 0, 0, 0.15),
     0 0 1px rgba(0, 0, 0, 0.1);
 }
 
-html[dir='ltr'] #toolbarSidebar .toolbarButton {
+html[dir="ltr"] #toolbarSidebar .toolbarButton {
   margin-right: 2px !important;
 }
-html[dir='rtl'] #toolbarSidebar .toolbarButton {
+html[dir="rtl"] #toolbarSidebar .toolbarButton {
   margin-left: 2px !important;
 }
 
@@ -383,22 +385,28 @@ html[dir='rtl'] #toolbarSidebar .toolbarButton {
   z-index: 200;
   cursor: ew-resize;
 }
-html[dir='ltr'] #sidebarResizer {
+html[dir="ltr"] #sidebarResizer {
   right: -6px;
 }
-html[dir='rtl'] #sidebarResizer {
+html[dir="rtl"] #sidebarResizer {
   left: -6px;
 }
 
-#toolbarContainer, .findbar, .secondaryToolbar {
+#toolbarContainer,
+.findbar,
+.secondaryToolbar {
   position: relative;