lwc 2.24.0 → 2.25.1

package/dist/engine-server/commonjs/es2017/engine-server.js

@@ -436,9 +436,9 @@ function htmlEscape(str, attrMode = false) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.24.0";
+const LWC_VERSION = "2.25.1";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.24.0 */
+/** version: 2.25.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -496,6 +496,7 @@ const features = {
     ENABLE_REACTIVE_SETTER: null,
     ENABLE_WIRE_SYNC_EMIT: null,
     ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
+    DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
 };
 if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -549,7 +550,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.24.0 */
+/** version: 2.25.1 */
 
 /* proxy-compat-disable */
 
@@ -3232,149 +3233,234 @@ 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;
 }
+
 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]);
-        }
+  const {
+    renderMode,
+    shadowMode,
+    renderer: {
+      insertStylesheet
     }
-    else {
-        // 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);
+  } = vm;
+
+  if (renderMode === 1
+  /* RenderMode.Shadow */
+  && shadowMode === 1
+  /* ShadowMode.Synthetic */
+  ) {
+    for (let i = 0; i < stylesheets.length; i++) {
+      insertStylesheet(stylesheets[i]);
     }
-    return null;
+  } else {
+    // 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);
+  }
+
+  return null;
 }
 
 /*
@@ -6411,7 +6497,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.24.0 */
+/* version: 2.25.1 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6781,7 +6867,7 @@ const renderer = {
  */
 function serializeAttributes(attributes) {
     return attributes
-        .map((attr) => attr.value.length ? `${attr.name}=${JSON.stringify(htmlEscape(attr.value))}` : attr.name)
+        .map((attr) => attr.value.length ? `${attr.name}="${htmlEscape(attr.value, true)}"` : attr.name)
         .join(' ');
 }
 function serializeChildNodes(children) {
@@ -6881,7 +6967,7 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.24.0 */
+/* version: 2.25.1 */
 
 exports.LightningElement = LightningElement;
 exports.api = api$1;