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

package/{css-injection-mixin.js → lumo-injection-mixin.js}

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { CSSInjector } from './src/css-injector.js';
+import { LumoInjector } from './src/lumo-injector.js';
 
 /**
  * @type {Set<string>}
@@ -31,12 +31,12 @@ function findRoot(element) {
  *
  * @polymerMixin
  */
-export const CSSInjectionMixin = (superClass) =>
-  class CSSInjectionMixinClass extends superClass {
+export const LumoInjectionMixin = (superClass) =>
+  class LumoInjectionMixinClass extends superClass {
     static finalize() {
       super.finalize();
 
-      const propName = this.cssInjectPropName;
+      const propName = this.lumoInjectPropName;
 
       // Prevent registering same property twice when a class extends
       // another class using this mixin, since `finalize()` is called
@@ -57,8 +57,8 @@ export const CSSInjectionMixin = (superClass) =>
       }
     }
 
-    static get cssInjectPropName() {
-      return `--${this.is}-css-inject`;
+    static get lumoInjectPropName() {
+      return `--${this.is}-lumo-inject`;
     }
 
     /** @protected */
@@ -67,9 +67,9 @@ export const CSSInjectionMixin = (superClass) =>
 
       if (this.isConnected) {
         const root = findRoot(this);
-        root.__cssInjector ||= new CSSInjector(root);
-        this.__cssInjector = root.__cssInjector;
-        this.__cssInjector.componentConnected(this);
+        root.__lumoInjector ||= new LumoInjector(root);
+        this.__lumoInjector = root.__lumoInjector;
+        this.__lumoInjector.componentConnected(this);
       }
     }
 
@@ -77,12 +77,12 @@ export const CSSInjectionMixin = (superClass) =>
     disconnectedCallback() {
       super.disconnectedCallback();
 
-      // Check if CSSInjector is defined. It might be unavailable if the component
+      // Check if LumoInjector 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;
+      // before LumoInjector is assigned.
+      if (this.__lumoInjector) {
+        this.__lumoInjector.componentDisconnected(this);
+        this.__lumoInjector = undefined;
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-alpha4",
+  "version": "25.0.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,7 @@
   "files": [
     "src",
     "*.d.ts",
-    "css-injection-mixin.js",
+    "lumo-injection-mixin.js",
     "register-styles.js",
     "vaadin-*.js"
   ],
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha4",
-    "@vaadin/test-runner-commands": "25.0.0-alpha4",
+    "@vaadin/chai-plugins": "25.0.0-alpha6",
+    "@vaadin/test-runner-commands": "25.0.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
+  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
 }

package/src/css-property-observer.js

@@ -23,13 +23,13 @@ export class CSSPropertyObserver {
     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);
+        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;
       }
     `);
     this.#root.adoptedStyleSheets.unshift(styleSheet);

package/src/css-utils.js

@@ -17,7 +17,7 @@ import { adoptStyles } from 'lit';
 function getEffectiveStyles(component) {
   const componentClass = component.constructor;
 
-  const styleSheet = component.__cssInjectorStyleSheet;
+  const styleSheet = component.__lumoInjectorStyleSheet;
   if (styleSheet) {
     return (componentClass.baseStyles ?? componentClass.themeStyles)
       ? [...componentClass.baseStyles, styleSheet, ...componentClass.themeStyles]
@@ -33,10 +33,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));
 }
 
@@ -49,23 +45,23 @@ 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.__lumoInjectorStyleSheet = 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) {
+export function cleanupLumoStyleSheet(component) {
   const adoptedStyleSheets = component.shadowRoot.adoptedStyleSheets.filter(
-    (s) => s !== component.__cssInjectorStyleSheet,
+    (s) => s !== component.__lumoInjectorStyleSheet,
   );
 
   component.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-  component.__cssInjectorStyleSheet = undefined;
+  component.__lumoInjectorStyleSheet = undefined;
 }

package/src/lumo-injector.js

@@ -0,0 +1,142 @@
+/**
+ * @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 { cleanupLumoStyleSheet, injectLumoStyleSheet } 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 {
+ *   --vaadin-text-field-lumo-inject: 1;
+ *   --vaadin-text-field-lumo-inject-modules:
+ *      lumo_base-field,
+ *      lumo_text-field;
+ *
+ *   --vaadin-email-field-lumo-inject: 1;
+ *   --vaadin-email-field-lumo-inject-modules:
+ *      lumo_base-field,
+ *      lumo_email-field;
+ * }
+ * ```
+ *
+ * The class observes the custom property `--{tagName}-lumo-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
+ * 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.
+ * 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();
+
+  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);
+    });
+  }
+
+  /**
+   * 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
+   * the styles are added to the document or root element.
+   *
+   * @param {HTMLElement} component
+   */
+  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.#updateComponentStyleSheet(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) {
+    cleanupLumoStyleSheet(component);
+  }
+
+  #updateComponentStyleSheet(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) ?? new CSSStyleSheet();
+    stylesheet.replaceSync(cssText);
+    this.#styleSheetsByTag.set(tagName, stylesheet);
+  }
+
+  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

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/** @type {WeakMap<CSSStyleSheet, Record<string, Map>>} */
+const cache = new WeakMap();
+
+function parseStyleSheet(
+  styleSheet,
+  result = {
+    tags: new Map(),
+    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;
+
+    if (rule instanceof CSSImportRule) {
+      if (media?.mediaText.startsWith('lumo_')) {
+        result.modules.set(media.mediaText, [...rule.styleSheet.cssRules]);
+      } else {
+        parseStyleSheet(rule.styleSheet, result);
+      }
+
+      continue;
+    }
+
+    if (rule instanceof CSSMediaRule) {
+      if (media?.mediaText.startsWith('lumo_')) {
+        result.modules.set(media.mediaText, [...rule.cssRules]);
+      }
+
+      continue;
+    }
+
+    if (rule instanceof CSSStyleRule && rule.cssText.includes('-lumo-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 {
+ *   --vaadin-text-field-lumo-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.js

@@ -354,11 +354,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()`.

package/src/css-injector.js

@@ -1,102 +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/
- */
-import { CSSPropertyObserver } from './css-property-observer.js';
-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.
- *
- * @private
- */
-export class CSSInjector {
-  /** @type {Document | ShadowRoot} */
-  #root;
-
-  /** @type {CSSPropertyObserver} */
-  #cssPropertyObserver;
-
-  /** @type {Map<string, CSSStyleSheet>} */
-  #styleSheetsByTag = new Map();
-
-  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);
-    });
-  }
-
-  /**
-   * 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;
-
-    const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
-    injectStyleSheet(component, stylesheet);
-    this.#styleSheetsByTag.set(tagName, stylesheet);
-
-    this.#updateComponentStyleSheet(tagName);
-
-    this.#cssPropertyObserver.observe(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) {
-    cleanupStyleSheet(component);
-  }
-
-  #updateComponentStyleSheet(tagName) {
-    const roots = new Set([document, this.#root]);
-
-    const cssText = [...roots]
-      .flatMap((root) => extractTagScopedCSSRules(root, tagName))
-      .map((rule) => rule.cssText)
-      .join('\n');
-
-    const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
-    stylesheet.replaceSync(cssText);
-    this.#styleSheetsByTag.set(tagName, stylesheet);
-  }
-}

package/src/css-rules.js

@@ -1,133 +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
-const mediaRulesCache = new WeakMap();
-
-/**
- * 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);
-}
-
-/**
- * Recursively processes a style sheet for media rules that match
- * the specified predicate.
- *
- * @param {CSSStyleSheet} styleSheet
- * @param {(rule: CSSRule) => boolean} predicate
- * @return {Array<CSSMediaRule | CSSImportRule>}
- */
-function extractMediaRulesFromStyleSheet(styleSheet, predicate) {
-  const result = [];
-
-  for (const rule of styleSheet.cssRules) {
-    const ruleType = rule.constructor.name;
-
-    if (ruleType === 'CSSImportRule') {
-      if (predicate(rule)) {
-        result.push(rule);
-      } else {
-        result.push(...extractMediaRulesFromStyleSheet(rule.styleSheet, predicate));
-      }
-    }
-
-    if (ruleType === 'CSSMediaRule') {
-      if (predicate(rule)) {
-        result.push(rule);
-      }
-    }
-  }
-
-  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),
-  );
-}
-
-/**
- * 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 extractTagScopedCSSRulesFromStyleSheet(styleSheet, tagName);
-  });
-}