@lwc/engine-core 2.25.0 → 2.25.1

package/dist/engine-core.cjs.js

@@ -3003,175 +3003,270 @@ function getComponentDef(Ctor) {
  * 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) {
-    return `${token}-host`;
+  return `${token}-host`;
 }
+
 function createInlineStyleVNode(content) {
-    return api.h('style', {
-        key: 'style',
-        attrs: {
-            type: 'text/css',
-        },
-    }, [api.t(content)]);
+  return api.h('style', {
+    key: 'style',
+    attrs: {
+      type: 'text/css'
+    }
+  }, [api.t(content)]);
 }
+
 function updateStylesheetToken(vm, template) {
-    const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-    const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
-    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.
-    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
-    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.
-    if (!shared.isUndefined(newStylesheets) && newStylesheets.length !== 0) {
-        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.
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
+  const {
+    elm,
+    context,
+    renderMode,
+    shadowMode,
+    renderer: {
+      getClassList,
+      removeAttribute,
+      setAttribute
+    }
+  } = vm;
+  const {
+    stylesheets: newStylesheets,
+    stylesheetToken: newStylesheetToken
+  } = template;
+  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.
+
+  const {
+    stylesheetToken: oldToken,
+    hasTokenInClass: oldHasTokenInClass,
+    hasTokenInAttribute: oldHasTokenInAttribute
+  } = context;
+
+  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.
+
+
+  if (!shared.isUndefined(newStylesheets) && newStylesheets.length !== 0) {
+    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.
+
+
+  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));
+  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 (features.lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS) {
+        if (!isScopedCss && vm.renderMode === 0
+        /* RenderMode.Light */
+        ) {
+          logError('Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).');
+          continue;
         }
-        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];
-            // 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));
+      } // 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;
+  }
+
+  return content;
 }
+
 function getStylesheetsContent(vm, template) {
-    const { stylesheets, stylesheetToken } = template;
-    let content = [];
-    if (!shared.isUndefined(stylesheets) && stylesheets.length !== 0) {
-        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-    }
-    return content;
-}
-// It might be worth caching this to avoid doing the lookup repeatedly, but
+  const {
+    stylesheets,
+    stylesheetToken
+  } = template;
+  let content = [];
+
+  if (!shared.isUndefined(stylesheets) && stylesheets.length !== 0) {
+    content = evaluateStylesheetsContent(stylesheets, 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;
+  let owner = vm;
+
+  while (!shared.isNull(owner)) {
+    if (owner.renderMode === 1
+    /* RenderMode.Shadow */
+    ) {
+      return owner;
     }
-    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.
  */
+
+
 function getScopeTokenClass(owner) {
-    const { cmpTemplate, context } = owner;
-    return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+  const {
+    cmpTemplate,
+    context
+  } = owner;
+  return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
 }
 /**
  * This function returns the host style token for a custom element if it
  * exists. Otherwise it returns null.
  */
+
 function getStylesheetTokenHost(vnode) {
-    const { template: { stylesheetToken }, } = getComponentInternalDef(vnode.ctor);
-    return !shared.isUndefined(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
+  const {
+    template: {
+      stylesheetToken
+    }
+  } = getComponentInternalDef(vnode.ctor);
+  return !shared.isUndefined(stylesheetToken) ? 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;
+  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);
+  const {
+    renderMode,
+    shadowMode,
+    renderer: {
+      insertStylesheet
     }
-    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);
-        }
+  } = 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;
+  }
+
+  return null;
 }
 
 /*
@@ -6852,4 +6947,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.25.0 */
+/* version: 2.25.1 */

package/dist/engine-core.js

@@ -3000,175 +3000,270 @@ function getComponentDef(Ctor) {
  * 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) {
-    return `${token}-host`;
+  return `${token}-host`;
 }
+
 function createInlineStyleVNode(content) {
-    return api.h('style', {
-        key: 'style',
-        attrs: {
-            type: 'text/css',
-        },
-    }, [api.t(content)]);
+  return api.h('style', {
+    key: 'style',
+    attrs: {
+      type: 'text/css'
+    }
+  }, [api.t(content)]);
 }
