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

[beautyfree]

Closes#64.

What

Adds a StyleSheetManager component that mirrors styled-components' <StyleSheetManager target>: every styled component / createGlobalStyles rendered inside it injects its <style> into the provided node's document/root instead of the main document.head.

import{StyleSheetManager}from"solid-styled-components";// e.g. an Electron child BrowserWindow opened with window.open<Portalmount={childWin.document.body}><StyleSheetManagertarget={childWin.document.head}><App/></StyleSheetManager></Portal>

This unblocks rendering into another document — Electron child BrowserWindows, iframes, pop-out window.open windows, and shadow roots — where the opener document's sheet is not visible, so styled components currently render unstyled there.

How

The internals already thread a target into goober:

css.apply({target: _ctx.target,o: append,p: withTheme,g: _ctx.g},args);

…but styled is a Proxy over makeStyled called with no this, so _ctx.target is always undefined and there is no public way to set it. This PR adds a context carrying the target, read inside Styled (alongside the existing ThemeContext read) and passed to the same css.apply({ target }). goober routes the sheet to that node's root.

• Context target takes precedence over a bound _ctx.target, falling back to goober's default head.
• No behavior change when no StyleSheetManager is present (target stays undefined).
• Works for both styled and createGlobalStyles (the latter renders through the same makeStyled path).

Scope / follow-up

keyframes and glob are typically called at module scope (outside any component), so they have no context to read and still target the default sheet. Targeting those would need a separate API; left out of this PR to keep it focused on the component-tree case StyleSheetManager covers.

Tests

test/styleSheetManager.spec.tsx (3 cases): styled rules land in the target document and not the main head; createGlobalStyles honors the target; absent a provider, styles fall back to the default sheet. All pass.

API surface

