CSS reload strategy that reloads any style tag with @import directives

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()
 };