feat: add StyleSheetManager to inject styles into another document (Electron child windows, iframes, shadow DOM)

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;
 }

src/index.js

@@ -33,19 +33,44 @@ 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() {
           const pClass = withTheme.class,
             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(" ");

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)");
+  });
+});