1 files changed, 42 insertions, 26 deletions

diff --git a/packages/bun-framework-next/fallback.development.tsx b/packages/bun-framework-next/fallback.development.tsx
index 460b5e165..67a6a387f 100644
--- a/packages/bun-framework-next/fallback.development.tsx
+++ b/packages/bun-framework-next/fallback.development.tsx
@@ -1,31 +1,50 @@
-import { insertStyleSheet } from "./page-loader";
 import type { FallbackMessageContainer } from "../../src/api/schema";
+import { maybeInjectApp } from "macro:./appInjector";
+
+var globalStyles = [];
+function insertGlobalStyleSheet({ detail: url }) {
+  globalStyles.push(
+    new Promise((resolve, reject) => {
+      const link: HTMLLinkElement = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = url;
+      link.onload = resolve;
+      link.onabort = reject;
+      link.onerror = reject;
+      document.head.appendChild(link);
+    })
+  );
+}
+
+const nCSS = document.createElement("noscript");
+nCSS.setAttribute("data-n-css", "");
+document.head.appendChild(nCSS);
+
+document.addEventListener("onimportcss", insertGlobalStyleSheet);
 
 var once = false;
 function insertNextHeadCount() {
   if (!once) {
     document.head.insertAdjacentHTML(
       "beforeend",
-      `<meta name="next-head-count" content="${document.head.childElementCount}">`
+      `<meta name="next-head-count" content="0">`
     );
     once = true;
   }
 }
-function insertGlobalStyleSheet(detail) {
-  pageLoader.cssQueue.push(
-    insertStyleSheet(detail).then(() => {
-      insertNextHeadCount();
-    })
-  );
-}
 
-[...globalThis["__BUN"].allImportedStyles].map((detail) =>
-  insertGlobalStyleSheet(detail)
-);
+maybeInjectApp();
+
+globalThis.__BUN_APP_STYLES = [...globalThis["__BUN"].allImportedStyles].map(
+  (style) => {
+    const url = new URL(style, location.origin);
+    if (url.origin === location.origin && url.href === style) {
+      return url.pathname;
+    }
 
-document.addEventListener("onimportcss", insertGlobalStyleSheet, {
-  passive: true,
-});
+    return style;
+  }
+);
 
 import { _boot, pageLoader } from "./client.development";
 
@@ -39,24 +58,21 @@ function renderFallback({ router }: FallbackMessageContainer) {
   }
 
   document.removeEventListener("onimportcss", insertGlobalStyleSheet);
-  document.addEventListener("onimportcss", pageLoader.onImportCSS, {
-    passive: true,
-  });
-
-  globalThis.__NEXT_DATA__.pages["/_app"] = [
-    ...(globalThis.__NEXT_DATA__.pages["/_app"] || []),
-    ...globalThis["__BUN"].allImportedStyles,
-  ];
-
+  document.addEventListener("onimportcss", pageLoader.onImportCSS);
+  var cssQueue;
   return import(route)
     .then((Namespace) => {
+      nCSS.remove();
+      document.head.appendChild(nCSS);
+      cssQueue = [...globalStyles, ...pageLoader.cssQueue];
+      pageLoader.cssQueue = [];
       insertNextHeadCount();
       return _boot(Namespace, true);
     })
     .then(() => {
-      const cssQueue = pageLoader.cssQueue.slice();
+      cssQueue = [...cssQueue, ...pageLoader.cssQueue.slice()];
       pageLoader.cssQueue = [];
-      return Promise.all([...cssQueue]);
+      return Promise.allSettled(cssQueue);
     })
     .finally(() => {
       document.body.style.visibility = "visible";