@lwc/engine-core 6.5.1 → 6.5.3

package/dist/index.cjs.js

@@ -2057,7 +2057,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
 }
 
 /*
- * Copyright (c) 2023, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -2216,7 +2216,8 @@ function installWireAdapters(vm) {
         vm.debugInfo[WIRE_DEBUG_ENTRY] = shared.create(null);
     }
     const wiredConnecting = (context.wiredConnecting = []);
-    const wiredDisconnecting = (context.wiredDisconnecting = []);
+    const wiredDisconnecting = (context.wiredDisconnecting =
+        []);
     for (const fieldNameOrMethod in wire) {
         const descriptor = wire[fieldNameOrMethod];
         const wireDef = WireMetaMap.get(descriptor);
@@ -2717,7 +2718,7 @@ function sanitizeAttribute(tagName, namespaceUri, attrName, attrValue) {
 }
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -2911,6 +2912,296 @@ const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, baseP
 shared.freeze(BaseBridgeElement);
 shared.seal(BaseBridgeElement.prototype);
 
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+// These are only used for HMR in dev mode
+// The "pure" annotations are so that Rollup knows for sure it can remove these from prod mode
+let stylesheetsToCssContent = /*@__PURE__@*/ new WeakMap();
+let cssContentToAbortControllers = /*@__PURE__@*/ new Map();
+// Only used in LWC's Karma tests
+if (process.env.NODE_ENV === 'test-karma-lwc') {
+    // Used to reset the global state between test runs
+    window.__lwcResetStylesheetCache = () => {
+        stylesheetsToCssContent = new WeakMap();
+        cssContentToAbortControllers = new Map();
+    };
+}
+function linkStylesheetToCssContentInDevMode(stylesheet, cssContent) {
+    // Should never leak to prod; only used for HMR
+    assertNotProd();
+    let cssContents = stylesheetsToCssContent.get(stylesheet);
+    if (shared.isUndefined(cssContents)) {
+        cssContents = new Set();
+        stylesheetsToCssContent.set(stylesheet, cssContents);
+    }
+    cssContents.add(cssContent);
+}
+function getOrCreateAbortControllerInDevMode(cssContent) {
+    // Should never leak to prod; only used for HMR
+    assertNotProd();
+    let abortController = cssContentToAbortControllers.get(cssContent);
+    if (shared.isUndefined(abortController)) {
+        abortController = new AbortController();
+        cssContentToAbortControllers.set(cssContent, abortController);
+    }
+    return abortController;
+}
+function getOrCreateAbortSignal(cssContent) {
+    // abort controller/signal is only used for HMR in development
+    if (process.env.NODE_ENV !== 'production') {
+        return getOrCreateAbortControllerInDevMode(cssContent).signal;
+    }
+    return undefined;
+}
+function makeHostToken(token) {
+    // Note: if this ever changes, update the `cssScopeTokens` returned by `@lwc/compiler`
+    return `${token}-host`;
+}
+function createInlineStyleVNode(content) {
+    return api.h('style', {
+        key: 'style', // special key
+        attrs: {
+            type: 'text/css',
+        },
+    }, [api.t(content)]);
+}
+// TODO [#3733]: remove support for legacy scope tokens
+function updateStylesheetToken(vm, template, legacy) {
+    const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
+    const { stylesheets: newStylesheets } = template;
+    const newStylesheetToken = legacy ? template.legacyStylesheetToken : template.stylesheetToken;
+    const { stylesheets: newVmStylesheets } = vm;
+    const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
+    const { hasScopedStyles } = context;
+    let newToken;
+    let newHasTokenInClass;
+    let newHasTokenInAttribute;
+    // Reset the styling token applied to the host element.
+    let oldToken;
+    let oldHasTokenInClass;
+    let oldHasTokenInAttribute;
+    if (legacy) {
+        oldToken = context.legacyStylesheetToken;
+        oldHasTokenInClass = context.hasLegacyTokenInClass;
+        oldHasTokenInAttribute = context.hasLegacyTokenInAttribute;
+    }
+    else {
+        oldToken = context.stylesheetToken;
+        oldHasTokenInClass = context.hasTokenInClass;
+        oldHasTokenInAttribute = context.hasTokenInAttribute;
+    }
+    if (!shared.isUndefined(oldToken)) {
+        if (oldHasTokenInClass) {
+            getClassList(elm).remove(makeHostToken(oldToken));
+        }
+        if (oldHasTokenInAttribute) {
+            removeAttribute(elm, makeHostToken(oldToken));
+        }
+    }
+    // Apply the new template styling token to the host element, if the new template has any
+    // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
+    const hasNewStylesheets = hasStyles(newStylesheets);
+    const hasNewVmStylesheets = hasStyles(newVmStylesheets);
+    if (hasNewStylesheets || hasNewVmStylesheets) {
+        newToken = newStylesheetToken;
+    }
+    // Set the new styling token on the host element
+    if (!shared.isUndefined(newToken)) {
+        if (hasScopedStyles) {
+            getClassList(elm).add(makeHostToken(newToken));
+            newHasTokenInClass = true;
+        }
+        if (isSyntheticShadow) {
+            setAttribute(elm, makeHostToken(newToken), '');
+            newHasTokenInAttribute = true;
+        }
+    }
+    // Update the styling tokens present on the context object.
+    if (legacy) {
+        context.legacyStylesheetToken = newToken;
+        context.hasLegacyTokenInClass = newHasTokenInClass;
+        context.hasLegacyTokenInAttribute = newHasTokenInAttribute;
+    }
+    else {
+        context.stylesheetToken = newToken;
+        context.hasTokenInClass = newHasTokenInClass;
+        context.hasTokenInAttribute = newHasTokenInAttribute;
+    }
+}
+function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
+    const content = [];
+    let root;
+    for (let i = 0; i < stylesheets.length; i++) {
+        let stylesheet = stylesheets[i];
+        if (shared.isArray(stylesheet)) {
+            shared.ArrayPush.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+        }
+        else {
+            if (process.env.NODE_ENV !== 'production') {
+                // Check for compiler version mismatch in dev mode only
+                checkVersionMismatch(stylesheet, 'stylesheet');
+                // in dev-mode, we support hot swapping of stylesheet, which means that
+                // the component instance might be attempting to use an old version of
+                // the stylesheet, while internally, we have a replacement for it.
+                stylesheet = getStyleOrSwappedStyle(stylesheet);
+            }
+            const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
+            if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS &&
+                !isScopedCss &&
+                vm.renderMode === 0 /* RenderMode.Light */) {
+                logError('Unscoped CSS is not supported in Light DOM in this environment. Please use scoped CSS ' +
+                    '(*.scoped.css) instead of unscoped CSS (*.css). See also: https://sfdc.co/scoped-styles-light-dom');
+                continue;
+            }
+            // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+            const scopeToken = isScopedCss ||
+                (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
+                ? stylesheetToken
+                : undefined;
+            // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+            // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+            const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
+                ? !isScopedCss
+                : vm.shadowMode === 0 /* ShadowMode.Native */;
+            // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+            // we use an attribute selector on the host to simulate :dir().
+            let useNativeDirPseudoclass;
+            if (vm.renderMode === 1 /* RenderMode.Shadow */) {
+                useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
+            }
+            else {
+                // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+                // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+                if (shared.isUndefined(root)) {
+                    // Only calculate the root once as necessary
+                    root = getNearestShadowComponent(vm);
+                }
+                useNativeDirPseudoclass = shared.isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
+            }
+            const cssContent = stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass);
+            if (process.env.NODE_ENV !== 'production') {
+                linkStylesheetToCssContentInDevMode(stylesheet, cssContent);
+            }
+            shared.ArrayPush.call(content, cssContent);
+        }
+    }
+    return content;
+}
+function getStylesheetsContent(vm, template) {
+    const { stylesheets, stylesheetToken } = template;
+    const { stylesheets: vmStylesheets } = vm;
+    let content = [];
+    if (hasStyles(stylesheets)) {
+        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+    }
+    // VM (component) stylesheets apply after template stylesheets
+    if (hasStyles(vmStylesheets)) {
+        shared.ArrayPush.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+    }
+    return content;
+}
+// It might be worth caching this to avoid doing the lookup repeatedly, but
+// perf testing has not shown it to be a huge improvement yet:
+// https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
+function getNearestShadowComponent(vm) {
+    let owner = vm;
+    while (!shared.isNull(owner)) {
+        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
+            return owner;
+        }
+        owner = owner.owner;
+    }
+    return owner;
+}
+/**
+ * If the component that is currently being rendered uses scoped styles,
+ * this returns the unique token for that scoped stylesheet. Otherwise
+ * it returns null.
+ * @param owner
+ * @param legacy
+ */
+// TODO [#3733]: remove support for legacy scope tokens
+function getScopeTokenClass(owner, legacy) {
+    const { cmpTemplate, context } = owner;
+    return ((context.hasScopedStyles &&
+        (legacy ? cmpTemplate?.legacyStylesheetToken : cmpTemplate?.stylesheetToken)) ||
+        null);
+}
+/**
+ * This function returns the host style token for a custom element if it
+ * exists. Otherwise it returns null.
+ *
+ * A host style token is applied to the component if scoped styles are used.
+ * @param vnode
+ */
+function getStylesheetTokenHost(vnode) {
+    const { template } = getComponentInternalDef(vnode.ctor);
+    const { vm } = vnode;
+    const { stylesheetToken } = template;
+    return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template, vm)
+        ? makeHostToken(stylesheetToken)
+        : null;
+}
+function getNearestNativeShadowComponent(vm) {
+    const owner = getNearestShadowComponent(vm);
+    if (!shared.isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
+        // Synthetic-within-native is impossible. So if the nearest shadow component is
+        // synthetic, we know we won't find a native component if we go any further.
+        return null;
+    }
+    return owner;
+}
+function createStylesheet(vm, stylesheets) {
+    const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
+    if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
+        for (let i = 0; i < stylesheets.length; i++) {
+            const stylesheet = stylesheets[i];
+            insertStylesheet(stylesheet, undefined, getOrCreateAbortSignal(stylesheet));
+        }
+    }
+    else if (!process.env.IS_BROWSER || 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
+        return shared.ArrayMap.call(stylesheets, createInlineStyleVNode);
+    }
+    else {
+        // native shadow or light DOM, DOM renderer
+        const root = getNearestNativeShadowComponent(vm);
+        // null root means a global style
+        const target = shared.isNull(root) ? undefined : root.shadowRoot;
+        for (let i = 0; i < stylesheets.length; i++) {
+            const stylesheet = stylesheets[i];
+            insertStylesheet(stylesheet, target, getOrCreateAbortSignal(stylesheet));
+        }
+    }
+    return null;
+}
+function unrenderStylesheet(stylesheet) {
+    // should never leak to prod; only used for HMR
+    assertNotProd();
+    const cssContents = stylesheetsToCssContent.get(stylesheet);
+    /* istanbul ignore if */
+    if (shared.isUndefined(cssContents)) {
+        throw new Error('Cannot unrender stylesheet which was never rendered');
+    }
+    for (const cssContent of cssContents) {
+        const abortController = cssContentToAbortControllers.get(cssContent);
+        /* istanbul ignore if */
+        if (shared.isUndefined(abortController)) {
+            throw new Error('Cannot find AbortController for CSS content');
+        }
+        abortController.abort();
+        // remove association with AbortController in case stylesheet is rendered again
+        cssContentToAbortControllers.delete(cssContent);
+    }
+}
+
 /*
  * Copyright (c) 2023, salesforce.com, inc.
  * All rights reserved.
@@ -3004,16 +3295,31 @@ const WeakMultiMap = supportsWeakRefs ? ModernWeakMultiMap : LegacyWeakMultiMap;
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const swappedTemplateMap = new WeakMap();
-const swappedComponentMap = new WeakMap();
-const swappedStyleMap = new WeakMap();
+let swappedTemplateMap = /*@__PURE__@*/ new WeakMap();
+let swappedComponentMap = 
+/*@__PURE__@*/ new WeakMap();
+let swappedStyleMap = /*@__PURE__@*/ new WeakMap();
 // The important thing here is the weak values – VMs are transient (one per component instance) and should be GC'ed,
 // so we don't want to create strong references to them.
 // The weak keys are kind of useless, because Templates, LightningElementConstructors, and StylesheetFactories are
 // never GC'ed. But maybe they will be someday, so we may as well use weak keys too.
