Refactor scss live refreshing

app/assets/javascripts/discourse/app/initializers/live-development.js

@@ -1,7 +1,6 @@
 import DiscourseURL from "discourse/lib/url";
 import Handlebars from "handlebars";
 import { isDevelopment } from "discourse-common/config/environment";
-import { refreshCSS } from "discourse/lib/theme-selector";
 
 //  Use the message bus for live reloading of components for faster development.
 export default {
@@ -51,7 +50,7 @@ export default {
     // Observe file changes
     messageBus.subscribe(
       "/file-change",
-      function (data) {
+      (data) => {
         if (Handlebars.compile && !Ember.TEMPLATES.empty) {
           // hbs notifications only happen in dev
           Ember.TEMPLATES.empty = Handlebars.compile("<div></div>");
@@ -60,20 +59,12 @@ export default {
           if (me === "refresh") {
             // Refresh if necessary
             document.location.reload(true);
-          } else {
-            $("link").each(function () {
-              if (me.hasOwnProperty("theme_id") && me.new_href) {
-                const target = $(this).data("target");
-                const themeId = $(this).data("theme-id");
-                if (
-                  target === me.target &&
-                  (!themeId || themeId === me.theme_id)
-                ) {
-                  refreshCSS(this, null, me.new_href);
-                }
-              } else if (this.href.match(me.name) && (me.hash || me.new_href)) {
-                refreshCSS(this, me.hash, me.new_href);
-              }
+          } else if (me.new_href && me.target) {
+            const link_target = me.theme_id
+              ? `[data-target="${me.target}"][data-theme-id="${me.theme_id}"]`
+              : `[data-target="${me.target}"]`;
+            document.querySelectorAll(`link${link_target}`).forEach((link) => {
+              this.refreshCSS(link, me.new_href);
             });
           }
         });
@@ -81,4 +72,23 @@ export default {
       session.mbLastFileChangeId
     );
   },
+
+  refreshCSS(node, newHref) {
+    if (node.dataset.reloading) {
+      clearTimeout(node.dataset.timeout);
+    }
+
+    node.dataset.reloading = true;
+
+    let reloaded = node.cloneNode(true);
+    reloaded.href = newHref;
+    node.insertAdjacentElement("afterend", reloaded);
+
+    let timeout = setTimeout(() => {
+      node.parentNode.removeChild(node);
+      reloaded.dataset.reloading = false;
+    }, 2000);
+
+    node.dataset.timeout = timeout;
+  },
 };

app/assets/javascripts/discourse/app/lib/theme-selector.js

@@ -44,41 +44,6 @@ export function setLocalTheme(ids, themeSeq) {
   }
 }
 
-export function refreshCSS(node, hash, newHref) {
-  let $orig = $(node);
-
-  if ($orig.data("reloading")) {
-    clearTimeout($orig.data("timeout"));
-    $orig.data("copy").remove();
-  }
-
-  if (!$orig.data("orig")) {
-    $orig.data("orig", node.href);
-  }
-
-  $orig.data("reloading", true);
-
-  const orig = $(node).data("orig");
-
-  let reloaded = $orig.clone(true);
-  if (hash) {
-    reloaded[0].href =
-      orig + (orig.indexOf("?") >= 0 ? "&hash=" : "?hash=") + hash;
-  } else {
-    reloaded[0].href = newHref;
-  }
-
-  $orig.after(reloaded);
-
-  let timeout = setTimeout(() => {
-    $orig.remove();
-    reloaded.data("reloading", false);
-  }, 2000);
-
-  $orig.data("timeout", timeout);
-  $orig.data("copy", reloaded);
-}
-
 export function listThemes(site) {
   let themes = site.get("user_themes");
 

lib/stylesheet/watcher.rb

@@ -96,11 +96,7 @@ module Stylesheet
       targets = target ? [target] : ["desktop", "mobile", "admin"]
       Stylesheet::Manager.clear_core_cache!(targets)
       message = targets.map! do |name|
-        msgs = []
-        active_themes.each do |theme_id|
-          msgs << Stylesheet::Manager.new(theme_id: theme_id).stylesheet_data(name.to_sym)
-        end
-        msgs
+        Stylesheet::Manager.new.stylesheet_data(name.to_sym)
       end.flatten!
       MessageBus.publish '/file-change', message
     end
@@ -114,11 +110,7 @@ module Stylesheet
         targets.push(plugin_name)
       end
       message = targets.map! do |name|
-        msgs = []
-        active_themes.each do |theme_id|
-          msgs << Stylesheet::Manager.new(theme_id: theme_id).stylesheet_data(name.to_sym)
-        end
-        msgs
+        Stylesheet::Manager.new.stylesheet_data(name.to_sym)
       end.flatten!
       MessageBus.publish '/file-change', message
     end
@@ -143,9 +135,5 @@ module Stylesheet
       end
     end
 
-    def active_themes
-      @active_themes ||= Theme.user_selectable.pluck(:id)
-    end
-
   end
 end