Build the web/viewer.css file used in the development viewer (i.e. gulp server)

To allow using modern CSS features that currently only Mozilla Firefox supports[1], while still enabling development/testing in recent Google Chrome versions, we'll have to start building the `web/viewer.css` file with `gulp server` as well.

In my testing, building the development CSS (and copying the images) takes *less than* `200 ms` on average which is hopefully an acceptable overhead for this sort of feature.

---
[1] In particular `float`, with `inline-start`/`inline-end` values.
This commit is contained in:
Jonas Jenwald 2022-03-14 12:32:29 +01:00
parent 90c5e9882b
commit e59c2dc308
2 changed files with 33 additions and 0 deletions

View File

@ -1869,6 +1869,24 @@ gulp.task(
) )
); );
gulp.task("dev-css", function createDevCSS() {
console.log();
console.log("### Building development CSS");
const defines = builder.merge(DEFINES, { GENERIC: true, TESTING: true });
const cssDir = BUILD_DIR + "dev-css/";
return merge([
gulp.src("web/images/*", { base: "web/" }).pipe(gulp.dest(cssDir)),
preprocessCSS("web/viewer.css", "generic", defines)
.pipe(
postcss([autoprefixer({ overrideBrowserslist: ["last 2 versions"] })])
)
.pipe(gulp.dest(cssDir)),
]);
});
gulp.task( gulp.task(
"dev-sandbox", "dev-sandbox",
gulp.series( gulp.series(
@ -1897,6 +1915,13 @@ gulp.task(
gulp.task( gulp.task(
"server", "server",
gulp.parallel( gulp.parallel(
function watchDevCSS() {
gulp.watch(
["web/*.css", "web/images/*"],
{ ignoreInitial: false },
gulp.series("dev-css")
);
},
function watchDevSandbox() { function watchDevSandbox() {
gulp.watch( gulp.watch(
[ [

View File

@ -199,6 +199,14 @@ function getViewerConfiguration() {
function webViewerLoad() { function webViewerLoad() {
const config = getViewerConfiguration(); const config = getViewerConfiguration();
if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) { if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) {
if (window.chrome) {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "../build/dev-css/viewer.css";
document.head.appendChild(link);
}
Promise.all([ Promise.all([
import("pdfjs-web/genericcom.js"), import("pdfjs-web/genericcom.js"),
import("pdfjs-web/pdf_print_service.js"), import("pdfjs-web/pdf_print_service.js"),