Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #11567 from Snuffleupagus/css-variables

Browse Source 
Add support for CSS variables using the `PostCSS CSS Variables` package (issue 11462)
This commit is contained in:
Tim van der Meij 2020-02-06 23:20:45 +01:00 committed by GitHub
commit a5fec297c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 116 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
gulpfile.js
View File

@ -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

80
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

20
web/viewer.css
View File

@ -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-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));
left: calc(0px - var(--sidebar-width));
}
html[dir='rtl'] #sidebarContainer {
transition-property: right;
right: -200px;
right: calc(-1 * var(--sidebar-width));
right: calc(0px - var(--sidebar-width));
}
.loadingInProgress #sidebarContainer {
@ -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);
}