fix(runtime): render component styles at the end of the head tag (#5926)

christian-bromann · web-flow · commit 90da726789be · 2024-08-06T15:35:59.000Z
* fix(runtime): render component styles at the end of the head tag

* prettier
diff --git 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 <head /> 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
@@ -49,6 +49,37 @@ describe('renderToString', () => {
     );
   });
 
+  it('puts style last in the head tag', async () => {
+    const { html } = await renderToString(
+      `<html>
+      <head>
+        <link rel="preconnect" href="https://some-url.com" />
+      </head>
+
+      <body>
+        <div class="__next">
+          <main>
+            <scoped-car-list cars=${JSON.stringify([vento, beetle])}></scoped-car-list>
+          </main>
+        </div>
+
+        <script type="module">
+            import { defineCustomElements } from "./static/loader/index.js";
+            defineCustomElements().catch(console.error);
+        </script>
+      </body>
+      </html>`,
+      { fullDocument: true, serializeShadowRoot: false },
+    );
+
+    expect(html).toContain(
+      '<link rel="preconnect" href="https://some-url.com"> <style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{',
+    );
+    expect(html).toContain(
+      '.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style></head> <body> <div class="__next"> <main> <scoped-car-list cars',
+    );
+  });
+
   it('allows to hydrate whole HTML page with using a scoped component', async () => {
     const { html } = await renderToString(
       `<html>
@@ -79,7 +110,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)}</style><link rel="stylesheet" href="whatever.css"> </head> <body> <div class="__next"> <main> <scoped-car-list cars=',
+      '<link rel="stylesheet" href="whatever.css"> <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></head> <body> <div class="__next"> <main> <scoped-car-list cars=',
     );
   });
 });
