bookish-press 0.5.22 → 0.5.24

package/dist/components/page/Edition.svelte

@@ -29,6 +29,8 @@ $: {
     // Set the theme, whatever it is, and change it when the edition changes
     setTheme(edition.getTheme() ?? BookishTheme);
 }
+// The CSS to set on the edition.
+let themeCSS;
 // Set the theme on mount.
 onMount(() => {
     setTheme(edition.getTheme() ?? BookishTheme);
@@ -36,74 +38,25 @@ onMount(() => {
 // Redirect old hash routes by simply replacing their hash before routing.
 if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
     goto(location.hash.replace('#', ''));
-/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme.*/
+/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme. */
 function setTheme(theme) {
-    // Allow for prerendering; rely on mount callback to set the theme.
-    if (typeof document === 'undefined')
-        return;
-    // If the theme is being unset, make sure we've removed any overrding style declaration.
-    // This let's the default theme kick in.
-    let themeTagImports = document.getElementById('bookish-theme-imports');
-    let themeTagCSS = document.getElementById('bookish-theme');
-    // We only want to set it if it's actually different than what's currently set.
-    // Otherwise during editing we get lots of jittery changes on each edit, because the
-    // whole edition is rerendering. To check this, we set a data attribute on the style tag containing
-    // a stringify of the theme set. We do this separately for the imports, since they can have more
-    // major changes than the spacing and color sizes, changing fonts especially.
-    const themeTagCSSValue = themeTagCSS?.dataset.css;
-    const themeTagImportsValue = themeTagImports?.dataset.imports;
-    const newThemeTagCSSValue = JSON.stringify(theme);
-    const newThemeTagImportsValue = JSON.stringify(theme?.imports);
-    if (theme !== null) {
-        // If the imports changed, update theme.
-        if (themeTagImportsValue !== newThemeTagImportsValue) {
-            // If it's being set, create a new style tag.
-            const newThemeImportsTag = document.createElement('style');
-            // Give it an ID so we can remove it later.
-            newThemeImportsTag.setAttribute('id', 'bookish-theme-imports');
-            newThemeImportsTag.dataset.imports = newThemeTagImportsValue;
-            // Insert any import statements, then any rules.
-            const css = `${(theme.imports ?? [])
-                .map((url) => `@import url(${url});`)
-                .join('\n')}`;
-            newThemeImportsTag.appendChild(document.createTextNode(css));
-            document.head.appendChild(newThemeImportsTag);
-            // Remove the old tag
-            themeTagImports?.remove();
-        }
-        // If the rules changed, update them.
-        if (themeTagCSSValue !== newThemeTagCSSValue) {
-            // If it's being set, create a new style tag.
-            const newThemeCSSTag = document.createElement('style');
-            // Give it an ID so we can remove it later.
-            newThemeCSSTag.setAttribute('id', 'bookish-theme');
-            newThemeCSSTag.dataset.css = newThemeTagCSSValue;
-            // Insert any import statements, then any rules.
-            const css = `
-                    ${(theme.imports ?? [])
-                .map((url) => `@import url(${url});`)
-                .join('\n')}
-                    .bookish {
-                        ${theme.light ? toRules(theme.light) : ''}
-                        ${theme.fonts ? toRules(theme.fonts) : ''}
-                        ${theme.sizes ? toRules(theme.sizes) : ''}
-                        ${theme.weights ? toRules(theme.weights) : ''}
-                        ${theme.spacing ? toRules(theme.spacing) : ''}
-                    }
-                    .dark {
-                        ${theme.dark ? toRules(theme.dark) : ''}
-                    }`;
-            newThemeCSSTag.appendChild(document.createTextNode(css));
-            document.head.appendChild(newThemeCSSTag);
-            // Remove the old tag
-            themeTagCSS?.remove();
-        }
-    }
-    else {
-        // Remove the old tags, unsetting the theme.
-        themeTagImports?.remove();
-        themeTagCSS?.remove();
-    }
+    if (theme === null)
+        theme = BookishTheme;
+    themeCSS = `
+            ${(theme.imports ?? [])
+        .map((url) => `@import url(${url});`)
+        .join('\n')}
+            .bookish {
+                ${theme.light ? toRules(theme.light) : ''}
+                ${theme.fonts ? toRules(theme.fonts) : ''}
+                ${theme.sizes ? toRules(theme.sizes) : ''}
+                ${theme.weights ? toRules(theme.weights) : ''}
+                ${theme.spacing ? toRules(theme.spacing) : ''}
+            }
+            .dark {
+                ${theme.dark ? toRules(theme.dark) : ''}
+            }
+        `;
 }
 function toRules(set) {
     return Object.keys(set)
@@ -124,7 +77,12 @@ function toRules(set) {
 }
 </script>
 
-<main class="bookish {$darkMode ? ' dark' : ''}">
+<!-- Keep the imports up to date -->
+<svelte:head>
+    {@html '<' + `style>${themeCSS}</style>`}
+</svelte:head>
+
+<main class="bookish {$darkMode ? ' dark' : ''}" style={themeCSS}>
     <slot />
 </main>
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "bookish-press",
     "private": false,
-    "version": "0.5.22",
+    "version": "0.5.24",
     "type": "module",
     "description": "A platform for reading and writing readable, accessible, beautiful online books.",
     "license": "MIT",