npm - @vaadin/vaadin-themable-mixin - Versions diffs - 25.0.0-alpha2 → 25.0.0-alpha20 - Mend

@vaadin/vaadin-themable-mixin 25.0.0-alpha2 → 25.0.0-alpha20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/lumo-injection-mixin.js +94 -0
package/package.json +8 -7
package/src/css-property-observer.js +81 -0
package/src/css-utils.js +11 -19
package/src/lumo-injector.js +172 -0
package/src/lumo-modules.js +153 -0
package/vaadin-themable-mixin.d.ts +1 -16
package/vaadin-themable-mixin.js +5 -20
package/src/css-injector.js +0 -154
package/src/css-rules.js +0 -90

package/lumo-injection-mixin.js ADDED Viewed

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { LumoInjector } from './src/lumo-injector.js';
+/**
+ * @type {Set<string>}
+ */
+const registeredProperties = new Set();
+/**
+ * Find enclosing root for given element to gather style rules from.
+ *
+ * @param {HTMLElement} element
+ * @return {DocumentOrShadowRoot}
+ */
+function findRoot(element) {
+  const root = element.getRootNode();
+  if (root.host && root.host.constructor.version) {
+    return findRoot(root.host);
+  }
+  return root;
+}
+/**
+ * Mixin for internal use only. Do not use it in custom components.
+ *
+ * @polymerMixin
+ */
+export const LumoInjectionMixin = (superClass) =>
+  class LumoInjectionMixinClass extends superClass {
+    static finalize() {
+      super.finalize();
+      const propName = this.lumoInjectPropName;
+      // Prevent registering same property twice when a class extends
+      // another class using this mixin, since `finalize()` is called
+      // by LitElement for all superclasses in the prototype chain.
+      if (this.is && !registeredProperties.has(propName)) {
+        registeredProperties.add(propName);
+        // Initialize custom property for this class with 0 as default
+        // so that changing it to 1 would inject styles to instances
+        // Use `inherits: true` so that property defined on `<html>`
+        // would apply to components instances within shadow roots
+        CSS.registerProperty({
+          name: propName,
+          syntax: '<number>',
+          inherits: true,
+          initialValue: '0',
+        });
+      }
+    }
+    static get lumoInjectPropName() {
+      return `--_lumo-${this.is}-inject`;
+    }
+    static get lumoInjector() {
+      return {
+        includeBaseStyles: false,
+      };
+    }
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      if (this.isConnected) {
+        const root = findRoot(this);
+        root.__lumoInjector ||= new LumoInjector(root);
+        this.__lumoInjector = root.__lumoInjector;
+        this.__lumoInjector.componentConnected(this);
+      }
+    }
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      // Check if LumoInjector is defined. It might be unavailable if the component
+      // is moved within the DOM during connectedCallback and becomes disconnected
+      // before LumoInjector is assigned.
+      if (this.__lumoInjector) {
+        this.__lumoInjector.componentDisconnected(this);
+        this.__lumoInjector = undefined;
+      }
+    }
+  };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +22,7 @@
   "files": [
     "src",
     "*.d.ts",
+    "lumo-injection-mixin.js",
     "register-styles.js",
     "vaadin-*.js"
   ],
@@ -32,15 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "lit": "^3.0.0",
-    "style-observer": "^0.0.8"
+    "@vaadin/component-base": "25.0.0-alpha20",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha20",
+    "@vaadin/test-runner-commands": "25.0.0-alpha20",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
 }

package/src/css-property-observer.js ADDED Viewed

@@ -0,0 +1,81 @@
+/**
+ * @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;
+  #callback;
+  #properties = new Set();
+  #styleSheet;
+  #isConnected = false;
+  constructor(root, callback) {
+    this.#root = root;
+    this.#callback = callback;
+    this.#styleSheet = new CSSStyleSheet();
+  }
+  #handleTransitionEvent(event) {
+    const { propertyName } = event;
+    if (this.#properties.has(propertyName)) {
+      this.#callback(propertyName);
+    }
+  }
+  observe(property) {
+    this.connect();
+    if (this.#properties.has(property)) {
+      return;
+    }
+    this.#properties.add(property);
+    this.#styleSheet.replaceSync(`
+      :is(:root, :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: ${[...this.#properties].join(', ')} !important;
+      }
+    `);
+  }
+  connect() {
+    if (this.#isConnected) {
+      return;
+    }
+    this.#root.adoptedStyleSheets.unshift(this.#styleSheet);
+    this.#rootHost.addEventListener('transitionstart', (event) => this.#handleTransitionEvent(event));
+    this.#rootHost.addEventListener('transitionend', (event) => this.#handleTransitionEvent(event));
+    this.#isConnected = true;
+  }
+  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.#isConnected = false;
+  }
+  get #rootHost() {
+    return this.#root.documentElement ?? this.#root.host;
+  }
+}

package/src/css-utils.js CHANGED Viewed

@@ -15,14 +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.__cssInjectorStyleSheet;
-  if (styleSheet) {
-    return [...componentClass.baseStyles, styleSheet, ...componentClass.themeStyles];
+  if (lumoStyleSheet && (baseStyles || themeStyles)) {
+    return [...(lumoInjector.includeBaseStyles ? baseStyles : []), lumoStyleSheet, ...themeStyles];
   }
-  return componentClass.elementStyles;
+  return [lumoStyleSheet, ...elementStyles].filter(Boolean);
 }
 /**
@@ -31,10 +31,6 @@ function getEffectiveStyles(component) {
  * @param {HTMLElement} component
  */
 export function applyInstanceStyles(component) {
-  // The adoptStyles function may fall back to appending style elements to shadow root.
-  // Remove them first to avoid duplicates.
-  [...component.shadowRoot.querySelectorAll('style')].forEach((style) => style.remove());
   adoptStyles(component.shadowRoot, getEffectiveStyles(component));
 }
@@ -47,23 +43,19 @@ export function applyInstanceStyles(component) {
  * @param {HTMLElement} component
  * @param {CSSStyleSheet} styleSheet
  */
-export function injectStyleSheet(component, styleSheet) {
+export function injectLumoStyleSheet(component, styleSheet) {
   // Store the new stylesheet so that it can be removed later.
-  component.__cssInjectorStyleSheet = styleSheet;
+  component.__lumoStyleSheet = styleSheet;
   applyInstanceStyles(component);
 }
 /**
  * Removes the stylesheet from the component's shadow root that was added
- * by the `injectStyleSheet` function.
+ * by the `injectLumoStyleSheet` function.
  *
  * @param {HTMLElement} component
  */
-export function cleanupStyleSheet(component) {
-  const adoptedStyleSheets = component.shadowRoot.adoptedStyleSheets.filter(
-    (s) => s !== component.__cssInjectorStyleSheet,
-  );
-  component.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-  component.__cssInjectorStyleSheet = undefined;
+export function removeLumoStyleSheet(component) {
+  component.__lumoStyleSheet = undefined;
+  applyInstanceStyles(component);
 }

package/src/lumo-injector.js ADDED Viewed

@@ -0,0 +1,172 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSPropertyObserver } from './css-property-observer.js';
+import { injectLumoStyleSheet, removeLumoStyleSheet } from './css-utils.js';
+import { parseStyleSheets } from './lumo-modules.js';
+/**
+ * Implements auto-injection of CSS styles from document style sheets
+ * into the Shadow DOM of corresponding Vaadin components.
+ *
+ * Styles to be injected are defined as reusable modules using the
+ * following syntax, based on media queries and custom properties:
+ *
+ * ```css
+ * \@media lumo_base-field {
+ *  #label {
+ *    color: gray;
+ *  }
+ * }
+ *
+ * \@media lumo_text-field {
+ *   #input {
+ *     color: yellow;
+ *   }
+ * }
+ *
+ * \@media lumo_email-field {
+ *   #input {
+ *     color: green;
+ *   }
+ * }
+ *
+ * html {
+ *   --_lumo-vaadin-text-field-inject: 1;
+ *   --_lumo-vaadin-text-field-inject-modules:
+ *      lumo_base-field,
+ *      lumo_text-field;
+ *
+ *   --_lumo-vaadin-email-field-inject: 1;
+ *   --_lumo-vaadin-email-field-inject-modules:
+ *      lumo_base-field,
+ *      lumo_email-field;
+ * }
+ * ```
+ *
+ * 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 `--_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 `--_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`.
+ *
+ * If a root element is provided, the class will additionally search for
+ * CSS modules in the root element's style sheets. This is useful for
+ * embedded Flow applications that are fully isolated from the main document
+ * and load styles into a component’s Shadow DOM instead of the main document.
+ *
+ * WARNING: For internal use only. Do not use this class in custom components.
+ *
+ * @private
+ */
+export class LumoInjector {
+  /** @type {Document | ShadowRoot} */
+  #root;
+  /** @type {CSSPropertyObserver} */
+  #cssPropertyObserver;
+  /** @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, (propertyName) => {
+      const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
+      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
+   * component's shadow DOM immediately. Otherwise, the class watches the
+   * custom property `--_lumo-{tagName}-inject` to trigger injection when
+   * the styles are added to the document or root element.
+   *
+   * @param {HTMLElement} component
+   */
+  componentConnected(component) {
+    const { is: tagName, lumoInjectPropName } = component.constructor;
+    this.#componentsByTag.set(tagName, this.#componentsByTag.get(tagName) ?? new Set());
+    this.#componentsByTag.get(tagName).add(component);
+    const stylesheet = this.#styleSheetsByTag.get(tagName);
+    if (stylesheet) {
+      if (stylesheet.cssRules.length > 0) {
+        injectLumoStyleSheet(component, stylesheet);
+      }
+      return;
+    }
+    this.#initStyleSheet(tagName);
+    this.#cssPropertyObserver.observe(lumoInjectPropName);
+  }
+  /**
+   * Removes the component from the list of elements monitored for
+   * style injection and cleans up any previously injected styles.
+   *
+   * @param {HTMLElement} component
+   */
+  componentDisconnected(component) {
+    const { is: tagName } = component.constructor;
+    this.#componentsByTag.get(tagName)?.delete(component);
+    removeLumoStyleSheet(component);
+  }
+  #initStyleSheet(tagName) {
+    this.#styleSheetsByTag.set(tagName, new CSSStyleSheet());
+    this.#updateStyleSheet(tagName);
+  }
+  #updateStyleSheet(tagName) {
+    const { tags, modules } = parseStyleSheets(this.#rootStyleSheets);
+    const cssText = (tags.get(tagName) ?? [])
+      .flatMap((moduleName) => modules.get(moduleName) ?? [])
+      .map((rule) => rule.cssText)
+      .join('\n');
+    const stylesheet = this.#styleSheetsByTag.get(tagName);
+    stylesheet.replaceSync(cssText);
+    this.#componentsByTag.get(tagName)?.forEach((component) => {
+      if (cssText) {
+        injectLumoStyleSheet(component, stylesheet);
+      } else {
+        removeLumoStyleSheet(component);
+      }
+    });
+  }
+  get #rootStyleSheets() {
+    let styleSheets = new Set();
+    for (const root of [this.#root, document]) {
+      styleSheets = styleSheets.union(new Set(root.styleSheets));
+      styleSheets = styleSheets.union(new Set(root.adoptedStyleSheets));
+    }
+    return [...styleSheets];
+  }
+}

package/src/lumo-modules.js ADDED Viewed

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * 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 = {
+    tags: new Map(),
+    modules: new Map(),
+  },
+) {
+  for (const rule of getStyleSheetRules(styleSheet)) {
+    if (rule instanceof CSSImportRule) {
+      const mediaText = getRuleMediaText(rule);
+      if (mediaText.startsWith('lumo_')) {
+        result.modules.set(mediaText, [...rule.styleSheet.cssRules]);
+      } else {
+        parseStyleSheet(rule.styleSheet, result);
+      }
+      continue;
+    }
+    if (rule instanceof CSSMediaRule) {
+      const mediaText = getRuleMediaText(rule);
+      if (mediaText.startsWith('lumo_')) {
+        result.modules.set(mediaText, [...rule.cssRules]);
+      }
+      continue;
+    }
+    if (rule instanceof CSSStyleRule && rule.cssText.includes('-inject')) {
+      for (const property of rule.style) {
+        const tagName = property.match(/^--_lumo-(.*)-inject-modules$/u)?.[1];
+        if (!tagName) {
+          continue;
+        }
+        const value = rule.style.getPropertyValue(property);
+        result.tags.set(
+          tagName,
+          value.split(',').map((module) => module.trim().replace(/'|"/gu, '')),
+        );
+      }
+      continue;
+    }
+  }
+  return result;
+}
+/**
+ * Parses the provided CSSStyleSheet objects and returns an object with
+ * tag-to-modules mappings and module rules.
+ *
+ * Modules are defined using CSS media rules with names starting with `lumo_`:
+ *
+ * ```css
+ * \@media lumo_base-field {
+ *  #label {
+ *    color: gray;
+ *  }
+ * }
+ *
+ * \@media lumo_text-field {
+ *   #input {
+ *     color: yellow;
+ *   }
+ * }
+ * ```
+ *
+ * Also, an entire CSS import can be defined as a module:
+ *
+ * ```css
+ * \@import 'lumo-base-field.css' lumo_base-field;
+ * ```
+ *
+ * Tag-to-modules mappings are defined as CSS custom properties that list
+ * the module names to be applied to specific tags, e.g. `vaadin-text-field`:
+ *
+ * ```css
+ * html {
+ *   --_lumo-vaadin-text-field-inject-modules:
+ *      lumo_base-field,
+ *      lumo_text-field;
+ * }
+ * ```
+ *
+ * Example output:
+ *
+ * ```js
+ * {
+ *   tags: Map {
+ *    'vaadin-text-field': ['lumo_base-field', 'lumo_text-field']
+ *   },
+ *   modules: Map {
+ *     'lumo_base-field': [CSSStyleRule],
+ *     'lumo_text-field': [CSSStyleRule]
+ *   }
+ * }
+ * ```
+ *
+ * @param {CSSStyleSheet[]} styleSheets - An array of CSSStyleSheet objects to parse.
+ * @return {{tags: Map<string, string[]>, modules: Map<string, CSSRule[]>}}
+ */
+export function parseStyleSheets(styleSheets) {
+  let tags = new Map();
+  let modules = new Map();
+  for (const styleSheet of styleSheets) {
+    let result = cache.get(styleSheet);
+    if (!result) {
+      result = parseStyleSheet(styleSheet);
+      cache.set(styleSheet, result);
+    }
+    tags = new Map([...tags, ...result.tags]);
+    modules = new Map([...modules, ...result.modules]);
+  }
+  return { tags, modules };
+}

package/vaadin-themable-mixin.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
 }
 /**
@@ -354,11 +341,11 @@ export const ThemableMixin = (superClass) =>
      */
     static finalizeStyles(styles) {
       // Preserve the styles the user supplied via the `static get styles()` getter
-      // so that they will always be injected before styles added by `CSSInjector`.
+      // so that they will always be injected before styles added by `LumoInjector`.
       this.baseStyles = styles ? [styles].flat(Infinity) : [];
       // Preserve the theme styles the user supplied via the `registerStyles()` API
-      // so that they will always be injected after styles added by `CSSInjector`.
+      // so that they will always be injected after styles added by `LumoInjector`.
       this.themeStyles = this.getStylesForThis();
       // Merged styles are stored in `elementStyles` and passed to `adoptStyles()`.
@@ -380,5 +367,3 @@ export const ThemableMixin = (superClass) =>
       return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
     }
   };
-export { themeRegistry as __themeRegistry };

package/src/css-injector.js DELETED Viewed

@@ -1,154 +0,0 @@
-/**
- * @license
- * 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 { extractTagScopedCSSRules } from './css-rules.js';
-import { cleanupStyleSheet, injectStyleSheet } from './css-utils.js';
-/**
- * Implements auto-injection of component-scoped CSS styles from document
- * style sheets into the Shadow DOM of the corresponding Vaadin components.
- *
- * Styles are scoped to a component using the following syntax:
- *
- * 1. `@media vaadin-text-field { ... }` - a media query with a tag name
- * 2. `@import "styles.css" vaadin-text-field` - an import rule with a tag name
- *
- * The class observes the custom property `--{tagName}-css-inject`,
- * which indicates the presence of styles 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 any CSS rules that
- * are scoped to the given component tag name using the syntax described
- * above. The found rules are then injected into the shadow DOM of all
- * subscribed components through the adoptedStyleSheets API.
- *
- * The class also observes the custom property to remove the styles when
- * the property is set to `0`.
- *
- * If a root element is provided, the class will additionally search for
- * component-scoped styles in the root element's style sheets. This is
- * useful for embedded Flow applications that are fully isolated from
- * the main document and load styles into a component's shadow DOM
- * rather than the main document.
- *
- * WARNING: For internal use only. Do not use this class in custom components.
- */
-export class CSSInjector {
-  /** @type {Document | ShadowRoot} */
-  #root;
-  /** @type {Map<string, HTMLElement[]>} */
-  #componentsByTag = new Map();
-  /** @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;
-  }
-  /**
-   * Adds a component to the list of elements monitored for component-scoped
-   * styles in global style sheets. 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}-css-inject` to trigger
-   * injection when the styles are added to the document or root element.
-   *
-   * @param {HTMLElement} component
-   */
-  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;
-    }
-    // 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);
-    }
-    // Observe custom property that would trigger injection for this class
-    this.#styleObserver.observe(this.#rootHost, cssInjectPropName);
-  }
-  /**
-   * Removes the component from the list of elements monitored for
-   * component-scoped styles and cleans up any previously injected
-   * styles from the component's shadow DOM.
-   *
-   * @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();
-    const cssText = this.#extractComponentScopedCSSRules(tagName)
-      .map((rule) => rule.cssText)
-      .join('\n');
-    stylesheet.replaceSync(cssText);
-    this.#componentsByTag.get(tagName)?.forEach((component) => {
-      injectStyleSheet(component, stylesheet);
-    });
-    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-rules.js DELETED Viewed

@@ -1,90 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-// Based on https://github.com/jouni/j-elements/blob/main/test/old-components/Stylable.js
-/**
- * Check if the media query is a non-standard "tag scoped selector".
- *
- * Examples of such media queries:
- * - `@media vaadin-text-field { ... }`
- * - `@import "styles.css" vaadin-text-field`.
- *
- * @param {string} media
- * @return {boolean}
- */
-function isTagScopedMedia(media) {
-  return /^\w+(-\w+)+$/u.test(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.
- *
- * @param {CSSStyleSheet} styleSheet
- * @param {string} tagName
- */
-function extractStyleSheetTagScopedCSSRules(styleSheet, tagName) {
-  const matchingRules = [];
-  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 (ruleType === 'CSSMediaRule') {
-      if (matchesTagScopedMedia(rule.media.mediaText, tagName)) {
-        matchingRules.push(...rule.cssRules);
-      }
-    }
-  }
-  return matchingRules;
-}
-/**
- * Recursively processes style sheets of the specified root element, including both
- * `adoptedStyleSheets` and regular `styleSheets`, and returns all CSS rules from
- * `@media` and `@import` blocks where the media query is (a) "tag scoped selector",
- * and (b) matches the specified tag name.
- *
- * Examples of such media queries:
- * - `@media vaadin-text-field { ... }`
- * - `@import "styles.css" vaadin-text-field`
- *
- * The returned rules are ordered in the same way as they are in the original stylesheet.
- *
- * @param {DocumentOrShadowRoot} root
- * @param {string} tagName
- * @return {CSSRule[]}
- */
-export function extractTagScopedCSSRules(root, tagName) {
-  const styleSheets = new Set([...root.styleSheets]);
-  const adoptedStyleSheets = new Set([...root.adoptedStyleSheets]);
-  return [...styleSheets.union(adoptedStyleSheets)].flatMap((styleSheet) => {
-    return extractStyleSheetTagScopedCSSRules(styleSheet, tagName);
-  });
-}