Stop polyfilling the CSS calc functionality

At this point in time, all browsers that we support have native support for CSS variables; please see https://developer.mozilla.org/en-US/docs/Web/CSS/calc()#browser_compatibility and https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support

We can also remove the hack introduced back in PR 11567, which was only necessary to work-around an IE 11 specific bug.

gulpfile.js

@@ -17,7 +17,6 @@
 "use strict";
 
 const autoprefixer = require("autoprefixer");
-const postcssCalc = require("postcss-calc");
 const postcssDirPseudoClass = require("postcss-dir-pseudo-class");
 const postcssLogical = require("postcss-logical");
 const fs = require("fs");
@@ -853,7 +852,6 @@ function buildGeneric(defines, dir) {
     preprocessCSS("web/viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
@@ -936,7 +934,6 @@ function buildComponents(defines, dir) {
     preprocessCSS("web/pdf_viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
@@ -1033,7 +1030,6 @@ function buildMinified(defines, dir) {
     preprocessCSS("web/viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),

package-lock.json

@@ -47,7 +47,6 @@
         "mkdirp": "^1.0.4",
         "needle": "^3.0.0",
         "postcss": "^8.4.7",
-        "postcss-calc": "^8.2.4",
         "postcss-dir-pseudo-class": "^6.0.4",
         "postcss-logical": "^5.0.4",
         "prettier": "^2.5.1",
@@ -14969,19 +14968,6 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
-    "node_modules/postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.2"
-      }
-    },
     "node_modules/postcss-dir-pseudo-class": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
@@ -30241,16 +30227,6 @@
         "source-map-js": "^1.0.2"
       }
     },
-    "postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
     "postcss-dir-pseudo-class": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",

package.json

@@ -40,7 +40,6 @@
     "mkdirp": "^1.0.4",
     "needle": "^3.0.0",
     "postcss": "^8.4.7",
-    "postcss-calc": "^8.2.4",
     "postcss-dir-pseudo-class": "^6.0.4",
     "postcss-logical": "^5.0.4",
     "prettier": "^2.5.1",

web/viewer.css

@@ -244,12 +244,12 @@ select {
 }
 html[dir="ltr"] #sidebarContainer {
   transition-property: left;
-  left: calc(0px - var(--sidebar-width));
+  left: calc(-1 * var(--sidebar-width));
   border-right: var(--doorhanger-border-color-whcm);
 }
 html[dir="rtl"] #sidebarContainer {
   transition-property: right;
-  right: calc(0px - var(--sidebar-width));
+  right: calc(-1 * var(--sidebar-width));
   border-left: var(--doorhanger-border-color-whcm);
 }