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

christian-bromann · web-flow · commit 1bdcdb904b77 · 2025-05-28T08:32:11.000-07:00
* feat(hydrate): export style content from hydrated scoped components

* prettier

* linting fix
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
@@ -2,6 +2,7 @@ import { Readable } from 'node:stream';
 
 import { hydrateFactory } from '@hydrate-factory';
 import { modeResolutionChain, setMode } from '@platform';
+import { HYDRATED_STYLE_ID } from '@runtime';
 import { MockWindow, serializeNodeToHtml } from '@stencil/core/mock-doc';
 import { hasError } from '@utils';
 
@@ -215,6 +216,17 @@ 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
@@ -13,6 +13,7 @@ export { parsePropertyValue } from './parse-property-value';
 export { setPlatformOptions } from './platform-options';
 export { proxyComponent } from './proxy-component';
 export { render } from './render';
+export { HYDRATED_STYLE_ID } from './runtime-constants';
 export { getValue, setValue } from './set-value';
 export { forceUpdate, getRenderingRef, postUpdateComponent } from './update-component';
 export { h, Host } from './vdom/h';
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,14 @@ 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 {`