the CSS reload strategy supports @import directives

Author: cblavier

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()
 };
@@ -52,7 +94,7 @@ class LiveReloader {
     this.socket = socket
     this.logsEnabled = false
     this.enabledOnce = false
-    this.editorURL = null
+    this.editorUrl = null
   }
   enable(){
     this.socket.onOpen(() => {
@@ -72,7 +114,7 @@ class LiveReloader {
     })
     this.channel.on("log", ({msg, level}) => this.logsEnabled && this.log(level, msg))
     this.channel.join().receive("ok", ({editor_url}) => {
-      this.editorURL = editor_url
+      this.editorUrl = editor_url
     })
     this.socket.connect()
   }
@@ -86,7 +128,7 @@ class LiveReloader {
   disableServerLogs(){ this.logsEnabled = false }
 
   openEditorAtCaller(targetNode){
-    if(!this.editorURL){
+    if(!this.editorUrl){
       return console.error("phoenix_live_reload cannot openEditorAtCaller without configured PLUG_EDITOR")
     }
 
@@ -97,7 +139,7 @@ class LiveReloader {
   }
 
   openEditorAtDef(targetNode){
-    if(!this.editorURL){
+    if(!this.editorUrl){
       return console.error("phoenix_live_reload cannot openEditorAtDef without configured PLUG_EDITOR")
     }
 
@@ -114,7 +156,7 @@ class LiveReloader {
     this.channel.push("full_path", {rel_path: file, app: app})
       .receive("ok", ({full_path}) => {
         console.log("full path", full_path)
-        let url = this.editorURL
+        let url = this.editorUrl
           .replace("__RELATIVEFILE__", file)  
           .replace("__FILE__", full_path)
           .replace("__LINE__", line)