fix(runtime): place scoped component styles after preconnect links but before custom styles (#5938)

christian-bromann · web-flow · commit 8f92b11c1940 · 2024-08-14T00:09:18.000Z
* fix(runtime): place scoped component styles after preconnect links but before custom styles

* prettier

* make styles appear for custom styles if there are no preconnect links

* prettier

* prettier
diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts
@@ -92,10 +92,27 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
           }
 
           /**
-           * attach styles at the end of the head tag if we render shadow components
+           * attach styles at the end of the head tag if we render scoped components
            */
           if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
-            styleContainerNode.append(styleElm);
+            if (styleContainerNode.nodeName === 'HEAD') {
+              /**
+               * if the page contains preconnect links, we want to insert the styles
+               * after the last preconnect link to ensure the styles are preloaded
+               */
+              const preconnectLinks = styleContainerNode.querySelectorAll('link[rel=preconnect]');
+              const referenceNode =
+                preconnectLinks.length > 0
+                  ? preconnectLinks[preconnectLinks.length - 1].nextSibling
+                  : document.querySelector('style');
+              styleContainerNode.insertBefore(styleElm, referenceNode);
+            } else if ('host' in styleContainerNode) {
+              /**
+               * if a scoped component is used within a shadow root, we want to insert the styles
+               * at the beginning of the shadow root node
+               */
+              styleContainerNode.prepend(styleElm, null);
+            }
           }
 
           /**
diff --git a/test/end-to-end/src/miscellaneous/renderToString.e2e.ts b/test/end-to-end/src/miscellaneous/renderToString.e2e.ts
@@ -49,11 +49,16 @@ describe('renderToString', () => {
     );
   });
 
-  it('puts style last in the head tag', async () => {
+  it('puts style after preconnect links in the head tag', async () => {
     const { html } = await renderToString(
       `<html>
       <head>
         <link rel="preconnect" href="https://some-url.com" />
+        <style>
+          .myComponent {
+            display: none;
+          }
+        </style>
       </head>
 
       <body>
@@ -72,11 +77,52 @@ describe('renderToString', () => {
       { fullDocument: true, serializeShadowRoot: false },
     );
 
+    /**
+     * expect the scoped component styles to be injected after the preconnect link
+     */
     expect(html).toContain(
-      '<link rel="preconnect" href="https://some-url.com"> <style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{',
+      '<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',
+    /**
+     * expect the custom style tag to be last in the head tag
+     */
+    expect(html.replaceAll(/\n[ ]*/g, '')).toContain(
+      `.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style> <style>.myComponent {display: none;}</style> </head> <body>`,
+    );
+  });
+
+  it('puts styles before any custom styles', async () => {
+    const { html } = await renderToString(
+      `<html>
+      <head>
+        <style>
+          .myComponent {
+            display: none;
+          }
+        </style>
+      </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 the scoped component styles to be injected before custom styles
+     */
+    expect(html.replaceAll(/\n[ ]*/g, '')).toContain(
+      '.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 {padding-top: 56.25%}</style> <style>.myComponent {display: none;}</style> </head>',
     );
   });
 
@@ -109,8 +155,8 @@ describe('renderToString', () => {
     /**
      * renders hydration styles and custom link tag within the head tag
      */
-    expect(html).toContain(
-      '<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=',
+    expect(html.replaceAll(/\n[ ]*/g, '')).toContain(
+      '<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 {padding-top: 56.25%}</style> <link rel="stylesheet" href="whatever.css"> </head>',
     );
   });
 });
diff --git a/test/end-to-end/tsconfig.json b/test/end-to-end/tsconfig.json
@@ -12,7 +12,7 @@
     "jsxFragmentFactory": "Fragment",
     "lib": [
       "dom",
-      "es2017"
+      "es2021"
     ],
     "module": "esnext",
     "moduleResolution": "node",
