Merge pull request #11567 from Snuffleupagus/css-variables

Add support for CSS variables using the `PostCSS CSS Variables` package (issue 11462)

gulpfile.js

@@ -19,6 +19,8 @@
 "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");
 var gulp = require("gulp");
@@ -82,6 +84,9 @@ var AUTOPREFIXER_CONFIG = {
     "not dead",
   ],
 };
+var CSS_VARIABLES_CONFIG = {
+  preserve: true,
+};
 
 var DEFINES = {
   PRODUCTION: true,
@@ -765,7 +770,13 @@ 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),
+            calc(),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(GENERIC_DIR + "web")),
 
       gulp
@@ -795,7 +806,13 @@ 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),
+            calc(),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(COMPONENTS_DIR)),
     ]);
   })
@@ -851,7 +868,13 @@ 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),
+            calc(),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(MINIFIED_DIR + "web")),
 
       gulp

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,51 @@
         }
       }
     },
+    "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",
+      "integrity": "sha512-fEdksFdcvn/vvTddy4KoPDojZt9hQZx3oXHAIgoYJHsnk97ZTP08unM2UAqksiqdytv93415kBwP+c3/jcopyg==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        }
+      }
+    },
     "postcss-load-config": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
@@ -10967,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",
@@ -12756,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,8 @@
     "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",
     "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,24 +98,20 @@ 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-duration: var(--sidebar-transition-duration);
-  transition-timing-function: ease;
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 html[dir='ltr'] #sidebarContainer {
   transition-property: left;
-  left: -200px;
+  left: calc(0px - var(--sidebar-width));
-  left: calc(-1 * var(--sidebar-width));
 }
 html[dir='rtl'] #sidebarContainer {
   transition-property: right;
-  right: -200px;
+  right: calc(0px - var(--sidebar-width));
-  right: calc(-1 * var(--sidebar-width));
 }
 
 .loadingInProgress #sidebarContainer {
@@ -176,8 +174,8 @@ html[dir='rtl'] #sidebarContent {
   outline: none;
 }
 #viewerContainer:not(.pdfPresentationMode) {
-  transition-duration: 200ms;
+  transition-duration: var(--sidebar-transition-duration);
-  transition-timing-function: ease;
+  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);
 }