-const activeTemplates = new WeakMultiMap();
-const activeComponents = new WeakMultiMap();
-const activeStyles = new WeakMultiMap();
+// The "pure" annotations are so that Rollup knows for sure it can remove these from prod mode
+let activeTemplates = /*@__PURE__@*/ new WeakMultiMap();
+let activeComponents = 
+/*@__PURE__@*/ new WeakMultiMap();
+let activeStyles = /*@__PURE__@*/ new WeakMultiMap();
+// Only used in LWC's Karma tests
+if (process.env.NODE_ENV === 'test-karma-lwc') {
+    // Used to reset the global state between test runs
+    window.__lwcResetHotSwaps = () => {
+        swappedTemplateMap = new WeakMap();
+        swappedComponentMap = new WeakMap();
+        swappedStyleMap = new WeakMap();
+        activeTemplates = new WeakMultiMap();
+        activeComponents = new WeakMultiMap();
+        activeStyles = new WeakMultiMap();
+    };
+}
 function rehydrateHotTemplate(tpl) {
     const list = activeTemplates.get(tpl);
     for (const vm of list) {
@@ -3029,8 +3335,9 @@ function rehydrateHotTemplate(tpl) {
     return true;
 }
 function rehydrateHotStyle(style) {
-    const list = activeStyles.get(style);
-    for (const vm of list) {
+    const activeVMs = activeStyles.get(style);
+    unrenderStylesheet(style);
+    for (const vm of activeVMs) {
         // if a style definition is swapped, we must reset
         // vm's template content in the next micro-task:
         forceRehydration(vm);
@@ -3067,6 +3374,7 @@ function rehydrateHotComponent(Ctor) {
 }
 function getTemplateOrSwappedTemplate(tpl) {
     assertNotProd(); // this method should never leak to prod
+    // TODO [#4154]: shows stale content when swapping content back and forth multiple times
     const visited = new Set();
     while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
         visited.add(tpl);
@@ -3076,6 +3384,7 @@ function getTemplateOrSwappedTemplate(tpl) {
 }
 function getComponentOrSwappedComponent(Ctor) {
     assertNotProd(); // this method should never leak to prod
+    // TODO [#4154]: shows stale content when swapping content back and forth multiple times
     const visited = new Set();
     while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
         visited.add(Ctor);
@@ -3085,6 +3394,7 @@ function getComponentOrSwappedComponent(Ctor) {
 }
 function getStyleOrSwappedStyle(style) {
     assertNotProd(); // this method should never leak to prod
+    // TODO [#4154]: shows stale content when swapping content back and forth multiple times
     const visited = new Set();
     while (swappedStyleMap.has(style) && !visited.has(style)) {
         visited.add(style);
@@ -3092,6 +3402,22 @@ function getStyleOrSwappedStyle(style) {
     }
     return style;
 }
+function addActiveStylesheets(stylesheets, vm) {
+    if (shared.isUndefined(stylesheets) || shared.isNull(stylesheets)) {
+        // Ignore non-existent stylesheets
+        return;
+    }
+    for (const stylesheet of flattenStylesheets(stylesheets)) {
+        // this is necessary because we don't hold the list of styles
+        // in the vm, we only hold the selected (already swapped template)
+        // but the styles attached to the template might not be the actual
+        // active ones, but the swapped versions of those.
+        const swappedStylesheet = getStyleOrSwappedStyle(stylesheet);
+        // this will allow us to keep track of the stylesheet that are
+        // being used by a hot component
+        activeStyles.add(swappedStylesheet, vm);
+    }
+}
 function setActiveVM(vm) {
     assertNotProd(); // this method should never leak to prod
     // tracking active component
@@ -3099,25 +3425,15 @@ function setActiveVM(vm) {
     // this will allow us to keep track of the hot components
     activeComponents.add(Ctor, vm);
     // tracking active template
-    const tpl = vm.cmpTemplate;
-    if (tpl) {
+    const template = vm.cmpTemplate;
+    if (!shared.isNull(template)) {
         // this will allow us to keep track of the templates that are
         // being used by a hot component
-        activeTemplates.add(tpl, vm);
-        // tracking active styles associated to template
-        const stylesheets = tpl.stylesheets;
-        if (!shared.isUndefined(stylesheets)) {
-            for (const stylesheet of flattenStylesheets(stylesheets)) {
-                // this is necessary because we don't hold the list of styles
-                // in the vm, we only hold the selected (already swapped template)
-                // but the styles attached to the template might not be the actual
-                // active ones, but the swapped versions of those.
-                const swappedStylesheet = getStyleOrSwappedStyle(stylesheet);
-                // this will allow us to keep track of the stylesheet that are
-                // being used by a hot component
-                activeStyles.add(swappedStylesheet, vm);
-            }
-        }
+        activeTemplates.add(template, vm);
+        // Tracking active styles from the template or the VM. `template.stylesheets` are implicitly associated
+        // (e.g. `foo.css` associated with `foo.html`), whereas `vm.stylesheets` are from `static stylesheets`.
+        addActiveStylesheets(template.stylesheets, vm);
+        addActiveStylesheets(vm.stylesheets, vm);
     }
 }
 function swapTemplate(oldTpl, newTpl) {
@@ -3400,233 +3716,7 @@ function getComponentDef(Ctor) {
 }
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
-function makeHostToken(token) {
-    // Note: if this ever changes, update the `cssScopeTokens` returned by `@lwc/compiler`
-    return `${token}-host`;
-}
-function createInlineStyleVNode(content) {
-    return api.h('style', {
-        key: 'style', // special key
-        attrs: {
-            type: 'text/css',
-        },
-    }, [api.t(content)]);
-}
-// TODO [#3733]: remove support for legacy scope tokens
-function updateStylesheetToken(vm, template, legacy) {
-    const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-    const { stylesheets: newStylesheets } = template;
-    const newStylesheetToken = legacy ? template.legacyStylesheetToken : template.stylesheetToken;
-    const { stylesheets: newVmStylesheets } = vm;
-    const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
-    const { hasScopedStyles } = context;
-    let newToken;
-    let newHasTokenInClass;
-    let newHasTokenInAttribute;
-    // Reset the styling token applied to the host element.
-    let oldToken;
-    let oldHasTokenInClass;
-    let oldHasTokenInAttribute;
-    if (legacy) {
-        oldToken = context.legacyStylesheetToken;
-        oldHasTokenInClass = context.hasLegacyTokenInClass;
-        oldHasTokenInAttribute = context.hasLegacyTokenInAttribute;
-    }
-    else {
-        oldToken = context.stylesheetToken;
-        oldHasTokenInClass = context.hasTokenInClass;
-        oldHasTokenInAttribute = context.hasTokenInAttribute;
-    }
-    if (!shared.isUndefined(oldToken)) {
-        if (oldHasTokenInClass) {
-            getClassList(elm).remove(makeHostToken(oldToken));
-        }
-        if (oldHasTokenInAttribute) {
-            removeAttribute(elm, makeHostToken(oldToken));
-        }
-    }
-    // Apply the new template styling token to the host element, if the new template has any
-    // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-    const hasNewStylesheets = hasStyles(newStylesheets);
-    const hasNewVmStylesheets = hasStyles(newVmStylesheets);
-    if (hasNewStylesheets || hasNewVmStylesheets) {
-        newToken = newStylesheetToken;
-    }
-    // Set the new styling token on the host element
-    if (!shared.isUndefined(newToken)) {
-        if (hasScopedStyles) {
-            getClassList(elm).add(makeHostToken(newToken));
-            newHasTokenInClass = true;
-        }
-        if (isSyntheticShadow) {
-            setAttribute(elm, makeHostToken(newToken), '');
-            newHasTokenInAttribute = true;
-        }
-    }
-    // Update the styling tokens present on the context object.
-    if (legacy) {
-        context.legacyStylesheetToken = newToken;
-        context.hasLegacyTokenInClass = newHasTokenInClass;
-        context.hasLegacyTokenInAttribute = newHasTokenInAttribute;
-    }
-    else {
-        context.stylesheetToken = newToken;
-        context.hasTokenInClass = newHasTokenInClass;
-        context.hasTokenInAttribute = newHasTokenInAttribute;
-    }
-}
-function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
-    const content = [];
-    let root;
-    for (let i = 0; i < stylesheets.length; i++) {
-        let stylesheet = stylesheets[i];
-        if (shared.isArray(stylesheet)) {
-            shared.ArrayPush.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
-        }
-        else {
-            if (process.env.NODE_ENV !== 'production') {
-                // Check for compiler version mismatch in dev mode only
-                checkVersionMismatch(stylesheet, 'stylesheet');
-                // in dev-mode, we support hot swapping of stylesheet, which means that
-                // the component instance might be attempting to use an old version of
-                // the stylesheet, while internally, we have a replacement for it.
-                stylesheet = getStyleOrSwappedStyle(stylesheet);
-            }
-            const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
-            if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS &&
-                !isScopedCss &&
-                vm.renderMode === 0 /* RenderMode.Light */) {
-                logError('Unscoped CSS is not supported in Light DOM in this environment. Please use scoped CSS ' +
-                    '(*.scoped.css) instead of unscoped CSS (*.css). See also: https://sfdc.co/scoped-styles-light-dom');
-                continue;
-            }
-            // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-            const scopeToken = isScopedCss ||
-                (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
-                ? stylesheetToken
-                : undefined;
-            // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
-            // native shadow DOM. Synthetic shadow DOM never uses `:host`.
-            const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
-                ? !isScopedCss
-                : vm.shadowMode === 0 /* ShadowMode.Native */;
-            // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
-            // we use an attribute selector on the host to simulate :dir().
-            let useNativeDirPseudoclass;
-            if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-                useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
-            }
-            else {
-                // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
-                // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-                if (shared.isUndefined(root)) {
-                    // Only calculate the root once as necessary
-                    root = getNearestShadowComponent(vm);
-                }
-                useNativeDirPseudoclass = shared.isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-            }
-            shared.ArrayPush.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
-        }
-    }
-    return content;
-}
-function getStylesheetsContent(vm, template) {
-    const { stylesheets, stylesheetToken } = template;
-    const { stylesheets: vmStylesheets } = vm;
-    let content = [];
-    if (hasStyles(stylesheets)) {
-        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-    }
-    // VM (component) stylesheets apply after template stylesheets
-    if (hasStyles(vmStylesheets)) {
-        shared.ArrayPush.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
-    }
-    return content;
-}
-// It might be worth caching this to avoid doing the lookup repeatedly, but
-// perf testing has not shown it to be a huge improvement yet:
-// https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
-function getNearestShadowComponent(vm) {
-    let owner = vm;
-    while (!shared.isNull(owner)) {
-        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-            return owner;
-        }
-        owner = owner.owner;
-    }
-    return owner;
-}
-/**
- * If the component that is currently being rendered uses scoped styles,
- * this returns the unique token for that scoped stylesheet. Otherwise
- * it returns null.
- * @param owner
- * @param legacy
- */
-// TODO [#3733]: remove support for legacy scope tokens
-function getScopeTokenClass(owner, legacy) {
-    const { cmpTemplate, context } = owner;
-    return ((context.hasScopedStyles &&
-        (legacy ? cmpTemplate?.legacyStylesheetToken : cmpTemplate?.stylesheetToken)) ||
-        null);
-}
-/**
- * This function returns the host style token for a custom element if it
- * exists. Otherwise it returns null.
- *
- * A host style token is applied to the component if scoped styles are used.
- * @param vnode
- */
-function getStylesheetTokenHost(vnode) {
-    const { template } = getComponentInternalDef(vnode.ctor);
-    const { vm } = vnode;
-    const { stylesheetToken } = template;
-    return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template, vm)
-        ? makeHostToken(stylesheetToken)
-        : null;
-}
-function getNearestNativeShadowComponent(vm) {
-    const owner = getNearestShadowComponent(vm);
-    if (!shared.isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        // Synthetic-within-native is impossible. So if the nearest shadow component is
-        // synthetic, we know we won't find a native component if we go any further.
-        return null;
-    }
-    return owner;
-}
-function createStylesheet(vm, stylesheets) {
-    const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
-    if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i]);
-        }
-    }
-    else if (!process.env.IS_BROWSER || 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
-        return shared.ArrayMap.call(stylesheets, createInlineStyleVNode);
-    }
-    else {
-        // native shadow or light DOM, DOM renderer
-        const root = getNearestNativeShadowComponent(vm);
-        // null root means a global style
-        const target = shared.isNull(root) ? undefined : root.shadowRoot;
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i], target);
-        }
-    }
-    return null;
-}
-
-/*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -4146,7 +4236,7 @@ function hydrateStaticParts(vnode, renderer) {
 }
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -4916,7 +5006,7 @@ function updateStaticChildren(c1, c2, parent, renderer) {
 }
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -5198,6 +5288,7 @@ function i(iterable, factory) {
             shared.ArrayPush.apply(list, vnode);
         }
         else {
+            // `isArray` doesn't narrow this block properly...
             shared.ArrayPush.call(list, vnode);
         }
         if (process.env.NODE_ENV !== 'production') {
@@ -5249,6 +5340,7 @@ function f(items) {
             shared.ArrayPush.apply(flattened, item);
         }
         else {
+            // `isArray` doesn't narrow this block properly...
             shared.ArrayPush.call(flattened, item);
         }
     }
@@ -5578,7 +5670,7 @@ function logGlobalOperationEnd(opId, vm) {
 }
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -7549,7 +7641,7 @@ function setHooks(hooks) {
 }
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, Inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -7617,9 +7709,9 @@ function warnOnArrayMutation(stylesheets) {
     // we can at least warn when they use the most common mutation methods.
     for (const prop of ARRAY_MUTATION_METHODS) {
         const originalArrayMethod = getOriginalArrayMethod(prop);
+        // Assertions used here because TypeScript can't handle mapping over our types
         stylesheets[prop] = function arrayMutationWarningWrapper() {
             reportTemplateViolation('stylesheets');
-            // @ts-expect-error can't properly determine the right `this`
             return originalArrayMethod.apply(this, arguments);
         };
     }
@@ -7848,5 +7940,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 6.5.1 */
+/** version: 6.5.3 */
 //# sourceMappingURL=index.cjs.js.map