@vaadin/vaadin-themable-mixin 25.0.0-alpha3 → 25.0.0-alpha4

package/css-injection-mixin.js

@@ -65,17 +65,24 @@ export const CSSInjectionMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
 
-      const root = findRoot(this);
-      root.__cssInjector ||= new CSSInjector(root);
-      this.__cssInjector = root.__cssInjector;
-      this.__cssInjector.componentConnected(this);
+      if (this.isConnected) {
+        const root = findRoot(this);
+        root.__cssInjector ||= new CSSInjector(root);
+        this.__cssInjector = root.__cssInjector;
+        this.__cssInjector.componentConnected(this);
+      }
     }
 
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
 
-      this.__cssInjector.componentDisconnected(this);
-      this.__cssInjector = undefined;
+      // Check if CSSInjector is defined. It might be unavailable if the component
+      // is moved within the DOM during connectedCallback and becomes disconnected
+      // before CSSInjector is assigned.
+      if (this.__cssInjector) {
+        this.__cssInjector.componentDisconnected(this);
+        this.__cssInjector = undefined;
+      }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,14 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "lit": "^3.0.0",
-    "style-observer": "^0.0.8"
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha4",
+    "@vaadin/test-runner-commands": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
 }

package/src/css-injector.js

@@ -3,9 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-
-/* eslint-disable es/no-optional-chaining */
-import StyleObserver from 'style-observer';
+import { CSSPropertyObserver } from './css-property-observer.js';
 import { extractTagScopedCSSRules } from './css-rules.js';
 import { cleanupStyleSheet, injectStyleSheet } from './css-utils.js';
 
@@ -36,31 +34,25 @@ import { cleanupStyleSheet, injectStyleSheet } from './css-utils.js';
  * rather than the main document.
  *
  * WARNING: For internal use only. Do not use this class in custom components.
+ *
+ * @private
  */
 export class CSSInjector {
   /** @type {Document | ShadowRoot} */
   #root;
 
-  /** @type {Map<string, HTMLElement[]>} */
-  #componentsByTag = new Map();
+  /** @type {CSSPropertyObserver} */
+  #cssPropertyObserver;
 
   /** @type {Map<string, CSSStyleSheet>} */
   #styleSheetsByTag = new Map();
 
-  #styleObserver = new StyleObserver((records) => {
-    records.forEach((record) => {
-      const { property, value, oldValue } = record;
-      const tagName = property.slice(2).replace('-css-inject', '');
-      if (value === '1') {
-        this.#componentStylesAdded(tagName);
-      } else if (oldValue === '1') {
-        this.#componentStylesRemoved(tagName);
-      }
-    });
-  });
-
   constructor(root = document) {
     this.#root = root;
+    this.#cssPropertyObserver = new CSSPropertyObserver(this.#root, 'vaadin-css-injector', (propertyName) => {
+      const tagName = propertyName.slice(2).replace('-css-inject', '');
+      this.#updateComponentStyleSheet(tagName);
+    });
   }
 
   /**
@@ -75,27 +67,13 @@ export class CSSInjector {
   componentConnected(component) {
     const { is: tagName, cssInjectPropName } = component.constructor;
 
-    if (this.#componentsByTag.has(tagName)) {
-      this.#componentsByTag.get(tagName).add(component);
-    } else {
-      this.#componentsByTag.set(tagName, new Set([component]));
-    }
-
-    const stylesheet = this.#styleSheetsByTag.get(tagName);
-    if (stylesheet) {
-      injectStyleSheet(component, stylesheet);
-      return;
-    }
+    const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
+    injectStyleSheet(component, stylesheet);
+    this.#styleSheetsByTag.set(tagName, stylesheet);
 
-    // If styles for custom property are already loaded for this root,
-    // store corresponding tag name so that we can inject styles
-    const value = getComputedStyle(this.#rootHost).getPropertyValue(cssInjectPropName);
-    if (value === '1') {
-      this.#componentStylesAdded(tagName);
-    }
+    this.#updateComponentStyleSheet(tagName);
 
-    // Observe custom property that would trigger injection for this class
-    this.#styleObserver.observe(this.#rootHost, cssInjectPropName);
+    this.#cssPropertyObserver.observe(cssInjectPropName);
   }
 
   /**
@@ -106,49 +84,19 @@ export class CSSInjector {
    * @param {HTMLElement} component
    */
   componentDisconnected(component) {
-    const { is: tagName } = component.constructor;
-
     cleanupStyleSheet(component);
-
-    this.#componentsByTag.get(tagName)?.delete(component);
   }
 
