@chr33s/solarflare 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chr33s/solarflare",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/client.styles.ts

@@ -1,4 +1,8 @@
-import { stylesheets, supportsConstructableStylesheets } from "./stylesheets.ts";
+import {
+  safeAdoptStylesheets,
+  stylesheets,
+  supportsConstructableStylesheets,
+} from "./stylesheets.ts";
 
 /** Style loading state for a component. */
 interface StyleState {
@@ -51,12 +55,11 @@ export function applyStyles(element: HTMLElement, sheets: CSSStyleSheet[]) {
   const shadowRoot = element.shadowRoot;
 
   if (shadowRoot) {
-    shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ...sheets];
+    safeAdoptStylesheets(shadowRoot, [...shadowRoot.adoptedStyleSheets, ...sheets]);
   } else {
-    for (const sheet of sheets) {
-      if (!document.adoptedStyleSheets.includes(sheet)) {
-        document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-      }
+    const toAdd = sheets.filter((s) => !document.adoptedStyleSheets.includes(s));
+    if (toAdd.length) {
+      safeAdoptStylesheets(document, [...document.adoptedStyleSheets, ...toAdd]);
     }
   }
 }

package/src/client.ts

@@ -3,7 +3,11 @@ import { parsePath } from "./paths.ts";
 import { hydrateStore, initHydrationCoordinator } from "./hydration.ts";
 import { installHeadHoisting, createHeadContext, setHeadContext } from "./head.ts";
 import { getRuntime } from "./runtime.ts";
-import { stylesheets, supportsConstructableStylesheets } from "./stylesheets.ts";
+import {
+  safeAdoptStylesheets,
+  stylesheets,
+  supportsConstructableStylesheets,
+} from "./stylesheets.ts";
 import { getPreloadedStylesheet } from "./server.styles.ts";
 
 export { initHmrEntry, reloadAllStylesheets } from "./hmr.ts";
@@ -51,15 +55,15 @@ export function registerInlineStyles(tag: string, styles: InlineStyleEntry[]) {
   const sheets = stylesheets.getForConsumer(tag);
   const shadowRoot = el?.shadowRoot;
   if (shadowRoot) {
-    shadowRoot.adoptedStyleSheets = [
+    safeAdoptStylesheets(shadowRoot, [
       ...shadowRoot.adoptedStyleSheets.filter((s) => !sheets.includes(s)),
       ...sheets,
-    ];
+    ]);
   } else {
-    document.adoptedStyleSheets = [
+    safeAdoptStylesheets(document, [
       ...document.adoptedStyleSheets.filter((s) => !sheets.includes(s)),
       ...sheets,
-    ];
+    ]);
   }
 }
 

package/src/stylesheets.ts

@@ -9,6 +9,29 @@ export const supportsConstructableStylesheets = () => {
   }
 };
 
+/** Recreates a stylesheet in the current document context. */
+function cloneSheet(sheet: CSSStyleSheet): CSSStyleSheet {
+  const fresh = new CSSStyleSheet();
+  fresh.replaceSync([...sheet.cssRules].map((r) => r.cssText).join(""));
+  return fresh;
+}
+
+/** Safely adopts stylesheets, recreating them if cross-document sharing fails. */
+export function safeAdoptStylesheets(
+  target: Document | ShadowRoot,
+  sheets: CSSStyleSheet[],
+): CSSStyleSheet[] {
+  try {
+    target.adoptedStyleSheets = sheets;
+    return sheets;
+  } catch {
+    // Stylesheet was created in a different document context - recreate
+    const cloned = sheets.map(cloneSheet);
+    target.adoptedStyleSheets = cloned;
+    return cloned;
+  }
+}
+
 /** Stylesheet entry with metadata. */
 interface StylesheetEntry {
   sheet: CSSStyleSheet;
@@ -143,7 +166,7 @@ class StylesheetManager {
     // Include global sheets
     const globalSheets = [...this.#sheets.values()].filter((e) => e.isGlobal).map((e) => e.sheet);
 
-    shadowRoot.adoptedStyleSheets = [...globalSheets, ...sheets];
+    safeAdoptStylesheets(shadowRoot, [...globalSheets, ...sheets]);
   }
 
   /** Removes a consumer from all its stylesheets. */
@@ -171,7 +194,7 @@ class StylesheetManager {
   #adoptToDocument(sheet: CSSStyleSheet) {
     if (!this.#documentSheets.includes(sheet)) {
       this.#documentSheets.push(sheet);
-      document.adoptedStyleSheets = [...this.#documentSheets];
+      safeAdoptStylesheets(document, [...this.#documentSheets]);
     }
   }