Add support for CSS variables using the PostCSS CSS Variables packa…

…ge (issue 11462)

Having thought *briefly* about using `css-vars-ponyfill`, I'm no longer convinced that it'd be a good idea. The reason is that if we actually want to properly support CSS variables, then that functionality should be available in *all* of our CSS files.
Note in particular the `pdf_viewer.css` file that's built as part of the `COMPONENTS` target, in which case I really cannot see how a rewrite-at-the-client solution would ever be guaranteed to always work correctly and without accidentally touching other CSS in the surrounding application.

All-in-all, simply re-writing the CSS variables at build-time seems much easier and is thus the approach taken in this patch; courtesy of https://github.com/MadLittleMods/postcss-css-variables
By using its `preserve` option, the built files will thus include *both* a fallback and a modern `var(...)` format[1]. As a proof-of-concept this patch removes a couple of manually added fallback values, and converts an additional sidebar related property to use a CSS variable.

---
[1] Comparing the `master` branch with this patch, when using `gulp generic`, produces the following diff for the built `web/viewer.css` file:
```diff
@@ -408,6 +408,7 @@

 :root {
   --sidebar-width: 200px;
+  --sidebar-transition-duration: 200ms;
 }

 * {
@@ -550,27 +551,28 @@
   position: absolute;
   top: 32px;
   bottom: 0;
-  width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility
-                   with older browsers that lack support for CSS variables. */
+  width: 200px;
   width: var(--sidebar-width);
   visibility: hidden;
   z-index: 100;
   border-top: 1px solid rgba(51, 51, 51, 1);
   -webkit-transition-duration: 200ms;
           transition-duration: 200ms;
+  -webkit-transition-duration: var(--sidebar-transition-duration);
+          transition-duration: var(--sidebar-transition-duration);
   -webkit-transition-timing-function: ease;
           transition-timing-function: ease;
 }
 html[dir='ltr'] #sidebarContainer {
   -webkit-transition-property: left;
   transition-property: left;
-  left: -200px;
+  left: calc(-1 * 200px);
   left: calc(-1 * var(--sidebar-width));
 }
 html[dir='rtl'] #sidebarContainer {
   -webkit-transition-property: right;
   transition-property: right;
-  right: -200px;
+  right: calc(-1 * 200px);
   right: calc(-1 * var(--sidebar-width));
 }

@@ -640,6 +642,8 @@
 #viewerContainer:not(.pdfPresentationMode) {
   -webkit-transition-duration: 200ms;
           transition-duration: 200ms;
+  -webkit-transition-duration: var(--sidebar-transition-duration);
+          transition-duration: var(--sidebar-transition-duration);
   -webkit-transition-timing-function: ease;
           transition-timing-function: ease;
 }
```

gulpfile.js

@@ -19,6 +19,7 @@
 "use strict";
 
 var autoprefixer = require("autoprefixer");
+var cssvariables = require("postcss-css-variables");
 var fancylog = require("fancy-log");
 var fs = require("fs");
 var gulp = require("gulp");
@@ -82,6 +83,9 @@ var AUTOPREFIXER_CONFIG = {
     "not dead",
   ],
 };
+var CSS_VARIABLES_CONFIG = {
+  preserve: true,
+};
 
 var DEFINES = {
   PRODUCTION: true,
@@ -765,7 +769,12 @@ gulp.task(
         gulp.dest(GENERIC_DIR + "web")
       ),
       preprocessCSS("web/viewer.css", "generic", defines, true)
-        .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)]))
+        .pipe(
+          postcss([
+            cssvariables(CSS_VARIABLES_CONFIG),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(GENERIC_DIR + "web")),
 
       gulp
@@ -795,7 +804,12 @@ gulp.task(
       createComponentsBundle(defines).pipe(gulp.dest(COMPONENTS_DIR)),
       gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(COMPONENTS_DIR + "images")),
       preprocessCSS("web/pdf_viewer.css", "components", defines, true)
-        .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)]))
+        .pipe(
+          postcss([
+            cssvariables(CSS_VARIABLES_CONFIG),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(COMPONENTS_DIR)),
     ]);
   })
@@ -851,7 +865,12 @@ gulp.task(
         gulp.dest(MINIFIED_DIR + "web")
       ),
       preprocessCSS("web/viewer.css", "minified", defines, true)
-        .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)]))
+        .pipe(
+          postcss([
+            cssvariables(CSS_VARIABLES_CONFIG),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(MINIFIED_DIR + "web")),
 
       gulp

package.json

@@ -35,6 +35,7 @@
     "jstransformer-markdown-it": "^2.1.0",
     "merge-stream": "^1.0.1",
     "mkdirp": "^0.5.1",
+    "postcss-css-variables": "^0.14.0",
     "prettier": "^1.19.1",
     "rimraf": "^2.7.1",
     "streamqueue": "^1.1.2",

web/viewer.css

@@ -17,6 +17,8 @@
 
 :root {
   --sidebar-width: 200px;
+  --sidebar-transition-duration: 200ms;
+  --sidebar-transition-timing-function: ease;
 }
 
 * {
@@ -96,23 +98,19 @@ select {
   position: absolute;
   top: 32px;
   bottom: 0;
-  width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility
-                   with older browsers that lack support for CSS variables. */
   width: var(--sidebar-width);
   visibility: hidden;
   z-index: 100;
   border-top: 1px solid rgba(51, 51, 51, 1);
-  transition-duration: 200ms;
-  transition-timing-function: ease;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 html[dir='ltr'] #sidebarContainer {
   transition-property: left;
-  left: -200px;
   left: calc(-1 * var(--sidebar-width));
 }
 html[dir='rtl'] #sidebarContainer {
   transition-property: right;
-  right: -200px;
   right: calc(-1 * var(--sidebar-width));
 }
 
@@ -176,8 +174,8 @@ html[dir='rtl'] #sidebarContent {
   outline: none;
 }
 #viewerContainer:not(.pdfPresentationMode) {
-  transition-duration: 200ms;
-  transition-timing-function: ease;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 html[dir='ltr'] #viewerContainer {
   box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
@@ -193,12 +191,10 @@ html[dir='rtl'] #viewerContainer {
 
 html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
   transition-property: left;
-  left: 200px;
   left: var(--sidebar-width);
 }
 html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
   transition-property: right;
-  right: 200px;
   right: var(--sidebar-width);
 }