-  #componentStylesAdded(tagName) {
-    const stylesheet = this.#styleSheetsByTag.get(tagName) || new CSSStyleSheet();
+  #updateComponentStyleSheet(tagName) {
+    const roots = new Set([document, this.#root]);
 
-    const cssText = this.#extractComponentScopedCSSRules(tagName)
+    const cssText = [...roots]
+      .flatMap((root) => extractTagScopedCSSRules(root, tagName))
       .map((rule) => rule.cssText)
       .join('\n');
-    stylesheet.replaceSync(cssText);
-
-    this.#componentsByTag.get(tagName)?.forEach((component) => {
-      injectStyleSheet(component, stylesheet);
-    });
 
+    const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
+    stylesheet.replaceSync(cssText);
     this.#styleSheetsByTag.set(tagName, stylesheet);
   }
-
-  #componentStylesRemoved(tagName) {
-    this.#componentsByTag.get(tagName)?.forEach((component) => {
-      cleanupStyleSheet(component);
-    });
-
-    this.#styleSheetsByTag.delete(tagName);
-  }
-
-  #extractComponentScopedCSSRules(tagName) {
-    // Global stylesheets
-    const rules = extractTagScopedCSSRules(document, tagName);
-
-    // Scoped stylesheets
-    if (this.#root !== document) {
-      rules.push(...extractTagScopedCSSRules(this.#root, tagName));
-    }
-
-    return rules;
-  }
-
-  get #rootHost() {
-    return this.#root === document ? this.#root.documentElement : this.#root.host;
-  }
 }

package/src/css-property-observer.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * WARNING: For internal use only. Do not use this class in custom components.
+ *
+ * @private
+ */
+export class CSSPropertyObserver {
+  #root;
+  #name;
+  #callback;
+  #properties = new Set();
+
+  constructor(root, name, callback) {
+    this.#root = root;
+    this.#name = name;
+    this.#callback = callback;
+
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(`
+      :is(:root, :host)::before {
+        content: '';
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+        visibility: hidden;
+        transition: 1ms allow-discrete step-end;
+        transition-property: var(--${this.#name}-props);
+      }
+    `);
+    this.#root.adoptedStyleSheets.unshift(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);
+    }
+  }
+
+  observe(property) {
+    this.#properties.add(property);
+    this.#rootHost.style.setProperty(`--${this.#name}-props`, [...this.#properties].join(', '));
+  }
+
+  get #rootHost() {
+    return this.#root.documentElement ?? this.#root.host;
+  }
+}

package/src/css-rules.js

@@ -5,6 +5,7 @@
  */
 
 // Based on https://github.com/jouni/j-elements/blob/main/test/old-components/Stylable.js
+const mediaRulesCache = new WeakMap();
 
 /**
  * Check if the media query is a non-standard "tag scoped selector".
@@ -21,47 +22,89 @@ function isTagScopedMedia(media) {
 }
 
 /**
- * Check if the media query string matches the given tag name.
- *
- * @param {string} media
- * @param {string} tagName
- * @return {boolean}
- */
-function matchesTagScopedMedia(media, tagName) {
-  return media === tagName;
-}
-
-/**
- * Recursively processes a style sheet for matching "tag scoped" rules.
+ * Recursively processes a style sheet for media rules that match
+ * the specified predicate.
  *
  * @param {CSSStyleSheet} styleSheet
- * @param {string} tagName
+ * @param {(rule: CSSRule) => boolean} predicate
+ * @return {Array<CSSMediaRule | CSSImportRule>}
  */
