perf(engine-core): render separate style tags (#2870)

* perf(engine-core): render separate style tags

* fix: use ArrayUnshift instead of ArraySplice

Author: nolanlawson

packages/@lwc/engine-core/src/framework/stylesheet.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-import { ArrayJoin, ArrayPush, isArray, isNull, isUndefined, KEY__SCOPED_CSS } from '@lwc/shared';
+import { ArrayMap, ArrayPush, isArray, isNull, isUndefined, KEY__SCOPED_CSS } from '@lwc/shared';
 
 import api from './api';
 import { RenderMode, ShadowMode, VM } from './vm';
@@ -199,7 +199,7 @@ function getNearestNativeShadowComponent(vm: VM): VM | null {
     return owner;
 }
 
-export function createStylesheet(vm: VM, stylesheets: string[]): VNode | null {
+export function createStylesheet(vm: VM, stylesheets: string[]): VNode[] | null {
     const {
         renderMode,
         shadowMode,
@@ -215,8 +215,7 @@ export function createStylesheet(vm: VM, stylesheets: string[]): VNode | null {
         //       the first time the VM renders.
 
         // native shadow or light DOM, SSR
-        const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
-        return createInlineStyleVNode(combinedStylesheetContent);
+        return ArrayMap.call(stylesheets, createInlineStyleVNode) as VNode[];
     } else {
         // native shadow or light DOM, DOM renderer
         const root = getNearestNativeShadowComponent(vm);

packages/@lwc/engine-core/src/framework/template.ts

@@ -180,7 +180,7 @@ export function evaluateTemplate(vm: VM, html: Template): VNodes {
                     // Evaluate, create stylesheet and cache the produced VNode for future
                     // re-rendering.
                     const stylesheetsContent = getStylesheetsContent(vm, html);
-                    context.styleVNode =
+                    context.styleVNodes =
                         stylesheetsContent.length === 0
                             ? null
                             : createStylesheet(vm, stylesheetsContent);
@@ -200,9 +200,9 @@ export function evaluateTemplate(vm: VM, html: Template): VNodes {
                 isUpdatingTemplate = true;
 
                 vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-                const { styleVNode } = context;
-                if (!isNull(styleVNode)) {
-                    ArrayUnshift.call(vnodes, styleVNode);
+                const { styleVNodes } = context;
+                if (!isNull(styleVNodes)) {
+                    ArrayUnshift.apply(vnodes, styleVNodes);
                 }
             });
         },

packages/@lwc/engine-core/src/framework/vm.ts

@@ -87,8 +87,8 @@ export interface Context {
     hasTokenInAttribute: boolean | undefined;
     /** Whether or not light DOM scoped styles are present in the stylesheets. */
     hasScopedStyles: boolean | undefined;
-    /** The VNode injected in all the shadow trees to apply the associated component stylesheets. */
-    styleVNode: VNode | null;
+    /** The VNodes injected in all the shadow trees to apply the associated component stylesheets. */
+    styleVNodes: VNode[] | null;
     /** Object used by the template function to store information that can be reused between
      *  different render cycle of the same template. */
     tplCache: TemplateCache;
@@ -304,7 +304,7 @@ export function createVM<HostNode, HostElement>(
             hasTokenInClass: undefined,
             hasTokenInAttribute: undefined,
             hasScopedStyles: undefined,
-            styleVNode: null,
+            styleVNodes: null,
             tplCache: EmptyObject,
             wiredConnecting: EmptyArray,
             wiredDisconnecting: EmptyArray,

packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-multiple/expected.html

@@ -1,7 +1,9 @@
 <x-parent>
   <style type="text/css">
     p {background-color: blue;}
-p {color: red;}
+  </style>
+  <style type="text/css">
+    p {color: red;}
   </style>
   <p>
     Hello

packages/@lwc/engine-server/src/__tests__/fixtures/light-dom-scoped-styles/expected.html

@@ -1,7 +1,9 @@
 <x-basic class="x-basic_basic-host">
   <style class="x-basic_basic" type="text/css">
     p {color: red;}
-p.x-basic_basic {background-color: blue;}.x-basic_basic-host {display: block;border: 1px solid black;}
+  </style>
+  <style class="x-basic_basic" type="text/css">
+    p.x-basic_basic {background-color: blue;}.x-basic_basic-host {display: block;border: 1px solid black;}
   </style>
   <p class="x-basic_basic">
     Hello

packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/expected.html

@@ -0,0 +1,26 @@
+<x-parent>
+  <template shadowroot="open">
+    <style type="text/css">
+      div {border: 1px solid turquoise;}
+    </style>
+    <style type="text/css">
+      div {background: blue;}
+    </style>
+    <x-child>
+      <template shadowroot="open">
+        <style type="text/css">
+          div {border: 1px solid turquoise;}
+        </style>
+        <style type="text/css">
+          div {color: red;}
+        </style>
+        <div>
+          Hello child
+        </div>
+      </template>
+    </x-child>
+    <div>
+      Hello parent
+    </div>
+  </template>
+</x-parent>

packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-parent';
+export { default } from 'x/parent';

packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/modules/x/child/child.css

@@ -0,0 +1,5 @@
+@import '../shared.css';
+
+div {
+    color: red;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/modules/x/child/child.html

@@ -0,0 +1,3 @@
+<template>
+    <div>Hello child</div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/styles-shared/modules/x/child/child.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}