@vaadin/vaadin-themable-mixin 25.0.0-alpha6 → 25.0.0-alpha8

package/lumo-injection-mixin.js

@@ -61,6 +61,12 @@ export const LumoInjectionMixin = (superClass) =>
       return `--${this.is}-lumo-inject`;
     }
 
+    static get lumoInjector() {
+      return {
+        includeBaseStyles: false,
+      };
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-alpha6",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha6",
-    "@vaadin/test-runner-commands": "25.0.0-alpha6",
+    "@vaadin/chai-plugins": "25.0.0-alpha8",
+    "@vaadin/test-runner-commands": "25.0.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
+  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
 }

package/src/css-property-observer.js

@@ -14,14 +14,36 @@ export class CSSPropertyObserver {
   #name;
   #callback;
   #properties = new Set();
+  #styleSheet;
+  #isConnected = false;
 
   constructor(root, name, callback) {
     this.#root = root;
     this.#name = name;
     this.#callback = callback;
+  }
+
+  #handleTransitionEvent(event) {
+    const { propertyName } = event;
+    if (this.#properties.has(propertyName)) {
+      this.#callback(propertyName);
+    }
+  }
+
+  observe(property) {
+    this.connect();
+
+    this.#properties.add(property);
+    this.#rootHost.style.setProperty(`--${this.#name}-props`, [...this.#properties].join(', '));
+  }
 