-function extractStyleSheetTagScopedCSSRules(styleSheet, tagName) {
-  const matchingRules = [];
+function extractMediaRulesFromStyleSheet(styleSheet, predicate) {
+  const result = [];
 
   for (const rule of styleSheet.cssRules) {
     const ruleType = rule.constructor.name;
 
     if (ruleType === 'CSSImportRule') {
-      if (!isTagScopedMedia(rule.media.mediaText)) {
-        matchingRules.push(...extractStyleSheetTagScopedCSSRules(rule.styleSheet, tagName));
-        continue;
-      }
-
-      if (matchesTagScopedMedia(rule.media.mediaText, tagName)) {
-        matchingRules.push(...rule.styleSheet.cssRules);
+      if (predicate(rule)) {
+        result.push(rule);
+      } else {
+        result.push(...extractMediaRulesFromStyleSheet(rule.styleSheet, predicate));
       }
     }
 
     if (ruleType === 'CSSMediaRule') {
-      if (matchesTagScopedMedia(rule.media.mediaText, tagName)) {
-        matchingRules.push(...rule.cssRules);
+      if (predicate(rule)) {
+        result.push(rule);
       }
     }
   }
 
-  return matchingRules;
+  return result;
+}
+
+/**
+ * Deduplicates media rules by their CSS text, keeping the last occurrence.
+ *
+ * @param {Array<CSSMediaRule | CSSImportRule>} rules
+ * @return {Array<CSSMediaRule | CSSImportRule>}
+ */
+function deduplicateMediaRules(rules) {
+  const seen = new Set();
+  return rules.reduceRight((deduped, rule) => {
+    const key = rule.styleSheet?.cssText ?? rule.cssText;
+    if (!seen.has(key)) {
+      seen.add(key);
+      deduped.unshift(rule);
+    }
+    return deduped;
+  }, []);
+}
+
+/**
+ * Extracts all CSS rules from a style sheet that are contained in media queries
+ * with a "tag scoped selector" matching the specified tag name.
+ *
+ * This function caches the results for each style sheet to avoid
+ * reprocessing the same style sheet multiple times.
+ *
+ * @param {CSSStyleSheet} styleSheet
+ * @param {string} tagName
+ * @return {CSSRule[]}
+ */
+function extractTagScopedCSSRulesFromStyleSheet(styleSheet, tagName) {
+  let mediaRules = mediaRulesCache.get(styleSheet);
+  if (!mediaRules) {
+    // Collect all media rules that look like "tag scoped selectors", e.g. "@media vaadin-text-field { ... }"
+    mediaRules = extractMediaRulesFromStyleSheet(styleSheet, (rule) => isTagScopedMedia(rule.media.mediaText));
+
+    // Remove duplicate media rules which may result from multiple imports of the same stylesheet
+    mediaRules = deduplicateMediaRules(mediaRules);
+
+    // Group rules by tag name specified in the media query
+    mediaRules = mediaRules.reduce((acc, rule) => {
+      const rules = acc.get(rule.media.mediaText) ?? [];
+      rules.push(rule);
+      return acc.set(rule.media.mediaText, rules);
+    }, new Map());
+
+    // Save the processed media rules in the cache
+    mediaRulesCache.set(styleSheet, mediaRules);
+  }
+
+  return (mediaRules.get(tagName) ?? []).flatMap((mediaRule) =>
+    Array.from(mediaRule.styleSheet?.cssRules ?? mediaRule.cssRules),
+  );
 }
 
 /**
@@ -81,10 +124,10 @@ function extractStyleSheetTagScopedCSSRules(styleSheet, tagName) {
  * @return {CSSRule[]}
  */
 export function extractTagScopedCSSRules(root, tagName) {
-  const styleSheets = new Set([...root.styleSheets]);
-  const adoptedStyleSheets = new Set([...root.adoptedStyleSheets]);
+  const styleSheets = new Set(root.styleSheets);
+  const adoptedStyleSheets = new Set(root.adoptedStyleSheets);
 
   return [...styleSheets.union(adoptedStyleSheets)].flatMap((styleSheet) => {
-    return extractStyleSheetTagScopedCSSRules(styleSheet, tagName);
+    return extractTagScopedCSSRulesFromStyleSheet(styleSheet, tagName);
   });
 }

package/src/css-utils.js

@@ -19,7 +19,9 @@ function getEffectiveStyles(component) {
 
   const styleSheet = component.__cssInjectorStyleSheet;
   if (styleSheet) {
-    return [...componentClass.baseStyles, styleSheet, ...componentClass.themeStyles];
+    return (componentClass.baseStyles ?? componentClass.themeStyles)
+      ? [...componentClass.baseStyles, styleSheet, ...componentClass.themeStyles]
+      : [styleSheet, ...componentClass.elementStyles];
   }
 
   return componentClass.elementStyles;