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; } ```
This commit is contained in:
Jonas Jenwald
parent
d6754d1e22
commit
cb61bdee34
25
gulpfile.js
25
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
|
||||
|
||||
25
package-lock.json
generated
25
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user