diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js index 90856f2c01..9b6d5973bb 100644 --- a/fastn-js/js/dom.js +++ b/fastn-js/js/dom.js @@ -1,5 +1,7 @@ let fastn_dom = {}; +fastn_dom.styleClasses = ""; + fastn_dom.codeData = { availableThemes: {}, addedCssFile: [] @@ -937,14 +939,7 @@ class Node2 { if (!!className) { if (!fastn_dom.classes[cssClass]) { fastn_dom.classes[cssClass] = fastn_dom.classes[cssClass] || obj; - let styles = document.getElementById('styles'); - let newClasses = getClassAsString(cssClass, obj); - let textNode = document.createTextNode(newClasses); - if (styles.styleSheet) { - styles.styleSheet.cssText = newClasses; - } else { - styles.appendChild(textNode); - } + fastn_utils.createStyle(cssClass, obj); } return cls; } @@ -958,14 +953,7 @@ class Node2 { if (createClass) { if (!fastn_dom.classes[cssClass]) { fastn_dom.classes[cssClass] = fastn_dom.classes[cssClass] || obj; - let styles = document.getElementById('styles'); - let newClasses = getClassAsString(cssClass, obj); - let textNode = document.createTextNode(newClasses); - if (styles.styleSheet) { - styles.styleSheet.cssText = newClasses; - } else { - styles.appendChild(textNode); - } + fastn_utils.createStyle(cssClass, obj); } this.#node.style.removeProperty(property); this.#node.classList.add(cls); diff --git a/fastn-js/js/utils.js b/fastn-js/js/utils.js index 36e1912d39..b32e64ee65 100644 --- a/fastn-js/js/utils.js +++ b/fastn-js/js/utils.js @@ -45,6 +45,20 @@ let fastn_utils = { } return [node, css, attributes]; }, + createStyle(cssClass, obj) { + if (rerender) { + fastn_dom.styleClasses = `${fastn_dom.styleClasses}${getClassAsString(cssClass, obj)}\n`; + } else { + let styles = document.getElementById('styles'); + let newClasses = getClassAsString(cssClass, obj); + let textNode = document.createTextNode(newClasses); + if (styles.styleSheet) { + styles.styleSheet.cssText = newClasses; + } else { + styles.appendChild(textNode); + } + } + }, getStaticValue(obj) { if (obj instanceof fastn.mutableClass) { return this.getStaticValue(obj.get()); diff --git a/fastn-js/js/virtual.js b/fastn-js/js/virtual.js index 8ee1b9d65e..167cd35ea4 100644 --- a/fastn-js/js/virtual.js +++ b/fastn-js/js/virtual.js @@ -3,6 +3,7 @@ let fastn_virtual = {} let id_counter = 0; let hydrating = false; let ssr = false; +let rerender = false; class ClassList { #classes = []; @@ -152,6 +153,7 @@ fastn_virtual.hydrate = function(main) { let current_device = ftd.get_device(); let found_device = ftd.device.get(); if (current_device !== found_device) { + rerender = true ftd.device = fastn.mutable(current_device); let styles = document.getElementById("styles"); styles.innerText = ""; @@ -165,6 +167,8 @@ fastn_virtual.hydrate = function(main) { } main(document.body); + rerender = false; + styles.innerHTML = fastn_dom.styleClasses; return; } hydrating = true;