From e59c2dc308000fa14eec456238976e5418e33f3a Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Mon, 14 Mar 2022 12:32:29 +0100
Subject: [PATCH] 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.
---
gulpfile.js | 25 +++++++++++++++++++++++++
web/viewer.js | 8 ++++++++
2 files changed, 33 insertions(+)
diff --git a/gulpfile.js b/gulpfile.js
index 149386447..492263608 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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(
"dev-sandbox",
gulp.series(
@@ -1897,6 +1915,13 @@ gulp.task(
gulp.task(
"server",
gulp.parallel(
+ function watchDevCSS() {
+ gulp.watch(
+ ["web/*.css", "web/images/*"],
+ { ignoreInitial: false },
+ gulp.series("dev-css")
+ );
+ },
function watchDevSandbox() {
gulp.watch(
[
diff --git a/web/viewer.js b/web/viewer.js
index 0f57f7f43..ffa5b8d2c 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -199,6 +199,14 @@ function getViewerConfiguration() {
function webViewerLoad() {
const config = getViewerConfiguration();
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([
import("pdfjs-web/genericcom.js"),
import("pdfjs-web/pdf_print_service.js"),