@vaadin/vaadin-themable-mixin - npm Package Compare versions

Comparing version 23.0.0-alpha1 to 23.0.0-alpha2

package.json

 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "23.0.0-alpha1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
@@ -42,3 +42,3 @@ "access": "public"
   },
-  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

vaadin-themable-mixin.js

@@ -38,4 +38,3 @@ /**
   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}"
@@ -48,3 +47,3 @@ was finalized before a style module was registered.
 
-  styles = recursiveFlattenStyles(styles);
+  styles = flattenStyles(styles);
 
@@ -71,5 +70,4 @@ if (window.Vaadin && window.Vaadin.styleModules) {
     return window.Vaadin.styleModules.getAllThemes();
-  } else {
-    return themeRegistry;
   }
+  return themeRegistry;
 }
@@ -111,11 +109,10 @@
  */
-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;
+  });
 }
@@ -150,7 +147,3 @@
   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);
@@ -183,9 +176,18 @@ }
     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');
+}
+
+/**
  * @polymerMixin
@@ -204,14 +206,7 @@ * @mixes ThemePropertyMixin
       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);
     }
@@ -222,17 +217,27 @@
      *
-     * 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));
+    }
   };
 
 export { themeRegistry as __themeRegistry };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23772

increased by0.13%

Lines of code

330

increased by1.54%

No dependency changes