From a2a29f7641290ee7cc5f727ecdb74bba3e2a31c3 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nlawson@salesforce.com>
Date: Fri, 22 Nov 2024 10:02:13 -0800
Subject: [PATCH 1/2] perf(ssr): speed up rendering stylesheets

---
 .../src/compile-template/index.ts             |  5 +-
 packages/@lwc/ssr-runtime/src/styles.ts       | 59 ++++++++++++++-----
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/packages/@lwc/ssr-compiler/src/compile-template/index.ts b/packages/@lwc/ssr-compiler/src/compile-template/index.ts
index 5342714015..da77b4dc6a 100644
--- a/packages/@lwc/ssr-compiler/src/compile-template/index.ts
+++ b/packages/@lwc/ssr-compiler/src/compile-template/index.ts
@@ -28,9 +28,10 @@ const bExportTemplate = esTemplate`
         
         const { stylesheets: staticStylesheets } = Cmp;
         if (defaultStylesheets || defaultScopedStylesheets || staticStylesheets) {
-            const stylesheets = [defaultStylesheets, defaultScopedStylesheets, staticStylesheets];
             yield renderStylesheets(
-                stylesheets, 
+                defaultStylesheets, 
+                defaultScopedStylesheets, 
+                staticStylesheets,
                 stylesheetScopeToken, 
                 Cmp, 
                 hasScopedStylesheets,
diff --git a/packages/@lwc/ssr-runtime/src/styles.ts b/packages/@lwc/ssr-runtime/src/styles.ts
index 48bba2b1ab..936e3411d7 100644
--- a/packages/@lwc/ssr-runtime/src/styles.ts
+++ b/packages/@lwc/ssr-runtime/src/styles.ts
@@ -4,43 +4,70 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-import { flattenStylesheets } from '@lwc/shared';
+import { isArray } from '@lwc/shared';
 import { validateStyleTextContents } from './validate-style-text-contents';
 import type { LightningElementConstructor } from './lightning-element';
-import type { Stylesheets } from '@lwc/shared';
+import type { Stylesheets, Stylesheet } from '@lwc/shared';
 
-export function hasScopedStaticStylesheets(Component: LightningElementConstructor): boolean {
-    const { stylesheets } = Component;
-    if (stylesheets) {
-        return flattenStylesheets(stylesheets).some((stylesheet) => stylesheet.$scoped$);
+type ForgivingStylesheets =
+    | Stylesheets
+    | Stylesheet
+    | undefined
+    | null
+    | Array<Stylesheets | undefined>;
+
+// Traverse in the same order as `flattenStylesheets` but without creating unnecessary additional arrays
+function traverseStylesheets(
+    stylesheets: ForgivingStylesheets,
+    callback: (stylesheet: Stylesheet) => void
+): void {
+    if (isArray(stylesheets)) {
+        for (let i = 0; i < stylesheets.length; i++) {
+            traverseStylesheets(stylesheets[i], callback);
+        }
+    } else if (stylesheets) {
+        callback(stylesheets);
     }
-    return false;
+}
+
+export function hasScopedStaticStylesheets(Component: LightningElementConstructor): boolean {
+    let scoped: boolean = false;
+    traverseStylesheets(Component.stylesheets, (stylesheet) => {
+        scoped ||= !!stylesheet.$scoped$;
+    });
+    return scoped;
 }
 
 export function renderStylesheets(
-    stylesheets: Array<Stylesheets | undefined>,
+    defaultStylesheets: ForgivingStylesheets,
+    defaultScopedStylesheets: ForgivingStylesheets,
+    staticStylesheets: ForgivingStylesheets,
     scopeToken: string,
     Component: LightningElementConstructor,
     hasScopedTemplateStyles: boolean
 ): string {
     const hasAnyScopedStyles = hasScopedTemplateStyles || hasScopedStaticStylesheets(Component);
+    const { renderMode } = Component;
 
     let result = '';
 
-    const truthyStylesheets = stylesheets.filter(Boolean) as Array<Stylesheets>;
-    for (const stylesheet of flattenStylesheets(truthyStylesheets)) {
-        // TODO [#2869]: `<style>`s should not have scope token classes
-        result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">`;
+    const renderStylesheet = (stylesheet: Stylesheet) => {
+        const { $scoped$: scoped } = stylesheet;
 
-        const token = stylesheet.$scoped$ ? scopeToken : undefined;
-        const useActualHostSelector = !stylesheet.$scoped$ || Component.renderMode !== 'light';
+        const token = scoped ? scopeToken : undefined;
+        const useActualHostSelector = !scoped || renderMode !== 'light';
         const useNativeDirPseudoclass = true;
 
         const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
         validateStyleTextContents(styleContents);
 
-        result += styleContents + '</style>';
-    }
+        // TODO [#2869]: `<style>`s should not have scope token classes
+        result += `<style${hasAnyScopedStyles ? ` class="${scopeToken}"` : ''} type="text/css">${styleContents}</style>`;
+    };
+
+    traverseStylesheets(defaultStylesheets, renderStylesheet);
+    traverseStylesheets(defaultScopedStylesheets, renderStylesheet);
+    traverseStylesheets(staticStylesheets, renderStylesheet);
 
     return result;
 }

From a2ab693577fc5db27fd5459536f8ce6e34725161 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nlawson@salesforce.com>
Date: Fri, 22 Nov 2024 10:43:55 -0800
Subject: [PATCH 2/2] fix: better type

---
 packages/@lwc/ssr-runtime/src/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@lwc/ssr-runtime/src/styles.ts b/packages/@lwc/ssr-runtime/src/styles.ts
index 936e3411d7..5def046a00 100644
--- a/packages/@lwc/ssr-runtime/src/styles.ts
+++ b/packages/@lwc/ssr-runtime/src/styles.ts
@@ -14,7 +14,7 @@ type ForgivingStylesheets =
     | Stylesheet
     | undefined
     | null
-    | Array<Stylesheets | undefined>;
+    | Array<Stylesheets | undefined | null>;
 
 // Traverse in the same order as `flattenStylesheets` but without creating unnecessary additional arrays
 function traverseStylesheets(