From cb61bdee347296879a3926d38930a62d3985c40e Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Tue, 4 Feb 2020 22:28:38 +0100 Subject: [PATCH 1/2] Add support for CSS variables using the `PostCSS CSS Variables` package (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 | 25 ++++++++++++++++++++++--- package-lock.json | 25 +++++++++++++++++++++++++ package.json | 1 + web/viewer.css | 16 ++++++---------- 4 files changed, 54 insertions(+), 13 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 7171d8092..76b706ec7 100644 --- a/gulpfile.js +++ b/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 diff --git a/package-lock.json b/package-lock.json index 8a80230bc..7f94a171d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10957,6 +10957,31 @@ } } }, + "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", diff --git a/package.json b/package.json index 3f0b85a9c..c53d9737c 100644 --- a/package.json +++ b/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", diff --git a/web/viewer.css b/web/viewer.css index 3d9fa9fe3..435d55123 100644 --- a/web/viewer.css +++ b/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); } From 102142537f2e8718324213b124c8538a7d83198d Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 5 Feb 2020 00:34:44 +0100 Subject: [PATCH 2/2] 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 | 4 ++++ package-lock.json | 55 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + web/viewer.css | 4 ++-- 4 files changed, 62 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 76b706ec7..2de291add 100644 --- a/gulpfile.js +++ b/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), ]) ) diff --git a/package-lock.json b/package-lock.json index 7f94a171d..164086b55 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c53d9737c..fd622e0db 100644 --- a/package.json +++ b/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", diff --git a/web/viewer.css b/web/viewer.css index 435d55123..6ff04aecd 100644 --- a/web/viewer.css +++ b/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 {