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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@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": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "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/lumo-injector.js

@@ -84,10 +84,16 @@ export class LumoInjector {
     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
@@ -103,8 +109,15 @@ export class LumoInjector {
     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);
   }
 
@@ -121,7 +134,12 @@ export class LumoInjector {
     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) ?? [])
@@ -129,9 +147,8 @@ 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) {