+
 function updateStylesheetToken(vm, template) {
-    const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-    const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
-    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.
-    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
-    if (!isUndefined$1(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.
-    if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
-        newToken = newStylesheetToken;
-    }
-    // Set the new styling token on the host element
-    if (!isUndefined$1(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.
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
+  const {
+    elm,
+    context,
+    renderMode,
+    shadowMode,
+    renderer: {
+      getClassList,
+      removeAttribute,
+      setAttribute
+    }
+  } = vm;
+  const {
+    stylesheets: newStylesheets,
+    stylesheetToken: newStylesheetToken
+  } = template;
+  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.
+
+  const {
+    stylesheetToken: oldToken,
+    hasTokenInClass: oldHasTokenInClass,
+    hasTokenInAttribute: oldHasTokenInAttribute
+  } = context;
+
+  if (!isUndefined$1(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.
+
+
+  if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+    newToken = newStylesheetToken;
+  } // Set the new styling token on the host element
+
+
+  if (!isUndefined$1(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.
+
+
+  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 (isArray$1(stylesheet)) {
-            ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+  const content = [];
+  let root;
+
+  for (let i = 0; i < stylesheets.length; i++) {
+    let stylesheet = stylesheets[i];
+
+    if (isArray$1(stylesheet)) {
+      ArrayPush$1.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[KEY__SCOPED_CSS];
+
+      if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS) {
+        if (!isScopedCss && vm.renderMode === 0
+        /* RenderMode.Light */
+        ) {
+          logError('Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).');
+          continue;
         }
-        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[KEY__SCOPED_CSS];
-            // 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 (isUndefined$1(root)) {
-                    // Only calculate the root once as necessary
-                    root = getNearestShadowComponent(vm);
-                }
-                useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-            }
-            ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+      } // 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 (isUndefined$1(root)) {
+          // Only calculate the root once as necessary
+          root = getNearestShadowComponent(vm);
         }
+
+        useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
+        /* ShadowMode.Native */
+        ;
+      }
+
+      ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
     }
-    return content;
+  }
+
+  return content;
 }
+
 function getStylesheetsContent(vm, template) {
-    const { stylesheets, stylesheetToken } = template;
-    let content = [];
-    if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-    }
-    return content;
-}
-// It might be worth caching this to avoid doing the lookup repeatedly, but
+  const {
+    stylesheets,
+    stylesheetToken
+  } = template;
+  let content = [];
+
+  if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
+    content = evaluateStylesheetsContent(stylesheets, 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 (!isNull(owner)) {
-        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-            return owner;
-        }
-        owner = owner.owner;
+  let owner = vm;
+
+  while (!isNull(owner)) {
+    if (owner.renderMode === 1
+    /* RenderMode.Shadow */
+    ) {
+      return owner;
     }
-    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.
  */
+
+
 function getScopeTokenClass(owner) {
-    const { cmpTemplate, context } = owner;
-    return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+  const {
+    cmpTemplate,
+    context
+  } = owner;
+  return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
 }
 /**
  * This function returns the host style token for a custom element if it
  * exists. Otherwise it returns null.
  */
+
 function getStylesheetTokenHost(vnode) {
-    const { template: { stylesheetToken }, } = getComponentInternalDef(vnode.ctor);
-    return !isUndefined$1(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
+  const {
+    template: {
+      stylesheetToken
+    }
+  } = getComponentInternalDef(vnode.ctor);
+  return !isUndefined$1(stylesheetToken) ? makeHostToken(stylesheetToken) : null;
 }
+
 function getNearestNativeShadowComponent(vm) {
-    const owner = getNearestShadowComponent(vm);
-    if (!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;
+  const owner = getNearestShadowComponent(vm);
+
+  if (!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 ArrayMap.call(stylesheets, createInlineStyleVNode);
+  const {
+    renderMode,
+    shadowMode,
+    renderer: {
+      insertStylesheet
     }
-    else {
-        // native shadow or light DOM, DOM renderer
-        const root = getNearestNativeShadowComponent(vm);
-        // null root means a global style
-        const target = isNull(root) ? undefined : root.shadowRoot;
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i], target);
-        }
+  } = 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 ArrayMap.call(stylesheets, createInlineStyleVNode);
+  } else {
+    // native shadow or light DOM, DOM renderer
+    const root = getNearestNativeShadowComponent(vm); // null root means a global style
+
+    const target = isNull(root) ? undefined : root.shadowRoot;
+
+    for (let i = 0; i < stylesheets.length; i++) {
+      insertStylesheet(stylesheets[i], target);
     }
-    return null;
+  }
+
+  return null;
 }
 
 /*
@@ -6812,4 +6907,4 @@ function getComponentConstructor(elm) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, getUpgradableConstructor, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.25.0 */
+/* version: 2.25.1 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.25.0",
+    "version": "2.25.1",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,8 +24,8 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.25.0",
-        "@lwc/shared": "2.25.0"
+        "@lwc/features": "2.25.1",
+        "@lwc/shared": "2.25.1"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"