@lwc/engine-core 2.24.0 → 2.25.0

package/dist/engine-core.cjs.js

@@ -3131,6 +3131,14 @@ function getScopeTokenClass(owner) {
     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;
+}
 function getNearestNativeShadowComponent(vm) {
     const owner = getNearestShadowComponent(vm);
     if (!shared.isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
@@ -3248,6 +3256,9 @@ function isVBaseElement(vnode) {
 function isSameVnode(vnode1, vnode2) {
     return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
 }
+function isVCustomElement(vnode) {
+    return vnode.type === 3 /* VNodeType.CustomElement */;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6541,6 +6552,7 @@ function validateClassAttr(vnode, elm, renderer) {
     let { className, classMap } = data;
     const { getProperty, getClassList } = renderer;
     const scopedToken = getScopeTokenClass(owner);
+    const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
     // Classnames for scoped CSS are added directly to the DOM during rendering,
     // or to the VDOM on the server in the case of SSR. As such, these classnames
     // are never present in VDOM nodes in the browser.
@@ -6549,10 +6561,17 @@ function validateClassAttr(vnode, elm, renderer) {
     // are rendered during SSR. This needs to be accounted for when validating.
     if (scopedToken) {
         if (!shared.isUndefined(className)) {
-            className = `${scopedToken} ${className}`;
+            className = shared.isNull(stylesheetTokenHost)
+                ? `${scopedToken} ${className}`
+                : `${scopedToken} ${className} ${stylesheetTokenHost}`;
         }
         else if (!shared.isUndefined(classMap)) {
-            classMap = Object.assign(Object.assign({}, classMap), { [scopedToken]: true });
+            classMap = Object.assign(Object.assign(Object.assign({}, classMap), { [scopedToken]: true }), (shared.isNull(stylesheetTokenHost) ? {} : { [stylesheetTokenHost]: true }));
+        }
+        else {
+            className = shared.isNull(stylesheetTokenHost)
+                ? `${scopedToken}`
+                : `${scopedToken} ${stylesheetTokenHost}`;
         }
     }
     let nodesAreCompatible = true;
@@ -6833,4 +6852,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.24.0 */
+/* version: 2.25.0 */

package/dist/engine-core.js

@@ -3128,6 +3128,14 @@ function getScopeTokenClass(owner) {
     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;
+}
 function getNearestNativeShadowComponent(vm) {
     const owner = getNearestShadowComponent(vm);
     if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
@@ -3245,6 +3253,9 @@ function isVBaseElement(vnode) {
 function isSameVnode(vnode1, vnode2) {
     return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
 }
+function isVCustomElement(vnode) {
+    return vnode.type === 3 /* VNodeType.CustomElement */;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6538,6 +6549,7 @@ function validateClassAttr(vnode, elm, renderer) {
     let { className, classMap } = data;
     const { getProperty, getClassList } = renderer;
     const scopedToken = getScopeTokenClass(owner);
+    const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
     // Classnames for scoped CSS are added directly to the DOM during rendering,
     // or to the VDOM on the server in the case of SSR. As such, these classnames
     // are never present in VDOM nodes in the browser.
@@ -6546,10 +6558,17 @@ function validateClassAttr(vnode, elm, renderer) {
     // are rendered during SSR. This needs to be accounted for when validating.
     if (scopedToken) {
         if (!isUndefined$1(className)) {
-            className = `${scopedToken} ${className}`;
+            className = isNull(stylesheetTokenHost)
+                ? `${scopedToken} ${className}`
+                : `${scopedToken} ${className} ${stylesheetTokenHost}`;
         }
         else if (!isUndefined$1(classMap)) {
-            classMap = Object.assign(Object.assign({}, classMap), { [scopedToken]: true });
+            classMap = Object.assign(Object.assign(Object.assign({}, classMap), { [scopedToken]: true }), (isNull(stylesheetTokenHost) ? {} : { [stylesheetTokenHost]: true }));
+        }
+        else {
+            className = isNull(stylesheetTokenHost)
+                ? `${scopedToken}`
+                : `${scopedToken} ${stylesheetTokenHost}`;
         }
     }
     let nodesAreCompatible = true;
@@ -6793,4 +6812,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.24.0 */
+/* version: 2.25.0 */

package/package.json

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

package/types/framework/stylesheet.d.ts

@@ -1,6 +1,6 @@
 import { VM } from './vm';
 import { Template } from './template';
-import { VNode } from './vnodes';
+import { VCustomElement, VNode } from './vnodes';
 /**
  * Function producing style based on a host and a shadow selector. This function is invoked by
  * the engine with different values depending on the mode that the component is running on.
@@ -20,4 +20,9 @@ export declare function getStylesheetsContent(vm: VM, template: Template): strin
  * it returns null.
  */
 export declare function getScopeTokenClass(owner: VM): string | null;
+/**
+ * This function returns the host style token for a custom element if it
+ * exists. Otherwise it returns null.
+ */
+export declare function getStylesheetTokenHost(vnode: VCustomElement): string | null;
 export declare function createStylesheet(vm: VM, stylesheets: string[]): VNode[] | null;

package/types/framework/vnodes.d.ts

@@ -80,3 +80,4 @@ export interface VElementData extends VNodeData {
 }
 export declare function isVBaseElement(vnode: VNode): vnode is VElement | VCustomElement;
 export declare function isSameVnode(vnode1: VNode, vnode2: VNode): boolean;
+export declare function isVCustomElement(vnode: VBaseElement): vnode is VCustomElement;