Update the left/right CSS calculation for the sidebarContainer HTML element to enable IE11 compatibility

As gross as this hack is, it nonetheless seem necessary to allow using CSS variables; see also https://github.com/mozilla/pdf.js/pull/11567#issuecomment-582166160

gulpfile.js

@@ -19,6 +19,7 @@
 "use strict";
 
 var autoprefixer = require("autoprefixer");
+var calc = require("postcss-calc");
 var cssvariables = require("postcss-css-variables");
 var fancylog = require("fancy-log");
 var fs = require("fs");
@@ -772,6 +773,7 @@ gulp.task(
         .pipe(
           postcss([
             cssvariables(CSS_VARIABLES_CONFIG),
+            calc(),
             autoprefixer(AUTOPREFIXER_CONFIG),
           ])
         )
@@ -807,6 +809,7 @@ gulp.task(
         .pipe(
           postcss([
             cssvariables(CSS_VARIABLES_CONFIG),
+            calc(),
             autoprefixer(AUTOPREFIXER_CONFIG),
           ])
         )
@@ -868,6 +871,7 @@ gulp.task(
         .pipe(
           postcss([
             cssvariables(CSS_VARIABLES_CONFIG),
+            calc(),
             autoprefixer(AUTOPREFIXER_CONFIG),
           ])
         )

package-lock.json

@@ -2771,6 +2771,18 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
+      "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+      "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+      "dev": true
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5356,6 +5368,12 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -10957,6 +10975,26 @@
         }
       }
     },
+    "postcss-calc": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
+      "integrity": "sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss": "^7.0.5",
+        "postcss-selector-parser": "^5.0.0-rc.4",
+        "postcss-value-parser": "^3.3.1"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "postcss-css-variables": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz",
@@ -10992,6 +11030,17 @@
         "import-cwd": "^2.0.0"
       }
     },
+    "postcss-selector-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+      "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^2.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
     "postcss-value-parser": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
@@ -12781,6 +12830,12 @@
         "set-value": "^2.0.1"
       }
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
     "unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",

package.json

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

web/viewer.css

@@ -107,11 +107,11 @@ select {
 }
 html[dir='ltr'] #sidebarContainer {
   transition-property: left;
-  left: calc(-1 * var(--sidebar-width));
+  left: calc(0px - var(--sidebar-width));
 }
 html[dir='rtl'] #sidebarContainer {
   transition-property: right;
-  right: calc(-1 * var(--sidebar-width));
+  right: calc(0px - var(--sidebar-width));
 }
 
 .loadingInProgress #sidebarContainer {