-    const styleSheet = new CSSStyleSheet();
-    styleSheet.replaceSync(`
+  connect() {
+    if (this.#isConnected) {
+      return;
+    }
+
+    this.#styleSheet = new CSSStyleSheet();
+    this.#styleSheet.replaceSync(`
       :is(:root, :host)::before {
         content: '' !important;
         position: absolute !important;
@@ -32,22 +54,24 @@ export class CSSPropertyObserver {
         transition-property: var(--${this.#name}-props) !important;
       }
     `);
-    this.#root.adoptedStyleSheets.unshift(styleSheet);
+    this.#root.adoptedStyleSheets.unshift(this.#styleSheet);
 
     this.#rootHost.addEventListener('transitionstart', (event) => this.#handleTransitionEvent(event));
     this.#rootHost.addEventListener('transitionend', (event) => this.#handleTransitionEvent(event));
-  }
 
-  #handleTransitionEvent(event) {
-    const { propertyName } = event;
-    if (this.#properties.has(propertyName)) {
-      this.#callback(propertyName);
-    }
+    this.#isConnected = true;
   }
 
-  observe(property) {
-    this.#properties.add(property);
-    this.#rootHost.style.setProperty(`--${this.#name}-props`, [...this.#properties].join(', '));
+  disconnect() {
+    this.#properties.clear();
+
+    this.#root.adoptedStyleSheets = this.#root.adoptedStyleSheets.filter((s) => s !== this.#styleSheet);
+
+    this.#rootHost.removeEventListener('transitionstart', this.#handleTransitionEvent);
+    this.#rootHost.removeEventListener('transitionend', this.#handleTransitionEvent);
+    this.#rootHost.style.removeProperty(`--${this.#name}-props`);
+
+    this.#isConnected = false;
   }
 
   get #rootHost() {

package/src/css-utils.js

@@ -15,16 +15,14 @@ import { adoptStyles } from 'lit';
  * @return {CSSStyleSheet[]}
  */
 function getEffectiveStyles(component) {
-  const componentClass = component.constructor;
+  const { baseStyles, themeStyles, elementStyles, lumoInjector } = component.constructor;
+  const lumoStyleSheet = component.__lumoStyleSheet;
 
-  const styleSheet = component.__lumoInjectorStyleSheet;
-  if (styleSheet) {
-    return (componentClass.baseStyles ?? componentClass.themeStyles)
-      ? [...componentClass.baseStyles, styleSheet, ...componentClass.themeStyles]
-      : [styleSheet, ...componentClass.elementStyles];
+  if (lumoStyleSheet && (baseStyles || themeStyles)) {
+    return [...(lumoInjector.includeBaseStyles ? baseStyles : []), lumoStyleSheet, ...themeStyles];
   }
 
-  return componentClass.elementStyles;
+  return [lumoStyleSheet, ...elementStyles].filter(Boolean);
 }
 
 /**
@@ -47,7 +45,7 @@ export function applyInstanceStyles(component) {
  */
 export function injectLumoStyleSheet(component, styleSheet) {
   // Store the new stylesheet so that it can be removed later.
-  component.__lumoInjectorStyleSheet = styleSheet;
+  component.__lumoStyleSheet = styleSheet;
   applyInstanceStyles(component);
 }
 
@@ -57,11 +55,7 @@ export function injectLumoStyleSheet(component, styleSheet) {
  *
  * @param {HTMLElement} component
  */
-export function cleanupLumoStyleSheet(component) {
-  const adoptedStyleSheets = component.shadowRoot.adoptedStyleSheets.filter(
-    (s) => s !== component.__lumoInjectorStyleSheet,
-  );
-
-  component.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-  component.__lumoInjectorStyleSheet = undefined;
+export function removeLumoStyleSheet(component) {
+  component.__lumoStyleSheet = undefined;
+  applyInstanceStyles(component);
 }

package/src/lumo-injector.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { CSSPropertyObserver } from './css-property-observer.js';
-import { cleanupLumoStyleSheet, injectLumoStyleSheet } from './css-utils.js';
+import { injectLumoStyleSheet, removeLumoStyleSheet } from './css-utils.js';
 import { parseStyleSheets } from './lumo-modules.js';
 
 /**
@@ -77,14 +77,23 @@ export class LumoInjector {
   /** @type {Map<string, CSSStyleSheet>} */
   #styleSheetsByTag = new Map();
 
+  /** @type {Map<string, Set<HTMLElement>>} */
+  #componentsByTag = new Map();
+
   constructor(root = document) {
     this.#root = root;
     this.#cssPropertyObserver = new CSSPropertyObserver(this.#root, 'vaadin-lumo-injector', (propertyName) => {
       const tagName = propertyName.slice(2).replace('-lumo-inject', '');
-      this.#updateComponentStyleSheet(tagName);
+      this.#updateStyleSheet(tagName);
     });
   }
 
+  disconnect() {
+    this.#cssPropertyObserver.disconnect();
+    this.#styleSheetsByTag.clear();
+    this.#componentsByTag.values().forEach((components) => components.forEach(removeLumoStyleSheet));
+  }
+
   /**
    * Adds a component to the list of elements monitored for style injection.
    * If the styles have already been detected, they are injected into the
@@ -97,12 +106,18 @@ export class LumoInjector {
   componentConnected(component) {
     const { is: tagName, lumoInjectPropName } = component.constructor;
 
-    const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
-    injectLumoStyleSheet(component, stylesheet);
-    this.#styleSheetsByTag.set(tagName, stylesheet);
+    this.#componentsByTag.set(tagName, this.#componentsByTag.get(tagName) ?? new Set());
+    this.#componentsByTag.get(tagName).add(component);
 
-    this.#updateComponentStyleSheet(tagName);
+    const stylesheet = this.#styleSheetsByTag.get(tagName);
+    if (stylesheet) {
+      if (stylesheet.cssRules.length > 0) {
+        injectLumoStyleSheet(component, stylesheet);
+      }
+      return;
+    }
 
+    this.#initStyleSheet(tagName);
     this.#cssPropertyObserver.observe(lumoInjectPropName);
   }
 
@@ -113,10 +128,18 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentDisconnected(component) {
-    cleanupLumoStyleSheet(component);
+    const { is: tagName } = component.constructor;
+    this.#componentsByTag.get(tagName)?.delete(component);
+
+    removeLumoStyleSheet(component);
   }
 
-  #updateComponentStyleSheet(tagName) {
+  #initStyleSheet(tagName) {
+    this.#styleSheetsByTag.set(tagName, new CSSStyleSheet());
+    this.#updateStyleSheet(tagName);
+  }
+
+  #updateStyleSheet(tagName) {
     const { tags, modules } = parseStyleSheets(this.#rootStyleSheets);
 
     const cssText = (tags.get(tagName) ?? [])
@@ -124,9 +147,16 @@ export class LumoInjector {
       .map((rule) => rule.cssText)
       .join('\n');
 
-    const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
+    const stylesheet = this.#styleSheetsByTag.get(tagName);
     stylesheet.replaceSync(cssText);
-    this.#styleSheetsByTag.set(tagName, stylesheet);
+
+    this.#componentsByTag.get(tagName)?.forEach((component) => {
+      if (cssText) {
+        injectLumoStyleSheet(component, stylesheet);
+      } else {
+        removeLumoStyleSheet(component);
+      }
+    });
   }
 
   get #rootStyleSheets() {