exportinterfaceStyleSheetManagerProps{target?: Node;// omit → main document.head (default)children?: any;}exportdeclarefunctionStyleSheetManager(props: StyleSheetManagerProps): JSX.Element;

[beautyfree]

Closes#64.

What

Adds a StyleSheetManager component that mirrors styled-components' <StyleSheetManager target>: every styled component / createGlobalStyles rendered inside it injects its <style> into the provided node's document/root instead of the main document.head.

import{StyleSheetManager}from"solid-styled-components";// e.g. an Electron child BrowserWindow opened with window.open<Portalmount={childWin.document.body}><StyleSheetManagertarget={childWin.document.head}><App/></StyleSheetManager></Portal>

This unblocks rendering into another document — Electron child BrowserWindows, iframes, pop-out window.open windows, and shadow roots — where the opener document's sheet is not visible, so styled components currently render unstyled there.

How

The internals already thread a target into goober:

css.apply({target: _ctx.target,o: append,p: withTheme,g: _ctx.g},args);

…but styled is a Proxy over makeStyled called with no this, so _ctx.target is always undefined and there is no public way to set it. This PR adds a context carrying the target, read inside Styled (alongside the existing ThemeContext read) and passed to the same css.apply({ target }). goober routes the sheet to that node's root.

• Context target takes precedence over a bound _ctx.target, falling back to goober's default head.
• No behavior change when no StyleSheetManager is present (target stays undefined).
• Works for both styled and createGlobalStyles (the latter renders through the same makeStyled path).

Scope / follow-up

keyframes and glob are typically called at module scope (outside any component), so they have no context to read and still target the default sheet. Targeting those would need a separate API; left out of this PR to keep it focused on the component-tree case StyleSheetManager covers.

Tests

test/styleSheetManager.spec.tsx (3 cases): styled rules land in the target document and not the main head; createGlobalStyles honors the target; absent a provider, styles fall back to the default sheet. All pass.

API surface

exportinterfaceStyleSheetManagerProps{target?: Node;// omit → main document.head (default)children?: any;}exportdeclarefunctionStyleSheetManager(props: StyleSheetManagerProps): JSX.Element;

[beautyfree]

Closes#64.

What

Adds a StyleSheetManager component that mirrors styled-components' <StyleSheetManager target>: every styled component / createGlobalStyles rendered inside it injects its <style> into the provided node's document/root instead of the main document.head.

import{StyleSheetManager}from"solid-styled-components";// e.g. an Electron child BrowserWindow opened with window.open<Portalmount={childWin.document.body}><StyleSheetManagertarget={childWin.document.head}><App/></StyleSheetManager></Portal>

This unblocks rendering into another document — Electron child BrowserWindows, iframes, pop-out window.open windows, and shadow roots — where the opener document's sheet is not visible, so styled components currently render unstyled there.

How

The internals already thread a target into goober:

css.apply({target: _ctx.target,o: append,p: withTheme,g: _ctx.g},args);

…but styled is a Proxy over makeStyled called with no this, so _ctx.target is always undefined and there is no public way to set it. This PR adds a context carrying the target, read inside Styled (alongside the existing ThemeContext read) and passed to the same css.apply({ target }). goober routes the sheet to that node's root.

• Context target takes precedence over a bound _ctx.target, falling back to goober's default head.
• No behavior change when no StyleSheetManager is present (target stays undefined).
• Works for both styled and createGlobalStyles (the latter renders through the same makeStyled path).

Scope / follow-up

keyframes and glob are typically called at module scope (outside any component), so they have no context to read and still target the default sheet. Targeting those would need a separate API; left out of this PR to keep it focused on the component-tree case StyleSheetManager covers.

Tests

test/styleSheetManager.spec.tsx (3 cases): styled rules land in the target document and not the main head; createGlobalStyles honors the target; absent a provider, styles fall back to the default sheet. All pass.

API surface

exportinterfaceStyleSheetManagerProps{target?: Node;// omit → main document.head (default)children?: any;}exportdeclarefunctionStyleSheetManager(props: StyleSheetManagerProps): JSX.Element;

[beautyfree]

Closes#64.

What

Adds a StyleSheetManager component that mirrors styled-components' <StyleSheetManager target>: every styled component / createGlobalStyles rendered inside it injects its <style> into the provided node's document/root instead of the main document.head.

import{StyleSheetManager}from"solid-styled-components";// e.g. an Electron child BrowserWindow opened with window.open<Portalmount={childWin.document.body}><StyleSheetManagertarget={childWin.document.head}><App/></StyleSheetManager></Portal>

This unblocks rendering into another document — Electron child BrowserWindows, iframes, pop-out window.open windows, and shadow roots — where the opener document's sheet is not visible, so styled components currently render unstyled there.

How

The internals already thread a target into goober:

css.apply({target: _ctx.target,o: append,p: withTheme,g: _ctx.g},args);

…but styled is a Proxy over makeStyled called with no this, so _ctx.target is always undefined and there is no public way to set it. This PR adds a context carrying the target, read inside Styled (alongside the existing ThemeContext read) and passed to the same css.apply({ target }). goober routes the sheet to that node's root.

• Context target takes precedence over a bound _ctx.target, falling back to goober's default head.
• No behavior change when no StyleSheetManager is present (target stays undefined).
• Works for both styled and createGlobalStyles (the latter renders through the same makeStyled path).

Scope / follow-up

keyframes and glob are typically called at module scope (outside any component), so they have no context to read and still target the default sheet. Targeting those would need a separate API; left out of this PR to keep it focused on the component-tree case StyleSheetManager covers.

Tests

test/styleSheetManager.spec.tsx (3 cases): styled rules land in the target document and not the main head; createGlobalStyles honors the target; absent a provider, styles fall back to the default sheet. All pass.

API surface

exportinterfaceStyleSheetManagerProps{target?: Node;// omit → main document.head (default)children?: any;}exportdeclarefunctionStyleSheetManager(props: StyleSheetManagerProps): JSX.Element;

[beautyfree]

Closes#64.

What

Adds a StyleSheetManager component that mirrors styled-components' <StyleSheetManager target>: every styled component / createGlobalStyles rendered inside it injects its <style> into the provided node's document/root instead of the main document.head.

import{StyleSheetManager}from"solid-styled-components";// e.g. an Electron child BrowserWindow opened with window.open<Portalmount={childWin.document.body}><StyleSheetManagertarget={childWin.document.head}><App/></StyleSheetManager></Portal>

This unblocks rendering into another document — Electron child BrowserWindows, iframes, pop-out window.open windows, and shadow roots — where the opener document's sheet is not visible, so styled components currently render unstyled there.

How

The internals already thread a target into goober:

css.apply({target: _ctx.target,o: append,p: withTheme,g: _ctx.g},args);

…but styled is a Proxy over makeStyled called with no this, so _ctx.target is always undefined and there is no public way to set it. This PR adds a context carrying the target, read inside Styled (alongside the existing ThemeContext read) and passed to the same css.apply({ target }). goober routes the sheet to that node's root.

• Context target takes precedence over a bound _ctx.target, falling back to goober's default head.
• No behavior change when no StyleSheetManager is present (target stays undefined).
• Works for both styled and createGlobalStyles (the latter renders through the same makeStyled path).

Scope / follow-up

keyframes and glob are typically called at module scope (outside any component), so they have no context to read and still target the default sheet. Targeting those would need a separate API; left out of this PR to keep it focused on the component-tree case StyleSheetManager covers.

Tests

test/styleSheetManager.spec.tsx (3 cases): styled rules land in the target document and not the main head; createGlobalStyles honors the target; absent a provider, styles fall back to the default sheet. All pass.

API surface

exportinterfaceStyleSheetManagerProps{target?: Node;// omit → main document.head (default)children?: any;}exportdeclarefunctionStyleSheetManager(props: StyleSheetManagerProps): JSX.Element;

[beautyfree]

Closes#64.

What

Adds a StyleSheetManager component that mirrors styled-components' <StyleSheetManager target>: every styled component / createGlobalStyles rendered inside it injects its <style> into the provided node's document/root instead of the main document.head.

import{StyleSheetManager}from"solid-styled-components";// e.g. an Electron child BrowserWindow opened with window.open<Portalmount={childWin.document.body}><StyleSheetManagertarget={childWin.document.head}><App/></StyleSheetManager></Portal>

This unblocks rendering into another document — Electron child BrowserWindows, iframes, pop-out window.open windows, and shadow roots — where the opener document's sheet is not visible, so styled components currently render unstyled there.

How

The internals already thread a target into goober:

css.apply({target: _ctx.target,o: append,p: withTheme,g: _ctx.g},args);

…but styled is a Proxy over makeStyled called with no this, so _ctx.target is always undefined and there is no public way to set it. This PR adds a context carrying the target, read inside Styled (alongside the existing ThemeContext read) and passed to the same css.apply({ target }). goober routes the sheet to that node's root.

• Context target takes precedence over a bound _ctx.target, falling back to goober's default head.
• No behavior change when no StyleSheetManager is present (target stays undefined).
• Works for both styled and createGlobalStyles (the latter renders through the same makeStyled path).

Scope / follow-up

keyframes and glob are typically called at module scope (outside any component), so they have no context to read and still target the default sheet. Targeting those would need a separate API; left out of this PR to keep it focused on the component-tree case StyleSheetManager covers.

Tests

test/styleSheetManager.spec.tsx (3 cases): styled rules land in the target document and not the main head; createGlobalStyles honors the target; absent a provider, styles fall back to the default sheet. All pass.

API surface

exportinterfaceStyleSheetManagerProps{target?: Node;// omit → main document.head (default)children?: any;}exportdeclarefunctionStyleSheetManager(props: StyleSheetManagerProps): JSX.Element;

[beautyfree]

Closes#64.

What

Adds a StyleSheetManager component that mirrors styled-components' <StyleSheetManager target>: every styled component / createGlobalStyles rendered inside it injects its <style> into the provided node's document/root instead of the main document.head.

import{StyleSheetManager}from"solid-styled-components";// e.g. an Electron child BrowserWindow opened with window.open<Portalmount={childWin.document.body}><StyleSheetManagertarget={childWin.document.head}><App/></StyleSheetManager></Portal>

This unblocks rendering into another document — Electron child BrowserWindows, iframes, pop-out window.open windows, and shadow roots — where the opener document's sheet is not visible, so styled components currently render unstyled there.

How

The internals already thread a target into goober:

css.apply({target: _ctx.target,o: append,p: withTheme,g: _ctx.g},args);

…but styled is a Proxy over makeStyled called with no this, so _ctx.target is always undefined and there is no public way to set it. This PR adds a context carrying the target, read inside Styled (alongside the existing ThemeContext read) and passed to the same css.apply({ target }). goober routes the sheet to that node's root.

• Context target takes precedence over a bound _ctx.target, falling back to goober's default head.
• No behavior change when no StyleSheetManager is present (target stays undefined).
• Works for both styled and createGlobalStyles (the latter renders through the same makeStyled path).

Scope / follow-up

keyframes and glob are typically called at module scope (outside any component), so they have no context to read and still target the default sheet. Targeting those would need a separate API; left out of this PR to keep it focused on the component-tree case StyleSheetManager covers.

Tests

test/styleSheetManager.spec.tsx (3 cases): styled rules land in the target document and not the main head; createGlobalStyles honors the target; absent a provider, styles fall back to the default sheet. All pass.

API surface

exportinterfaceStyleSheetManagerProps{target?: Node;// omit → main document.head (default)children?: any;}exportdeclarefunctionStyleSheetManager(props: StyleSheetManagerProps): JSX.Element;