fix(engine-dom): remove stylesheets when unused

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

@@ -204,6 +204,7 @@ function hydrateCustomElement(elm: Node, vnode: VCustomElement): Node | null {
         mode,
         owner,
         tagName: sel,
+        hydrated: true,
     });
 
     vnode.elm = elm;

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

@@ -79,8 +79,6 @@ export {
     setGetProperty,
     setHTMLElement,
     setInsert,
-    setInsertGlobalStylesheet,
-    setInsertStylesheet,
     setIsConnected,
     setIsHydrating,
     setIsNativeShadowDefined,
@@ -97,4 +95,5 @@ export {
     setSetText,
     setSsr,
     setAddEventListener,
+    setToggleStyleSheet,
 } from '../renderer';

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

@@ -6,15 +6,7 @@
  */
 import { ArrayJoin, ArrayPush, isArray, isNull, isUndefined, KEY__SCOPED_CSS } from '@lwc/shared';
 
-import {
-    getClassList,
-    removeAttribute,
-    setAttribute,
-    insertGlobalStylesheet,
-    ssr,
-    isHydrating,
-    insertStylesheet,
-} from '../renderer';
+import { getClassList, removeAttribute, setAttribute, ssr, toggleStyleSheet } from '../renderer';
 
 import api from './api';
 import { RenderMode, ShadowMode, VM } from './vm';
@@ -203,32 +195,39 @@ function getNearestNativeShadowComponent(vm: VM): VM | null {
     return owner;
 }
 
-export function createStylesheet(vm: VM, stylesheets: string[]): VNode | null {
+function createOrRemoveStylesheet(vm: VM, stylesheets: string[], insert: false): null;
+function createOrRemoveStylesheet(vm: VM, stylesheets: string[], insert: true): VNode | null;
+function createOrRemoveStylesheet(vm: VM, stylesheets: string[], insert: boolean) {
     const { renderMode, shadowMode } = vm;
     if (renderMode === RenderMode.Shadow && shadowMode === ShadowMode.Synthetic) {
         for (let i = 0; i < stylesheets.length; i++) {
-            insertGlobalStylesheet(stylesheets[i]);
+            toggleStyleSheet(stylesheets[i], insert);
         }
-    } else if (ssr || isHydrating()) {
+    } else if (ssr || vm.hydrated) {
         // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
         //       This works in the client, because the stylesheets are created, and cached in the VM
         //       the first time the VM renders.
 
         // native shadow or light DOM, SSR
-        const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
-        return createInlineStyleVNode(combinedStylesheetContent);
+        if (insert) {
+            const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
+            return createInlineStyleVNode(combinedStylesheetContent);
+        }
+        // If it's being removed, we don't need to do anything. The vdom diffing will take care of it.
     } else {
         // native shadow or light DOM, DOM renderer
         const root = getNearestNativeShadowComponent(vm);
-        const isGlobal = isNull(root);
         for (let i = 0; i < stylesheets.length; i++) {
-            if (isGlobal) {
-                insertGlobalStylesheet(stylesheets[i]);
-            } else {
-                // local level
-                insertStylesheet(stylesheets[i], root!.shadowRoot!);
-            }
+            toggleStyleSheet(stylesheets[i], insert, root?.shadowRoot ?? undefined);
         }
     }
     return null;
 }
+
+export function createStylesheet(vm: VM, stylesheets: string[]): VNode | null {
+    return createOrRemoveStylesheet(vm, stylesheets, true);
+}
+
+export function removeStylesheet(vm: VM, stylesheets: string[]) {
+    createOrRemoveStylesheet(vm, stylesheets, false);
+}

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

@@ -42,6 +42,7 @@ import { connectWireAdapters, disconnectWireAdapters, installWireAdapters } from
 import { AccessorReactiveObserver } from './decorators/api';
 import { removeActiveVM } from './hot-swaps';
 import { VNodes, VCustomElement, VNode, VNodeType } from './vnodes';
+import { getStylesheetsContent, removeStylesheet } from './stylesheet';
 
 import type { HostNode, HostElement } from '../renderer';
 
@@ -111,6 +112,8 @@ export interface VM<N = HostNode, E = HostElement> {
     readonly context: Context;
     /** The owner VM or null for root elements. */
     readonly owner: VM<N, E> | null;
+    /** Whether or not the VM was hydrated */
+    readonly hydrated: boolean;
     /** Rendering operations associated with the VM */
     renderMode: RenderMode;
     shadowMode: ShadowMode;
@@ -217,6 +220,15 @@ export function appendVM(vm: VM) {
     rehydrate(vm);
 }
 
+function removeStyles(vm: VM) {
+    // Remove any styles used by this template when no longer needed
+    const { cmpTemplate } = vm;
+    if (!isNull(cmpTemplate)) {
+        const stylesheets = getStylesheetsContent(vm, cmpTemplate);
+        removeStylesheet(vm, stylesheets);
+    }
+}
+
 // just in case the component comes back, with this we guarantee re-rendering it
 // while preventing any attempt to rehydration until after reinsertion.
 function resetComponentStateWhenRemoved(vm: VM) {
@@ -234,6 +246,7 @@ function resetComponentStateWhenRemoved(vm: VM) {
         // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
         runChildNodesDisconnectedCallback(vm);
         runLightChildNodesDisconnectedCallback(vm);
+        removeStyles(vm);
     }
 
     if (process.env.NODE_ENV !== 'production') {
@@ -268,9 +281,10 @@ export function createVM<HostNode, HostElement>(
         mode: ShadowRootMode;
         owner: VM<HostNode, HostElement> | null;
         tagName: string;
+        hydrated?: boolean;
     }
 ): VM {
-    const { mode, owner, tagName } = options;
+    const { mode, owner, tagName, hydrated } = options;
     const def = getComponentInternalDef(ctor);
 
     const vm: VM = {
@@ -291,6 +305,7 @@ export function createVM<HostNode, HostElement>(
         cmpSlots: create(null),
         oar: create(null),
         cmpTemplate: null,
+        hydrated: Boolean(hydrated),
 
         renderMode: def.renderMode,
 
@@ -658,6 +673,14 @@ export function resetComponentRoot(vm: VM) {
 
     runChildNodesDisconnectedCallback(vm);
     vm.velements = EmptyArray;
+
+    // If the component was hydrated, then we shouldn't remove the stylesheets
+    // because it didn't actually insert any shared stylesheets – hydrated components
+    // use inline <styles>. Removing the styles here would cause the stylesheet
+    // count to become negative.
+    if (!vm.hydrated) {
+        removeStyles(vm);
+    }
 }
 
 export function scheduleRehydration(vm: VM) {

packages/@lwc/engine-core/src/renderer.ts

@@ -245,17 +245,10 @@ export let isConnected: isConnectedFunc;
 export function setIsConnected(isConnectedImpl: isConnectedFunc) {
     isConnected = isConnectedImpl;
 }
-
-type insertGlobalStylesheetFunc = (content: string) => void;
-export let insertGlobalStylesheet: insertGlobalStylesheetFunc;
-export function setInsertGlobalStylesheet(insertGlobalStylesheetImpl: insertGlobalStylesheetFunc) {
-    insertGlobalStylesheet = insertGlobalStylesheetImpl;
-}
-
-type insertStylesheetFunc = (content: string, target: ShadowRoot) => void;
-export let insertStylesheet: insertStylesheetFunc;
-export function setInsertStylesheet(insertStylesheetImpl: insertStylesheetFunc) {
-    insertStylesheet = insertStylesheetImpl;
+type toggleStyleSheetFunc = (content: string, insert: boolean, target?: ShadowRoot) => void;
+export let toggleStyleSheet: toggleStyleSheetFunc;
+export function setToggleStyleSheet(toggleStyleSheetImpl: toggleStyleSheetFunc) {
+    toggleStyleSheet = toggleStyleSheetImpl;
 }
 
 type assertInstanceOfHTMLElementFunc = (elm: any, msg: string) => void;

packages/@lwc/engine-dom/src/apis/hydrate-component.ts

@@ -36,6 +36,7 @@ function createVMWithProps(element: Element, Ctor: typeof LightningElement, prop
         mode: 'open',
         owner: null,
         tagName: element.tagName.toLowerCase(),
+        hydrated: true,
     });
 
     for (const [key, value] of Object.entries(props)) {

packages/@lwc/engine-dom/src/initializeRenderer.ts

@@ -28,8 +28,6 @@ import {
     setGetProperty,
     setHTMLElement,
     setInsert,
-    setInsertGlobalStylesheet,
-    setInsertStylesheet,
     setIsConnected,
     setIsHydrating,
     setIsNativeShadowDefined,
@@ -46,6 +44,7 @@ import {
     setSetText,
     setSsr,
     setAddEventListener,
+    setToggleStyleSheet,
 } from '@lwc/engine-core';
 
 import {
@@ -71,8 +70,6 @@ import {
     getProperty,
     HTMLElement,
     insert,
-    insertGlobalStylesheet,
-    insertStylesheet,
     isConnected,
     isHydrating,
     isNativeShadowDefined,
@@ -89,6 +86,7 @@ import {
     setText,
     ssr,
     addEventListener,
+    toggleStyleSheet,
 } from './renderer';
 
 setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElement);
@@ -113,8 +111,6 @@ setGetLastElementChild(getLastElementChild);
 setGetProperty(getProperty);
 setHTMLElement(HTMLElement);
 setInsert(insert);
-setInsertGlobalStylesheet(insertGlobalStylesheet);
-setInsertStylesheet(insertStylesheet);
 setIsConnected(isConnected);
 setIsHydrating(isHydrating);
 setIsNativeShadowDefined(isNativeShadowDefined);
@@ -131,3 +127,4 @@ setSetProperty(setProperty);
 setSetText(setText);
 setSsr(ssr);
 setAddEventListener(addEventListener);
+setToggleStyleSheet(toggleStyleSheet);

packages/@lwc/engine-dom/src/renderer.ts

@@ -11,39 +11,13 @@ import {
     hasOwnProperty,
     htmlPropertyToAttribute,
     globalThis,
-    isFunction,
     isUndefined,
-    isArray,
     KEY__IS_NATIVE_SHADOW_ROOT_DEFINED,
     KEY__SHADOW_TOKEN,
     setPrototypeOf,
     StringToLowerCase,
-    getOwnPropertyDescriptor,
 } from '@lwc/shared';
-
-const globalStylesheets: { [content: string]: true } = create(null);
-
-if (process.env.NODE_ENV === 'development') {
-    // @ts-ignore
-    window.__lwcResetGlobalStylesheets = () => {
-        for (const key of Object.keys(globalStylesheets)) {
-            delete globalStylesheets[key];
-        }
-    };
-}
-
-const globalStylesheetsParentElement: Element = document.head || document.body || document;
-// This check for constructable stylesheets is similar to Fast's:
-// https://github.com/microsoft/fast/blob/d49d1ec/packages/web-components/fast-element/src/dom.ts#L51-L53
-// See also: https://github.com/whatwg/webidl/issues/1027#issuecomment-934510070
-const supportsConstructableStyleSheets =
-    isFunction(CSSStyleSheet.prototype.replaceSync) && isArray(document.adoptedStyleSheets);
-const supportsMutableAdoptedStyleSheets =
-    supportsConstructableStyleSheets &&
-    getOwnPropertyDescriptor(document.adoptedStyleSheets, 'length')!.writable;
-const styleElements: { [content: string]: HTMLStyleElement } = create(null);
-const styleSheets: { [content: string]: CSSStyleSheet } = create(null);
-const shadowRootsToStyleSheets = new WeakMap<ShadowRoot, { [content: string]: true }>();
+export { toggleStyleSheet } from './styles';
 
 export let getCustomElement: any;
 export let defineCustomElement: any;
@@ -72,53 +46,6 @@ function isCustomElementRegistryAvailable() {
     }
 }
 
-function insertConstructableStyleSheet(content: string, target: ShadowRoot) {
-    // It's important for CSSStyleSheets to be unique based on their content, so that
-    // `shadowRoot.adoptedStyleSheets.includes(sheet)` works.
-    let styleSheet = styleSheets[content];
-    if (isUndefined(styleSheet)) {
-        styleSheet = new CSSStyleSheet();
-        styleSheet.replaceSync(content);
-        styleSheets[content] = styleSheet;
-    }
-    const { adoptedStyleSheets } = target;
-    if (!adoptedStyleSheets.includes(styleSheet)) {
-        if (supportsMutableAdoptedStyleSheets) {
-            // This is only supported in later versions of Chromium:
-            // https://chromestatus.com/feature/5638996492288000
-            adoptedStyleSheets.push(styleSheet);
-        } else {
-            target.adoptedStyleSheets = [...adoptedStyleSheets, styleSheet];
-        }
-    }
-}
-
-function insertStyleElement(content: string, target: ShadowRoot) {
-    // Avoid inserting duplicate `<style>`s
-    let sheets = shadowRootsToStyleSheets.get(target);
-    if (isUndefined(sheets)) {
-        sheets = create(null);
-        shadowRootsToStyleSheets.set(target, sheets!);
-    }
-    if (sheets![content]) {
-        return;
-    }
-    sheets![content] = true;
-
-    // This `<style>` may be repeated multiple times in the DOM, so cache it. It's a bit
-    // faster to call `cloneNode()` on an existing node than to recreate it every time.
-    let elm = styleElements[content];
-    if (isUndefined(elm)) {
-        elm = document.createElement('style');
-        elm.type = 'text/css';
-        elm.textContent = content;
-        styleElements[content] = elm;
-    } else {
-        elm = elm.cloneNode(true) as HTMLStyleElement;
-    }
-    target.appendChild(elm);
-}
-
 if (isCustomElementRegistryAvailable()) {
     getCustomElement = customElements.get.bind(customElements);
     defineCustomElement = customElements.define.bind(customElements);
@@ -349,29 +276,6 @@ export function isConnected(node: Node): boolean {
     return node.isConnected;
 }
 
-export function insertGlobalStylesheet(content: string): void {
-    if (!isUndefined(globalStylesheets[content])) {
-        return;
-    }
-
-    globalStylesheets[content] = true;
-
-    const elm = document.createElement('style');
-    elm.type = 'text/css';
-    elm.textContent = content;
-
-    globalStylesheetsParentElement.appendChild(elm);
-}
-
-export function insertStylesheet(content: string, target: ShadowRoot): void {
-    if (supportsConstructableStyleSheets) {
-        insertConstructableStyleSheet(content, target);
-    } else {
-        // Fall back to <style> element
-        insertStyleElement(content, target);
-    }
-}
-
 export function assertInstanceOfHTMLElement(elm: any, msg: string) {
     assert.invariant(elm instanceof HTMLElement, msg);
 }