Skip to content

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

Open
beautyfree wants to merge 1 commit into
solidjs:mainfrom
beautyfree:feat/stylesheet-manager
Open

feat: add StyleSheetManager to inject styles into another document (Electron child windows, iframes, shadow DOM)#65
beautyfree wants to merge 1 commit into
solidjs:mainfrom
beautyfree:feat/stylesheet-manager

Conversation

@beautyfree

Copy link
Copy Markdown

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
<Portal mount={childWin.document.body}>
  <StyleSheetManager target={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

export interface StyleSheetManagerProps {
  target?: Node;        // omit → main document.head (default)
  children?: any;
}
export declare function StyleSheetManager(props: StyleSheetManagerProps): JSX.Element;

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 solidjs#64

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add StyleSheetManager / target option to inject styles into another document (Electron child windows, iframes, shadow DOM)

1 participant