@vaadin/vaadin-themable-mixin 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-themable-mixin.js",
   "module": "vaadin-themable-mixin.js",
+  "type": "module",
   "files": [
     "*.d.ts",
     "register-styles.js",
@@ -39,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

package/register-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export { registerStyles, css, unsafeCSS } from './vaadin-themable-mixin.js';

package/register-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export { registerStyles, css, unsafeCSS } from './vaadin-themable-mixin.js';

package/vaadin-themable-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/vaadin-themable-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css, CSSResult, unsafeCSS } from 'lit';
@@ -35,8 +35,7 @@ const themeRegistry = [];
  */
 export function registerStyles(themeFor, styles, options = {}) {
   if (themeFor) {
-    const elementClass = customElements.get(themeFor);
-    if (elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__finalized')) {
+    if (hasThemes(themeFor)) {
       console.warn(`The custom element definition for "${themeFor}"
       was finalized before a style module was registered.
       Make sure to add component specific style modules before
@@ -44,7 +43,7 @@ export function registerStyles(themeFor, styles, options = {}) {
     }
   }
 
-  styles = recursiveFlattenStyles(styles);
+  styles = flattenStyles(styles);
 
   if (window.Vaadin && window.Vaadin.styleModules) {
     window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
@@ -59,16 +58,15 @@ export function registerStyles(themeFor, styles, options = {}) {
 }
 
 /**
- * Returns all registered themes. By default the themeRegistry is returend as is.
+ * Returns all registered themes. By default the themeRegistry is returned as is.
  * In case the style-modules adapter is imported, the themes are obtained from there instead
  * @returns {Theme[]}
  */
 function getAllThemes() {
   if (window.Vaadin && window.Vaadin.styleModules) {
     return window.Vaadin.styleModules.getAllThemes();
-  } else {
-    return themeRegistry;
   }
+  return themeRegistry;
 }
 
 /**
@@ -105,15 +103,14 @@ function getIncludePriority(moduleName = '') {
  * @param {CSSResult[]} result
  * @returns {CSSResult[]}
  */
-function recursiveFlattenStyles(styles = [], result = []) {
-  if (styles instanceof CSSResult) {
-    result.push(styles);
-  } else if (Array.isArray(styles)) {
-    styles.forEach((style) => recursiveFlattenStyles(style, result));
-  } else {
+function flattenStyles(styles = []) {
+  return [styles].flat(Infinity).filter((style) => {
+    if (style instanceof CSSResult) {
+      return true;
+    }
     console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
-  }
-  return result;
+    return false;
+  });
 }
 
 /**
@@ -143,11 +140,7 @@ function getIncludedStyles(theme) {
  */
 function addStylesToTemplate(styles, template) {
   const styleEl = document.createElement('style');
-  styleEl.innerHTML = styles
-    // Remove duplicates so that the last occurrence remains
-    .filter((style, index) => index === styles.lastIndexOf(style))
-    .map((style) => style.cssText)
-    .join('\n');
+  styleEl.innerHTML = styles.map((style) => style.cssText).join('\n');
   template.content.appendChild(styleEl);
 }
 
@@ -175,10 +168,19 @@ function getThemes(tagName) {
 
   if (themes.length > 0) {
     return themes;
-  } else {
-    // No theme modules found, return the default module if it exists
-    return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
   }
+  // No theme modules found, return the default module if it exists
+  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
+}
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function hasThemes(tagName) {
+  const elementClass = customElements.get(tagName);
+  return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
 }
 
 /**
@@ -195,35 +197,38 @@ export const ThemableMixin = (superClass) =>
       super.finalize();
 
       const template = this.prototype._template;
-      if (!template || template.__themes) {
+      if (!template || hasThemes(this.is)) {
         return;
       }
 
-      const inheritedTemplate = Object.getPrototypeOf(this.prototype)._template;
-      const inheritedThemes = (inheritedTemplate ? inheritedTemplate.__themes : []) || [];
-
-      template.__themes = [...inheritedThemes, ...getThemes(this.is)];
-
-      // Get flattened styles array
-      const styles = template.__themes.reduce((styles, theme) => [...styles, ...theme.styles], []);
-      addStylesToTemplate(styles, template);
+      addStylesToTemplate(this.getStylesForThis(), template);
     }
 
     /**
      * Covers LitElement based component styling
      *
-     * NOTE: This is not yet an offically supported API!
-     *
-     * TODO: Add tests (run a variation of themable-mixin.test.js where the components get created as LitElements)
      * @protected
      */
     static finalizeStyles(styles) {
-      return (
-        getThemes(this.is)
-          // Get flattened styles array
-          .reduce((styles, theme) => [...styles, ...theme.styles], [])
-          .concat(styles)
-      );
+      // The "styles" object originates from the "static get styles()" function of
+      // a LitElement based component. The theme styles are added after it
+      // so that they can override the component styles.
+      const themeStyles = this.getStylesForThis();
+      return styles ? [styles, ...themeStyles] : themeStyles;
+    }
+
+    /**
+     * Get styles for the component type
+     *
+     * @private
+     */
+    static getStylesForThis() {
+      const parent = Object.getPrototypeOf(this.prototype);
+      const inheritedThemes = (parent ? parent.constructor.__themes : []) || [];
+      this.__themes = [...inheritedThemes, ...getThemes(this.is)];
+      const themeStyles = this.__themes.flatMap((theme) => theme.styles);
+      // Remove duplicates
+      return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
     }
   };
 

package/vaadin-theme-property-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/vaadin-theme-property-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /**