@vaadin/vaadin-themable-mixin 25.0.0-alpha9 → 25.0.0-beta1

package/lumo-injection-mixin.js

@@ -58,7 +58,7 @@ export const LumoInjectionMixin = (superClass) =>
     }
 
     static get lumoInjectPropName() {
-      return `--${this.is}-lumo-inject`;
+      return `--_lumo-${this.is}-inject`;
     }
 
     static get lumoInjector() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -33,14 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
+    "@vaadin/component-base": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

package/src/css-property-observer.js

@@ -11,16 +11,15 @@
  */
 export class CSSPropertyObserver {
   #root;
-  #name;
   #callback;
   #properties = new Set();
   #styleSheet;
   #isConnected = false;
 
-  constructor(root, name, callback) {
+  constructor(root, callback) {
     this.#root = root;
-    this.#name = name;
     this.#callback = callback;
+    this.#styleSheet = new CSSStyleSheet();
   }
 
   #handleTransitionEvent(event) {
@@ -33,27 +32,30 @@ export class CSSPropertyObserver {
   observe(property) {
     this.connect();
 
-    this.#properties.add(property);
-    this.#rootHost.style.setProperty(`--${this.#name}-props`, [...this.#properties].join(', '));
-  }
-
-  connect() {
-    if (this.#isConnected) {
+    if (this.#properties.has(property)) {
       return;
     }
 
-    this.#styleSheet = new CSSStyleSheet();
+    this.#properties.add(property);
+
     this.#styleSheet.replaceSync(`
-      :is(:root, :host)::before {
+      :root::before, :host::before {
         content: '' !important;
         position: absolute !important;
         top: -9999px !important;
         left: -9999px !important;
         visibility: hidden !important;
         transition: 1ms allow-discrete step-end !important;
-        transition-property: var(--${this.#name}-props) !important;
+        transition-property: ${[...this.#properties].join(', ')} !important;
       }
     `);
+  }
+
+  connect() {
+    if (this.#isConnected) {
+      return;
+    }
+
     this.#root.adoptedStyleSheets.unshift(this.#styleSheet);
 
     this.#rootHost.addEventListener('transitionstart', (event) => this.#handleTransitionEvent(event));
@@ -69,7 +71,6 @@ export class CSSPropertyObserver {
 
     this.#rootHost.removeEventListener('transitionstart', this.#handleTransitionEvent);
     this.#rootHost.removeEventListener('transitionend', this.#handleTransitionEvent);
-    this.#rootHost.style.removeProperty(`--${this.#name}-props`);
 
     this.#isConnected = false;
   }

package/src/lumo-injector.js

@@ -34,26 +34,26 @@ import { parseStyleSheets } from './lumo-modules.js';
  * }
  *
  * html {
- *   --vaadin-text-field-lumo-inject: 1;
- *   --vaadin-text-field-lumo-inject-modules:
+ *   --_lumo-vaadin-text-field-inject: 1;
+ *   --_lumo-vaadin-text-field-inject-modules:
  *      lumo_base-field,
  *      lumo_text-field;
  *
- *   --vaadin-email-field-lumo-inject: 1;
- *   --vaadin-email-field-lumo-inject-modules:
+ *   --_lumo-vaadin-email-field-inject: 1;
+ *   --_lumo-vaadin-email-field-inject-modules:
  *      lumo_base-field,
  *      lumo_email-field;
  * }
  * ```
  *
- * The class observes the custom property `--{tagName}-lumo-inject`,
+ * The class observes the custom property `--_lumo-{tagName}-inject`,
  * which indicates whether styles are present for the given component
  * in the document style sheets. When the property is set to `1`, the
  * class recursively searches all document style sheets for CSS modules
- * listed in the `--{tagName}-lumo-inject-modules` property that apply to
+ * listed in the `--_lumo-{tagName}-inject-modules` property that apply to
  * the given component tag name. The found rules are then injected
  * into the component's Shadow DOM using the `adoptedStyleSheets` API,
- * in the order specified in the `--{tagName}-lumo-inject-modules` property.
+ * in the order specified in the `--_lumo-{tagName}-inject-modules` property.
  * The same module can be used in multiple components.
  *
  * The class also removes the injected styles when the property is set to `0`.
@@ -82,8 +82,8 @@ export class LumoInjector {
 
   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.#cssPropertyObserver = new CSSPropertyObserver(this.#root, (propertyName) => {
+      const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
       this.#updateStyleSheet(tagName);
     });
   }
@@ -98,7 +98,7 @@ export class LumoInjector {
    * Adds a component to the list of elements monitored for style injection.
    * If the styles have already been detected, they are injected into the
    * component's shadow DOM immediately. Otherwise, the class watches the
-   * custom property `--{tagName}-lumo-inject` to trigger injection when
+   * custom property `--_lumo-{tagName}-inject` to trigger injection when
    * the styles are added to the document or root element.
    *
    * @param {HTMLElement} component

package/src/lumo-modules.js

@@ -3,9 +3,33 @@
  * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
+
 /** @type {WeakMap<CSSStyleSheet, Record<string, Map>>} */
 const cache = new WeakMap();
 
+function getRuleMediaText(rule) {
+  try {
+    return rule.media.mediaText;
+  } catch {
+    issueWarning(
+      '[LumoInjector] Browser denied to access property "mediaText" for some CSS rules, so they were skipped.',
+    );
+    return '';
+  }
+}
+
+function getStyleSheetRules(styleSheet) {
+  try {
+    return styleSheet.cssRules;
+  } catch {
+    issueWarning(
+      '[LumoInjector] Browser denied to access property "cssRules" for some CSS stylesheets, so they were skipped.',
+    );
+    return [];
+  }
+}
+
 function parseStyleSheet(
   styleSheet,
   result = {
@@ -13,20 +37,11 @@ function parseStyleSheet(
     modules: new Map(),
   },
 ) {
-  let cssRules;
-  try {
-    cssRules = styleSheet.cssRules;
-  } catch {
-    // External stylesheets may not be accessible due to CORS security restrictions.
-    cssRules = [];
-  }
-
-  for (const rule of cssRules) {
-    const { media } = rule;
-
+  for (const rule of getStyleSheetRules(styleSheet)) {
     if (rule instanceof CSSImportRule) {
-      if (media?.mediaText.startsWith('lumo_')) {
-        result.modules.set(media.mediaText, [...rule.styleSheet.cssRules]);
+      const mediaText = getRuleMediaText(rule);
+      if (mediaText.startsWith('lumo_')) {
+        result.modules.set(mediaText, [...rule.styleSheet.cssRules]);
       } else {
         parseStyleSheet(rule.styleSheet, result);
       }
@@ -35,16 +50,17 @@ function parseStyleSheet(
     }
 
     if (rule instanceof CSSMediaRule) {
-      if (media?.mediaText.startsWith('lumo_')) {
-        result.modules.set(media.mediaText, [...rule.cssRules]);
+      const mediaText = getRuleMediaText(rule);
+      if (mediaText.startsWith('lumo_')) {
+        result.modules.set(mediaText, [...rule.cssRules]);
       }
 
       continue;
     }
 
-    if (rule instanceof CSSStyleRule && rule.cssText.includes('-lumo-inject')) {
+    if (rule instanceof CSSStyleRule && rule.cssText.includes('-inject')) {
       for (const property of rule.style) {
-        const tagName = property.match(/^--(.*)-lumo-inject-modules$/u)?.[1];
+        const tagName = property.match(/^--_lumo-(.*)-inject-modules$/u)?.[1];
         if (!tagName) {
           continue;
         }
@@ -95,7 +111,7 @@ function parseStyleSheet(
  *
  * ```css
  * html {
- *   --vaadin-text-field-lumo-inject-modules:
+ *   --_lumo-vaadin-text-field-inject-modules:
  *      lumo_base-field,
  *      lumo_text-field;
  * }

package/vaadin-themable-mixin.d.ts

@@ -7,9 +7,6 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { CSSResult, CSSResultGroup } from 'lit';
 import type { ThemePropertyMixinClass } from './vaadin-theme-property-mixin.js';
 
-/**
- * A mixin for `nav` elements, facilitating navigation and selection of childNodes.
- */
 export declare function ThemableMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ThemableMixinClass> & Constructor<ThemePropertyMixinClass> & T;
@@ -29,18 +26,6 @@ export declare interface ThemableMixinClass extends ThemePropertyMixinClass {}
  */
 declare function registerStyles(themeFor: string | null, styles: CSSResultGroup, options?: object | null): void;
 
-type Theme = {
-  themeFor: string;
-  styles: CSSResult[];
-  moduleId?: string;
-  include?: string[] | string;
-};
-
-/**
- * For internal purposes only.
- */
-declare const __themeRegistry: Theme[];
-
 export { css, unsafeCSS } from 'lit';
 
-export { registerStyles, __themeRegistry };
+export { registerStyles };

package/vaadin-themable-mixin.js

@@ -55,7 +55,6 @@ function hasThemes(tagName) {
 /**
  * Flattens the styles into a single array of styles.
  * @param {CSSResultGroup} styles
- * @param {CSSResult[]} result
  * @returns {CSSResult[]}
  */
 function flattenStyles(styles = []) {
@@ -234,18 +233,6 @@ export function registerStyles(themeFor, styles, options = {}) {
   }
 }
 
-/**
- * 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();
-  }
-  return themeRegistry;
-}
-
 /**
  * Maps the moduleName to an include priority number which is used for
  * determining the order in which styles are applied.
@@ -271,7 +258,7 @@ function getIncludedStyles(theme) {
   const includedStyles = [];
   if (theme.include) {
     [].concat(theme.include).forEach((includeModuleId) => {
-      const includedTheme = getAllThemes().find((s) => s.moduleId === includeModuleId);
+      const includedTheme = themeRegistry.find((s) => s.moduleId === includeModuleId);
       if (includedTheme) {
         includedStyles.push(...getIncludedStyles(includedTheme), ...includedTheme.styles);
       } else {
@@ -291,7 +278,7 @@ function getIncludedStyles(theme) {
 function getThemes(tagName) {
   const defaultModuleName = `${tagName}-default-theme`;
 
-  const themes = getAllThemes()
+  const themes = themeRegistry
     // Filter by matching themeFor properties
     .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor(theme.themeFor, tagName))
     .map((theme) => ({
@@ -308,7 +295,7 @@ function getThemes(tagName) {
     return themes;
   }
   // No theme modules found, return the default module if it exists
-  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
+  return themeRegistry.filter((theme) => theme.moduleId === defaultModuleName);
 }
 
 /**
@@ -380,5 +367,3 @@ export const ThemableMixin = (superClass) =>
       return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
     }
   };
-
-export { themeRegistry as __themeRegistry };