hopefully fix issue with stylesheet stuff crashing page behavior

BanchanArt · Feb 16, 2024 · e903746 · e903746
1 parent ebfba57
commit e903746
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,20 +1,19 @@
-import "./styles.js"
-import "phoenix_html"
-import { Socket, LongPoll } from "phoenix"
-import topbar from "topbar"
-import Hooks from "./_hooks"
-import { LiveSocket } from "phoenix_live_view"
-import { replaceIcons } from "./_hooks/BanchanWeb.Components.Icon.hooks"
-
-const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-const orderSeed = document.querySelector("[data-order-seed]")?.dataset.orderSeed
+import "phoenix_html";
+import { Socket, LongPoll } from "phoenix";
+import topbar from "topbar";
+import Hooks from "./_hooks";
+import { LiveSocket } from "phoenix_live_view";
+import { replaceIcons } from "./_hooks/BanchanWeb.Components.Icon.hooks";
+
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+const orderSeed = document.querySelector("[data-order-seed]")?.dataset.orderSeed;
 const liveSocket = new LiveSocket('/live', Socket, {
   params: {
     _csrf_token: csrfToken,
     order_seed: orderSeed == null ? null : parseInt(orderSeed)
   },
   hooks: Hooks
-})
+});
 
 // liveSocket.socket.onError((_error, transport, establishedConnections) => {
 //   liveSocket.socket.connect();
@@ -30,7 +29,7 @@ const liveSocket = new LiveSocket('/live', Socket, {
 // things feel faster.
 //
 // See: https://fly.io/phoenix-files/make-your-liveview-feel-faster/#solution
-topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
 
 let topBarScheduled = undefined;
 window.addEventListener("phx:page-loading-start", () => {
@@ -45,13 +44,15 @@ window.addEventListener("phx:page-loading-stop", () => {
 });
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
-
-replaceIcons();
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
+window.liveSocket = liveSocket;
+
+replaceIcons();
 
+// We do this later because problems with this shouldn't crash the entire page.
+import('./styles.js').then(() => { }, console.error);
diff --git a/assets/js/styles.js b/assets/js/styles.js
@@ -2,6 +2,11 @@ let styleText = "";
 
 for (let i = 0; i < document.styleSheets.length; i++) {
   const styleSheet = document.styleSheets[i];
+  if (new URL(styleSheet.href).hostname !== window.location.hostname) {
+    // We can't access cross-origin stylesheets, which are often injected by
+    // extensions.
+    continue;
+  }
   for (let j = 0; j < styleSheet.cssRules.length; j++) {
     const cssRule = styleSheet.cssRules[j];
     styleText += "\n"