diff --git a/priv/static/phoenix_live_reload.js b/priv/static/phoenix_live_reload.js index b999a76..80aa553 100644 --- a/priv/static/phoenix_live_reload.js +++ b/priv/static/phoenix_live_reload.js @@ -1,6 +1,11 @@ -let buildFreshUrl = (link) => { +let getFreshUrl = (url) => { let date = Math.round(Date.now() / 1000).toString() - let url = link.href.replace(/(\&|\\?)vsn=\d*/, "") + let cleanUrl = url.replace(/(&|\?)vsn=\d*/, "") + let freshUrl = cleanUrl + (cleanUrl.indexOf("?") >= 0 ? "&" : "?") + "vsn=" + date + return freshUrl; +} + +let buildFreshLinkUrl = (link) => { let newLink = document.createElement('link') let onComplete = () => { if(link.parentNode !== null){ @@ -11,16 +16,45 @@ let buildFreshUrl = (link) => { newLink.onerror = onComplete newLink.onload = onComplete link.setAttribute("data-pending-removal", "") - newLink.setAttribute("rel", "stylesheet"); - newLink.setAttribute("type", "text/css"); - newLink.setAttribute("href", url + (url.indexOf("?") >= 0 ? "&" : "?") + "vsn=" + date) + newLink.setAttribute("rel", "stylesheet") + newLink.setAttribute("type", "text/css") + newLink.setAttribute("href", getFreshUrl(link.href)) link.parentNode.insertBefore(newLink, link.nextSibling) return newLink } +let buildFreshImportUrl = (style) => { + let newStyle = document.createElement('style') + let onComplete = () => { + if (style.parentNode !== null) { + style.parentNode.removeChild(style) + } + } + + let originalCSS = style.textContent || style.innerHTML + let freshCSS = originalCSS.replace(/@import\s+(?:url\()?['"]?([^'"\)]+)['"]?\)?/g, (match, url) => { + const freshUrl = getFreshUrl(url); + + if (match.includes('url(')) { + return `@import url("${freshUrl}")` + } else { + return `@import "${freshUrl}"` + } + }) + + newStyle.onerror = onComplete + newStyle.onload = onComplete + style.setAttribute("data-pending-removal", "") + newStyle.setAttribute("type", "text/css") + newStyle.textContent = freshCSS + + style.parentNode.insertBefore(newStyle, style.nextSibling) + return newStyle +} + let repaint = () => { let browser = navigator.userAgent.toLowerCase() - if(browser.indexOf("chrome") > -1){ + if (browser.indexOf("chrome") > -1) { setTimeout(() => document.body.offsetHeight, 25) } } @@ -32,7 +66,15 @@ let cssStrategy = () => { Array.from(reloadableLinkElements) .filter(link => link.href) - .forEach(link => buildFreshUrl(link)) + .forEach(link => buildFreshLinkUrl(link)) + + let reloadablestyles = window.parent.document.querySelectorAll( + "style:not([data-no-reload]):not([data-pending-removal])" + ) + + Array.from(reloadablestyles) + .filter(style => style.textContent.includes("@import")) + .forEach(style => buildFreshImportUrl(style)) repaint() };