From 37ccb74238d82fd740f1b33e72121f5d2b52e677 Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Sat, 22 Oct 2022 21:50:47 +0000
Subject: [PATCH] Replace viewport units in CSS

In theory it could do something much more complicated. But it seems
better to just say "vh and vw are not supported", and this would just
be failing more gracefully.

I mean, the spec itself says,

> Keep in mind that some Reading Systems will not support all desired
> features of CSS. In particular, the following are known to be
> problematic [...] Pagination is sometimes done using columns, which
> can result in incorrect values for viewport sizes.

Fixes #1
---
 epub.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/epub.js b/epub.js
index 1d0867d..f427ba1 100644
--- a/epub.js
+++ b/epub.js
@@ -530,7 +530,12 @@ class Loader {
             /@import\s*["']([^"'\n]*?)["']/gi,
             (_, url) => this.loadHref(url, href, parents)
                 .then(url => `@import "${url}"`))
-        return replacedImports.replaceAll('-epub-', '')
+        const w = window?.innerWidth ?? 800
+        const h = window?.innerHeight ?? 600
+        const replacedVwVh = replacedImports
+            .replace(/(\d*\.?\d+)vw/g, (_, d) => parseFloat(d) * w / 100 + 'px')
+            .replace(/(\d*\.?\d+)vh/g, (_, d) => parseFloat(d) * h / 100 + 'px')
+        return replacedVwVh.replaceAll('-epub-', '')
     }
     // find & replace all possible relative paths for all assets without parsing
     replaceString(str, href, parents = []) {