From 3ca9c5bf81ae184746d5350902be19d38e806a5b Mon Sep 17 00:00:00 2001
From: Christian Bromann
Date: Mon, 5 Aug 2024 14:08:45 -0700
Subject: [PATCH 1/2] fix(runtime): render component styles at the end of the
head tag
---
src/runtime/styles.ts | 22 +++++++-------
.../src/miscellaneous/renderToString.e2e.ts | 29 ++++++++++++++++++-
2 files changed, 38 insertions(+), 13 deletions(-)
diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts
index 316ea26b926..f945b29cca5 100644
--- a/src/runtime/styles.ts
+++ b/src/runtime/styles.ts
@@ -92,19 +92,17 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
}
/**
- * only attach style tag to section if:
+ * attach styles at the end of the head tag if we render shadow components
*/
- const injectStyle =
- /**
- * we render a scoped component
- */
- !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) ||
- /**
- * we are using shadow dom and render the style tag within the shadowRoot
- */
- (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation && styleContainerNode.nodeName !== 'HEAD');
- if (injectStyle) {
- styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+ if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
+ styleContainerNode.append(styleElm);
+ }
+
+ /**
+ * attach styles at the beginning of a shadow root node if we render shadow components
+ */
+ if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation && styleContainerNode.nodeName !== 'HEAD') {
+ styleContainerNode.insertBefore(styleElm);
}
}
diff --git a/test/end-to-end/src/miscellaneous/renderToString.e2e.ts b/test/end-to-end/src/miscellaneous/renderToString.e2e.ts
index 5e0001de216..7b1a64f656a 100644
--- a/test/end-to-end/src/miscellaneous/renderToString.e2e.ts
+++ b/test/end-to-end/src/miscellaneous/renderToString.e2e.ts
@@ -49,6 +49,33 @@ describe('renderToString', () => {
);
});
+ it('puts style last in the head tag', async () => {
+ const { html } = await renderToString(
+ `
+
+
+
+
+
+
+
+
+ `,
+ { fullDocument: true, serializeShadowRoot: false },
+ );
+
+ expect(html).toContain(' {
const { html } = await renderToString(
`
@@ -79,7 +106,7 @@ describe('renderToString', () => {
* renders hydration styles and custom link tag within the head tag
*/
expect(html).toContain(
- '.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)} {
{ fullDocument: true, serializeShadowRoot: false },
);
- expect(html).toContain(' {
const { html } = await renderToString(
@@ -106,7 +110,7 @@ describe('renderToString', () => {
* renders hydration styles and custom link tag within the head tag
*/
expect(html).toContain(
- '