From 4ba9aa33514423b401c484219d98b441beec20d2 Mon Sep 17 00:00:00 2001
From: Alexey Elizarov <alex.elizarov1@gmail.com>
Date: Thu, 4 Jun 2026 03:07:56 +0300
Subject: [PATCH] feat: add StyleSheetManager to target another document

Adds a <StyleSheetManager target={node}> provider that routes generated
styles (styled / createGlobalStyles) into the given node's document/root
instead of the main document.head. Enables rendering into Electron child
BrowserWindows, iframes, pop-out windows, and shadow roots.

goober already routes by this.target; this threads a target through a
context into the existing css.apply({ target }) call. No behavior change
when no provider is present.

Closes #64

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/index.d.ts                  | 11 +++++++
 src/index.js                    | 27 +++++++++++++++-
 test/styleSheetManager.spec.tsx | 57 +++++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 test/styleSheetManager.spec.tsx

diff --git a/src/index.d.ts b/src/index.d.ts
index 678fd46..1984b95 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -51,6 +51,17 @@ export declare function ThemeProvider<
   }
 >(props: T): JSX.Element;
 export declare function useTheme(): DefaultTheme;
+export interface StyleSheetManagerProps {
+  /**
+   * DOM node whose root (`document.head` or a shadow root) generated styles are
+   * injected into. Use to render into another document — an Electron child
+   * `BrowserWindow`, an iframe, a pop-out `window.open`, or a shadow root.
+   * Omit to use the main `document.head` (default).
+   */
+  target?: Node;
+  children?: any;
+}
+export declare function StyleSheetManager(props: StyleSheetManagerProps): JSX.Element;
 export interface ThemeProp {
   theme?: DefaultTheme;
 }
diff --git a/src/index.js b/src/index.js
index 346ed9a..027ef15 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,11 +33,36 @@ export function useTheme() {
   return useContext(ThemeContext);
 }
 
+// Carries the DOM node whose root (`document.head` or a shadow root) goober
+// should inject generated rules into. `undefined` = goober's default
+// (the main `document.head`). Set via `<StyleSheetManager target={node}>`.
+const StyleTargetContext = createContext();
+
+// Mirrors styled-components' `<StyleSheetManager target>`: every `styled`
+// component / `createGlobalStyles` rendered inside this provider injects its
+// `<style>` into `props.target` instead of the main document head. Required for
+// rendering into another document — an Electron child `BrowserWindow`, an
+// iframe, a pop-out `window.open`, or a shadow root — where the main-document
+// sheet is not visible. goober already routes by `this.target`; this exposes it.
+export function StyleSheetManager(props) {
+  return createComponent(StyleTargetContext.Provider, {
+    get value() {
+      return props.target;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+
 function makeStyled(tag) {
   let _ctx = this || {};
   return (...args) => {
     const Styled = props => {
       const theme = useContext(ThemeContext);
+      // Context target wins over a bound `_ctx.target`; falls back to goober's
+      // default head when neither is set (no behavior change without a provider).
+      const sheetTarget = useContext(StyleTargetContext) ?? _ctx.target;
       const withTheme = mergeProps(props, { theme });
       const clone = mergeProps(withTheme, {
         get class() {
@@ -45,7 +70,7 @@ function makeStyled(tag) {
             append = "class" in withTheme && /^go[0-9]+/.test(pClass);
           // Call `css` with the append flag and pass the props
           let className = css.apply(
-            { target: _ctx.target, o: append, p: withTheme, g: _ctx.g },
+            { target: sheetTarget, o: append, p: withTheme, g: _ctx.g },
             args
           );
           return [pClass, className].filter(Boolean).join(" ");
diff --git a/test/styleSheetManager.spec.tsx b/test/styleSheetManager.spec.tsx
new file mode 100644
index 0000000..672d4b6
--- /dev/null
+++ b/test/styleSheetManager.spec.tsx
@@ -0,0 +1,57 @@
+/* @jsxImportSource solid-js */
+import { createComponent } from "solid-js";
+import { renderToString } from "solid-js/web";
+import { styled, createGlobalStyles, extractCss, StyleSheetManager } from "../src/index";
+
+function headCss(doc: Document): string {
+  return Array.from(doc.head.querySelectorAll("style"))
+    .map(s => s.textContent || "")
+    .join("");
+}
+
+describe("StyleSheetManager", () => {
+  test("injects styled rules into the target's document, not the main head", () => {
+    const Box = styled.div`color: rgb(1, 2, 3);`;
+    // Stand-in for an Electron child BrowserWindow / iframe document.
+    const otherDoc = document.implementation.createHTMLDocument("child");
+
+    renderToString(() =>
+      createComponent(StyleSheetManager, {
+        target: otherDoc.head,
+        get children() {
+          return createComponent(Box as any, { children: "hi" });
+        }
+      })
+    );
+
+    expect(headCss(otherDoc)).toContain("rgb(1, 2, 3)");
+    expect(headCss(document)).not.toContain("rgb(1, 2, 3)");
+  });
+
+  test("createGlobalStyles honors the target document", () => {
+    const Globals = createGlobalStyles`
+      .ssm-global { color: rgb(7, 8, 9); }
+    `;
+    const otherDoc = document.implementation.createHTMLDocument("child");
+
+    renderToString(() =>
+      createComponent(StyleSheetManager, {
+        target: otherDoc.head,
+        get children() {
+          return createComponent(Globals as any, {});
+        }
+      })
+    );
+
+    expect(headCss(otherDoc)).toContain("rgb(7, 8, 9)");
+  });
+
+  test("falls back to the default sheet without a provider", () => {
+    const Box = styled.div`color: rgb(4, 5, 6);`;
+
+    renderToString(() => createComponent(Box as any, { children: "hi" }));
+
+    // No target → goober's default sheet (extractCss / main document head).
+    expect(extractCss()).toContain("rgb(4, 5, 6)");
+  });
+});