feat(hydrate): export style content from hydrated scoped components

christian-bromann · christian-bromann · commit eb79fd5d29bf · 2025-05-21T10:33:37.000-07:00
diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -1196,7 +1196,9 @@ export interface HydrateScriptElement extends HydrateElement {
 }
 
 export interface HydrateStyleElement extends HydrateElement {
+  id?: string;
   href?: string;
+  content?: string;
 }
 
 export interface HydrateStaticData {
diff --git a/src/hydrate/runner/render.ts b/src/hydrate/runner/render.ts
@@ -4,6 +4,7 @@ import { hydrateFactory } from '@hydrate-factory';
 import { modeResolutionChain, setMode } from '@platform';
 import { MockWindow, serializeNodeToHtml } from '@stencil/core/mock-doc';
 import { hasError } from '@utils';
+import { HYDRATED_STYLE_ID } from '@runtime';
 
 import { updateCanonicalLink } from '../../compiler/html/canonical-link';
 import { relocateMetaCharset } from '../../compiler/html/relocate-meta-charset';
@@ -210,6 +211,15 @@ function finalizeHydrate(win: MockWindow, doc: Document, opts: HydrateFactoryOpt
       removeScripts(doc.documentElement);
     }
 
+    const styles = doc.querySelectorAll('head style');
+    if (styles.length > 0) {
+      results.styles.push(...Array.from(styles).map((style) => ({
+        href: style.getAttribute('href'),
+        id: style.getAttribute(HYDRATED_STYLE_ID),
+        content: style.textContent,
+      })));
+    }
+
     try {
       updateCanonicalLink(doc, opts.canonicalUrl);
     } catch (e) {
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
@@ -18,3 +18,4 @@ export { forceUpdate, getRenderingRef, postUpdateComponent } from './update-comp
 export { h, Host } from './vdom/h';
 export { insertVdomAnnotations } from './vdom/vdom-annotations';
 export { renderVdom } from './vdom/vdom-render';
+export { HYDRATED_STYLE_ID } from './runtime-constants';
diff --git a/test/end-to-end/package-lock.json b/test/end-to-end/package-lock.json
diff --git a/test/end-to-end/src/miscellaneous/renderToString.e2e.ts b/test/end-to-end/src/miscellaneous/renderToString.e2e.ts
@@ -159,4 +159,12 @@ describe('renderToString', () => {
       '<head><meta charset="utf-8"><style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}ul.sc-scoped-car-list{display:block;margin:0;padding:0}li.sc-scoped-car-list{list-style:none;margin:0;padding:20px}.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><style class="vjs-styles-defaults">.video-js {width: 300px;height: 150px;}.vjs-fluid:not(.vjs-audio-only-mode) {padding-top: 56.25%}</style> <link rel="stylesheet" href="whatever.css"> </head>',
     );
   });
+
+  it('populates style information even if we do not render the whole document', async () => {
+    const { styles } = await renderToString(`<scoped-car-list cars=${JSON.stringify([vento, beetle])}></scoped-car-list>`);
+    expect(styles.length).toBe(2);
+    expect(styles[0].id).toBe('sc-scoped-car-list');
+    expect(styles[0].content).toContain('.sc-scoped-car-list-h{display:block;');
+    expect(styles[1].content).toContain('.video-js {');
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -1196,7 +1196,9 @@ export interface HydrateScriptElement extends HydrateElement {`
`1196`	`1196`	`}`
`1197`	`1197`
`1198`	`1198`	`export interface HydrateStyleElement extends HydrateElement {`
	`1199`	`+ id?: string;`
`1199`	`1200`	`href?: string;`
	`1201`	`+ content?: string;`
`1200`	`1202`	`}`
`1201`	`1203`
`1202`	`1204`	`export interface HydrateStaticData {`