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

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

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

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

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

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

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

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