Merge pull request #24 from DominickVale/fix-inline-styles

Add support for reloading <style> tags (inline styles)

src/Core.d.ts

@@ -169,9 +169,9 @@ export default class Core {
     /**
      * Load up styles from the target page if needed
      *
-     * @param {HTMLLinkElement[]} cachedStyles
+   * @param {Array<HTMLLinkElement|HTMLStyleElement>} cachedStyles
      */
-    loadStyles(cachedStyles: HTMLLinkElement[]): void;
+    loadStyles(cachedStyles: Array<HTMLLinkElement | HTMLStyleElement>): void;
     /**
      * @private
      * @param {string} links

src/Core.js

@@ -1,5 +1,5 @@
 import E from '@unseenco/e'
-import { appendScript, parseDom, processUrl, reloadScript } from './helpers'
+import { appendScript, parseDom, processUrl, reloadScript, reloadInlineStyle, appendInlineStyle } from './helpers'
 import Transition from './Transition'
 import Renderer from './Renderer'
 import RouteStore from './RouteStore'
@@ -357,16 +357,36 @@ export default class Core {
 	/**
 	 * Load up styles from the target page if needed
 	 *
-	 * @param {HTMLLinkElement[]} cachedStyles
+   * @param {Array<HTMLLinkElement|HTMLStyleElement>} cachedStyles
 	 */
 	loadStyles(cachedStyles) {
 		const currentStyles = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).filter(this.reloadCssFilter)
+		const currentInlineStyles = Array.from(document.querySelectorAll('style')).filter(this.reloadCssFilter)
 
-		cachedStyles.forEach(el => {
-			if (el.href && !currentStyles.find((link) => link.href === el.href)) {
+		const newInlineStyles = cachedStyles.filter(el => {
+      // no el.href, assume it's an inline style
+      if(!el.href){
+        return true
+      } else if(!currentStyles.find((link) => link.href === el.href)) {
 				document.body.append(el)
-			}
+        return false
+			} 
 		})
+
+    // loop through all new inline styles
+    for (let i = 0; i < currentInlineStyles.length; i++) {
+      for (let n = 0; n < newInlineStyles.length; n++) {
+        if (currentInlineStyles[i].outerHTML === newInlineStyles[n].outerHTML) {
+          reloadInlineStyle(currentInlineStyles[i])
+          newInlineStyles.splice(n, 1)
+          break
+        }
+      }
+    }
+
+    for (const style of newInlineStyles) {
+      appendInlineStyle(style)
+    }
 	}
 
 	/**
@@ -544,7 +564,7 @@ export default class Core {
 			finalUrl: url,
 			skipCache: content.hasAttribute('data-taxi-nocache'),
 			scripts: this.reloadJsFilter ? Array.from(page.querySelectorAll('script')).filter(this.reloadJsFilter) : [],
-			styles: this.reloadCssFilter ? Array.from(page.querySelectorAll('link[rel="stylesheet"]')).filter(this.reloadCssFilter) : [],
+			styles: this.reloadCssFilter ? Array.from(page.querySelectorAll('link[rel="stylesheet"], style')).filter(this.reloadCssFilter) : [],
 			title: page.title,
 			renderer: new Renderer({
 				wrapper: this.wrapper,

src/helpers.d.ts

@@ -21,14 +21,30 @@ export function processUrl(url: string): {
  * @param {HTMLElement|HTMLScriptElement} node
  */
 export function reloadScript(node: HTMLElement | HTMLScriptElement): void;
+/**
+ * Reloads a provided inline-stylesheet by replacing with itself.
+ * @param {HTMLStyleElement} node
+ */
+export function reloadInlineStyle(node: HTMLStyleElement): void;
 /**
  * Loads a provided script/stylesheet by appending a clone to the current document.
  * @param {HTMLElement} node
  */
 export function appendScript(node: HTMLElement): void;
+/**
+ * Loads a provided inline-stylesheet by appending a clone to the current document.
+ * @param {HTMLStyleElement} node
+ */
+export function appendInlineStyle(node: HTMLStyleElement): void;
 /**
  * Creates a clone of a given HTMLElement
  * @param {HTMLElement} node
  * @return {HTMLElement}
  */
 export function duplicateScript(node: HTMLElement): HTMLElement;
+/**
+ * Creates a clone of a given HTMLStyleElement
+ * @param {HTMLStyleElement} node
+ * @return {HTMLStyleElement}
+ */
+export function duplicateInlineStyle(node: HTMLStyleElement): HTMLStyleElement;

src/helpers.js

@@ -39,6 +39,14 @@ export function reloadScript(node) {
 	node.parentNode.replaceChild(duplicateScript(node), node)
 }
 
+/**
+ * Reloads a provided inline-stylesheet by replacing with itself.
+ * @param {HTMLStyleElement} node
+ */
+export function reloadInlineStyle(node) {
+	node.parentNode.replaceChild(duplicateInlineStyle(node), node)
+}
+
 /**
  * Loads a provided script/stylesheet by appending a clone to the current document.
  * @param {HTMLElement} node
@@ -51,6 +59,18 @@ export function appendScript(node) {
 	}
 }
 
+/**
+ * Loads a provided inline-stylesheet by appending a clone to the current document.
+ * @param {HTMLStyleElement} node
+ */
+export function appendInlineStyle(node) {
+	if (node.parentNode.tagName === 'HEAD') {
+		document.head.appendChild(duplicateInlineStyle(node))
+	} else {
+		document.body.appendChild(duplicateInlineStyle(node))
+	}
+}
+
 /**
  * Creates a clone of a given HTMLElement
  * @param {HTMLElement} node
@@ -75,3 +95,28 @@ export function duplicateScript(node) {
 
 	return replacement
 }
+
+/**
+ * Creates a clone of a given HTMLStyleElement
+ * @param {HTMLStyleElement} node
+ * @return {HTMLStyleElement}
+ */
+export function duplicateInlineStyle(node) {
+	const replacement = document.createElement('STYLE')
+
+	// Loop Over Attributes
+	for (let k = 0; k < node.attributes.length; k++) {
+		// Get Attribute
+		const attr = node.attributes[k]
+
+		// Set Attribute
+		replacement.setAttribute(attr.nodeName, attr.nodeValue)
+	}
+
+	// Inline Script
+	if (node.innerHTML) {
+		replacement.innerHTML = node.innerHTML
+	}
+
+	return replacement
+}