@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/routes/app/offers/scripts/rendering/locations/header/RuleWrapper.js

@@ -0,0 +1,46 @@
+/**
+ * This class is used to wrap CSS rules in a wrapper that can be used to create new CSS rule with the original rule wrapper.
+ * Example:
+ *
+ * Given a CSS rule:
+ * @media (max-width: 1000px) {
+ *   .test-selector {
+ *     color: red;
+ *   }
+ * }
+ *
+ * We can create a new rule wrapper with the original rule wrapper by calling the `getRuleWrapper` method.
+ *
+ * const wrapper = RuleWrapper.getRuleWrapper(rule);
+ * wrapper would be:
+ * @media (max-width: 1000px) {
+ *   {{QUALIFIED_CSS_PLACEHOLDER}}
+ * }
+ *
+ * We can then use the wrapper to create a new rule wrapper with the original rule wrapper by calling the `wrap` method.
+ *
+ * const newWrapper = RuleWrapper.wrap(wrapper, ".test-selector { color: blue; }");
+ * newWrapper would be:
+ * @media (max-width: 1000px) {
+ *   .test-selector { color: blue; }
+ * }
+ */ class RuleWrapper {
+    static wrap(wrapper, cssText) {
+        return wrapper ? wrapper.replace(this.CSS_PLACEHOLDER, cssText) : cssText;
+    }
+    static getRuleWrapper(rule) {
+        if (!rule.parentRule) return undefined;
+        let parent = rule;
+        let finalCssText = this.CSS_PLACEHOLDER;
+        while(parent.parentRule){
+            if (parent.parentRule instanceof CSSGroupingRule) {
+                finalCssText = parent.parentRule.cssText.split("{")[0] + " { " + finalCssText + " }";
+            }
+            parent = parent.parentRule;
+        }
+        return finalCssText;
+    }
+}
+RuleWrapper.CSS_PLACEHOLDER = "{{QUALIFIED_CSS_PLACEHOLDER}}";
+
+export { RuleWrapper };

package/routes/app/offers/scripts/rendering/locations/header/SelectorObservable.js

@@ -0,0 +1,23 @@
+/**
+ * This class contains the set of rules and selectors that should be observed
+ * And also a selector that should be ignored
+ */ class SelectorObservable {
+    get value() {
+        return this._value;
+    }
+    computeValue() {
+        const includedSelector = [
+            this.includedSelector,
+            ...this.rules.map((rule)=>rule.selector)
+        ].join(",");
+        return ":is(" + includedSelector + "):not(:is(" + this.ignoredSelector + "))";
+    }
+    constructor(rules, includedSelector, ignoredSelector){
+        this.rules = rules;
+        this.includedSelector = includedSelector;
+        this.ignoredSelector = ignoredSelector;
+        this._value = this.computeValue();
+    }
+}
+
+export { SelectorObservable };

package/routes/app/offers/scripts/rendering/locations/header/SelectorObserver.js

@@ -0,0 +1,61 @@
+import { StyleSelectorObserver } from "./StyleSelectorObserver/StyleSelectorObserver.js";
+
+
+/**
+ * A class that uses the style selector observer to compute a selector that can be used to filter
+ * the elements we want to shift. This selector gets all the fixed, sticky elements and all the absolute elements relative to the body across all media queries.
+ * We then use these elements as a base set of candidates to apply further filtering.
+ */ class SelectorObserver {
+    get current() {
+        var _this__current;
+        return (_this__current = this._current) != null ? _this__current : this._current = this.compute(this.styleSelectorObserver.current);
+    }
+    init() {
+        this.isDisposed = false;
+        this.styleSelectorObserver.observe(this.onSelectorChange, this.properties);
+    }
+    dispose() {
+        this.styleSelectorObserver.unobserve(this.onSelectorChange);
+        this.isDisposed = true;
+        this.observers.clear();
+    }
+    observe(observer) {
+        this.observers.add(observer);
+        return ()=>this.unobserve(observer);
+    }
+    unobserve(observer) {
+        this.observers.delete(observer);
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(compute, properties){
+        this.compute = compute;
+        this.properties = properties;
+        this.styleSelectorObserver = StyleSelectorObserver.getInstance();
+        this.isDisposed = true;
+        this._current = null;
+        this.observers = new Set();
+        this.onSelectorChange = ()=>{
+            if (this.isDisposed) return;
+            const { didChange, newObservable } = this.computeNewObservable();
+            if (!didChange) return;
+            this._current = newObservable;
+            for (const observer of this.observers){
+                observer(newObservable);
+            }
+        };
+        this.computeNewObservable = ()=>{
+            var _this__current;
+            const newObservable = this.compute(this.styleSelectorObserver.current);
+            if (((_this__current = this._current) == null ? void 0 : _this__current.value) === newObservable.value) return {
+                didChange: false,
+                newObservable
+            };
+            return {
+                didChange: true,
+                newObservable
+            };
+        };
+    }
+}
+
+export { SelectorObserver };

package/routes/app/offers/scripts/rendering/locations/header/ShiftedElementsManager.js

@@ -0,0 +1,45 @@
+/**
+ * Class managing shifted elements
+ * It keeps track of all the elements that are currently shifted
+ * And sets the data attribute on the elements that are shifted
+ */ class ShiftedElementsManager {
+    get elements() {
+        return this.shiftedElements;
+    }
+    init() {
+        this.isDisposed = false;
+        this.shiftedElements = new Set();
+    }
+    dispose() {
+        this.isDisposed = true;
+        if (!this.shiftedElements) return;
+        for (const element of this.shiftedElements){
+            element.removeAttribute(this.options.dataAttribute);
+        }
+        this.shiftedElements.clear();
+        this.shiftedElements = null;
+    }
+    add(element) {
+        if (!this.shiftedElements || this.isDisposed) return;
+        this.shiftedElements.add(element);
+        element.setAttribute(this.options.dataAttribute, "true");
+    }
+    has(element) {
+        var _ref;
+        var _this_shiftedElements;
+        return (_ref = (_this_shiftedElements = this.shiftedElements) == null ? void 0 : _this_shiftedElements.has(element)) != null ? _ref : false;
+    }
+    remove(element) {
+        if (!this.shiftedElements || this.isDisposed) return;
+        this.shiftedElements.delete(element);
+        element.removeAttribute(this.options.dataAttribute);
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(options){
+        this.options = options;
+        this.shiftedElements = null;
+        this.isDisposed = true;
+    }
+}
+
+export { ShiftedElementsManager };

package/routes/app/offers/scripts/rendering/locations/header/StyleElementManager.js

@@ -0,0 +1,37 @@
+import { StyleElementWrapper } from "./StyleElementWrapper.js";
+
+
+const InstancesConfig = {
+    header: [
+        "htmlOffset",
+        "externalStylesOffset"
+    ]
+};
+// Class that manages style elements
+// It is used to ensure we dispose of all the style elements when the instance is disposed
+class StyleElementManager {
+    static get(key) {
+        var _this_instances_key;
+        return (_this_instances_key = this.instances[key]) != null ? _this_instances_key : this.instances[key] = new StyleElementManager(key, InstancesConfig[key]);
+    }
+    get(id) {
+        return this.styleElements[id];
+    }
+    dispose() {
+        for (const id of this.ids){
+            this.styleElements[id].dispose();
+        }
+        delete StyleElementManager.instances[this.key];
+    }
+    constructor(key, ids){
+        this.key = key;
+        this.ids = ids;
+        this.styleElements = {};
+        for (const id of ids){
+            this.styleElements[id] = new StyleElementWrapper();
+        }
+    }
+}
+StyleElementManager.instances = {};
+
+export { StyleElementManager };

package/routes/app/offers/scripts/rendering/locations/header/StyleElementWrapper.js

@@ -0,0 +1,62 @@
+// Wrapper for a style element that can be added to the document head
+// It is used to create and manage a style element
+const STYLE_ELEMENT_ID_PREFIX = "qualified-offer-style-element-";
+/**
+ * Wrapper around a style element that can be added to the document head
+ * It is used to create and manage a style element
+ */ class StyleElementWrapper {
+    static isStyleElementWrapper(element) {
+        return element.id.startsWith(STYLE_ELEMENT_ID_PREFIX);
+    }
+    addRule(cssText) {
+        this._rules.push(cssText);
+    }
+    clearRules() {
+        this._rules = [];
+    }
+    writeRules() {
+        let css = "";
+        for (const cssText of this._rules){
+            css += cssText;
+        }
+        this.styleElement.textContent = css;
+    }
+    init(param) {
+        let { disabled = false, rules = [] } = param === void 0 ? {} : param;
+        for (const cssText of rules){
+            this.addRule(cssText);
+        }
+        rules.length > 0 && this.writeRules();
+        !disabled && this.enable();
+    }
+    dispose() {
+        this.styleElement.textContent = "";
+        this._rules = [];
+        this.styleElement.remove();
+    }
+    enable() {
+        if (!this.styleElement.isConnected) {
+            document.head.appendChild(this.styleElement);
+            // Check if the style element is connected otherwise append it to the body
+            // Some websites won't allow the style element to be appended to the head
+            queueMicrotask(()=>{
+                if (!this.styleElement.isConnected) {
+                    document.body.appendChild(this.styleElement);
+                }
+            });
+        }
+    }
+    disable() {
+        this.styleElement.remove();
+    }
+    constructor(){
+        this.id = "" + STYLE_ELEMENT_ID_PREFIX + StyleElementWrapper.id++;
+        // DO NOT USE a Set here, it will break the order of the rules
+        this._rules = [];
+        this.styleElement = document.createElement("style");
+        this.styleElement.id = this.id;
+    }
+}
+StyleElementWrapper.id = 0;
+
+export { StyleElementWrapper };

package/routes/app/offers/scripts/rendering/locations/header/StyleSelectorObserver/ObservedSelectorValue.js

@@ -0,0 +1,45 @@
+import { RuleWrapper } from "../RuleWrapper.js";
+
+
+class ReadonlyObservedSelectorValue {
+    get rules() {
+        return this.observedSelectorValue.rules;
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(observedSelectorValue){
+        this.observedSelectorValue = observedSelectorValue;
+    }
+}
+class ObservedSelectorValue {
+    get rules() {
+        return this._rulesInfo;
+    }
+    hasRule(rule) {
+        return this._rules.has(rule);
+    }
+    addRule(rule) {
+        if (this._rules.has(rule)) return;
+        this._rules.add(rule);
+        this._rulesInfo.add({
+            rule,
+            selector: rule.selectorText,
+            priority: rule.style.getPropertyPriority(this.property),
+            value: rule.style.getPropertyValue(this.property),
+            wrapper: RuleWrapper.getRuleWrapper(rule)
+        });
+    }
+    clear() {
+        this._rules.clear();
+        this._rulesInfo.clear();
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(property){
+        this.property = property;
+        this.readonly = new ReadonlyObservedSelectorValue(this);
+        this._rulesInfo = new Set();
+        this._rules = new Set();
+    }
+}
+
+var ObservedSelectorValue_ReadonlyObservedSelectorValue = /* unused export */ undefined;
+export { ObservedSelectorValue, ObservedSelectorValue_ReadonlyObservedSelectorValue as ReadonlyObservedSelectorValue };

package/routes/app/offers/scripts/rendering/locations/header/StyleSelectorObserver/ObservedSelectors.js

@@ -0,0 +1,62 @@
+import { ObservedSelectorValue } from "./ObservedSelectorValue.js";
+import { PROPERTIES } from "./constants.js";
+
+
+
+class ReadonlyObservedSelectors {
+    get(key) {
+        return this.selectors.get(key);
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(selectors){
+        this.selectors = selectors;
+    }
+}
+class ObservedSelectors {
+    get(key) {
+        // Map is guaranteed to have the key since we initialize it in the constructor
+        return this._map.get(key).readonly;
+    }
+    getChangedProperties(param) {
+        let { clear = false } = param === void 0 ? {} : param;
+        const changedProperties = new Set(this._changedProperties);
+        if (clear) this.clearChangedProperties();
+        return changedProperties;
+    }
+    addRule(key, rule) {
+        const value = this._map.get(key);
+        if (value.hasRule(rule)) return;
+        value.addRule(rule);
+        this.setChangedProperties(key);
+    }
+    clear() {
+        for (const value of this._map.values()){
+            value.clear();
+        }
+        this.setChangedProperties(...this._map.keys());
+    }
+    setChangedProperties() {
+        for(var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++){
+            properties[_key] = arguments[_key];
+        }
+        for (const property of properties){
+            this._changedProperties.add(property);
+        }
+    }
+    clearChangedProperties() {
+        this._changedProperties.clear();
+    }
+    constructor(){
+        this.readonly = new ReadonlyObservedSelectors(this);
+        this._map = new Map();
+        this._changedProperties = new Set();
+        this._map = new Map();
+        for (const [property, value] of PROPERTIES){
+            const key = property + ":" + value;
+            this._map.set(key, new ObservedSelectorValue(property));
+        }
+    }
+}
+
+var ObservedSelectors_ReadonlyObservedSelectors = /* unused export */ undefined;
+export { ObservedSelectors, ObservedSelectors_ReadonlyObservedSelectors as ReadonlyObservedSelectors };

package/routes/app/offers/scripts/rendering/locations/header/StyleSelectorObserver/StyleSelectorObserver.js

@@ -0,0 +1,294 @@
+import { __webpack_require__ } from "../../../../../../../../js/runtime.js";
+import { _debugLog } from "../../../../../../../../src/smart_website/utils.js";
+import { AsyncBatchProcessor } from "../AsyncBatchProcessor.js";
+import { StyleElementWrapper } from "../StyleElementWrapper.js";
+import { ObservedSelectors } from "./ObservedSelectors.js";
+import "../../../../../../../../widget/utils/native_globals.js";
+import { PROPERTIES, OBSERVED_PROPERTIES } from "./constants.js";
+
+/* provided dependency */ var StyleSelectorObserver_setTimeout = __webpack_require__(68034).pS;
+/* eslint-disable no-continue */ 
+
+
+
+
+const CROSSORIGIN_NODE_DATA_ATTRIBUTE = "qualified-offer-crossorigin-node";
+const CROSSORIGIN_NODE_LOAD_TIMEOUT = 5000;
+/**
+ * This class observes the stylesheets and style tags in the document and
+ * keeps track of the selectors that have defined the observed properties.
+ *
+ * Example: we have the following observed property: ["position", "fixed"]
+ * If we have the following css rules:
+ *
+ * .header { position: fixed; top: 0; }
+ * .footer { position: fixed; bottom: 0; }
+ * div > p { position: fixed; }
+ *
+ * The class will keep track of the selectors that have the property "position: fixed"
+ * and also include the elements with inline styles that have the property "position: fixed"
+ * and will return the following map:
+ *
+ * Map {
+ *  "position:fixed" => "*[style*="position:fixed"]`, `*[style*="position: fixed"], .header, .footer, div > p"
+ * }
+ *
+ * This offers a faster way to get the elements that have the required properties
+ * than iterating over all the elements and checking their computed styles.
+ */ class StyleSelectorObserver {
+    static setConfig(config) {
+        this.config = config;
+    }
+    static getInstance() {
+        var _this_instance;
+        return (_this_instance = this.instance) != null ? _this_instance : this.instance = new StyleSelectorObserver();
+    }
+    get current() {
+        return this.observedSelectors.readonly;
+    }
+    // This method is used to lazy load the observer and start observing the stylesheets
+    async load() {
+        var _ref;
+        var _StyleSelectorObserver_config, _this_crossOriginStylesheetsHolder_shadowRoot;
+        if (this.initialized) return;
+        this.observe(StyleSelectorObserver.noop);
+        if (!((_StyleSelectorObserver_config = StyleSelectorObserver.config) == null ? void 0 : _StyleSelectorObserver_config.handleCrossOriginStylesheets) || !this.crossOriginStylesheetsHolder) {
+            return;
+        }
+        const promises = [];
+        const nodes = (_ref = (_this_crossOriginStylesheetsHolder_shadowRoot = this.crossOriginStylesheetsHolder.shadowRoot) == null ? void 0 : _this_crossOriginStylesheetsHolder_shadowRoot.querySelectorAll("link")) != null ? _ref : [];
+        for (const node of nodes){
+            promises.push(new Promise((resolve, reject)=>{
+                try {
+                    if (node.sheet) {
+                        resolve(void 0);
+                    } else {
+                        node.addEventListener("load", resolve);
+                        node.addEventListener("error", reject);
+                        node.addEventListener("abort", reject);
+                        node.addEventListener("timeout", reject);
+                    }
+                } catch (unused) {
+                    reject(new Error("Failed to load cross-origin stylesheet"));
+                }
+            }));
+        }
+        await Promise.race([
+            Promise.allSettled(promises).then(()=>this.selectorUpdateQueue.executeImmediately()),
+            // Ensure we don't block the header from rendering
+            new Promise((resolve)=>StyleSelectorObserver_setTimeout(resolve, CROSSORIGIN_NODE_LOAD_TIMEOUT))
+        ]);
+    }
+    observe(observer, properties) {
+        if (properties === void 0) properties = OBSERVED_PROPERTIES;
+        if (observer !== StyleSelectorObserver.noop) {
+            // Disconnect the lazy observer when a real observer is added
+            this.unobserve(StyleSelectorObserver.noop);
+        }
+        this.initialize();
+        this.observers.set(observer, properties);
+        // Request immediate callback
+        this.selectorUpdateQueue.executeImmediately();
+        return ()=>this.unobserve(observer);
+    }
+    unobserve(observer) {
+        this.observers.delete(observer);
+    }
+    dispose() {
+        var _this_styleNodesObserver, _this_crossOriginStylesheetsHolder;
+        (_this_styleNodesObserver = this.styleNodesObserver) == null ? void 0 : _this_styleNodesObserver.disconnect();
+        this.styleNodesObserver = null;
+        this.selectorUpdateQueue.clearAndCancel();
+        (_this_crossOriginStylesheetsHolder = this.crossOriginStylesheetsHolder) == null ? void 0 : _this_crossOriginStylesheetsHolder.remove();
+        this.observers.clear();
+        this.observedSelectors.clear();
+        this.initialized = false;
+    }
+    initialize() {
+        if (this.initialized) return;
+        this.initialized = true;
+        // Create a hidden div to hold cross-origin stylesheets
+        this.insertCrossOriginStylesheetHolder();
+        // Listen for new stylesheets and style tags and add the rules that have a the required properties
+        this.styleNodesObserver = new MutationObserver(this.handleStyleMutations);
+        this.styleNodesObserver.observe(document.head, {
+            childList: true
+        });
+        this.styleNodesObserver.observe(document.body, {
+            childList: true
+        });
+        this.styleNodesObserver.observe(this.crossOriginStylesheetsHolder.shadowRoot, {
+            childList: true
+        });
+        // Go through all stylesheets and find all the rules that have the required properties
+        for (const sheet of document.styleSheets){
+            this.handle(sheet);
+        }
+    }
+    insertCrossOriginStylesheetHolder() {
+        this.crossOriginStylesheetsHolder = document.createElement("div");
+        this.crossOriginStylesheetsHolder.style.display = "none";
+        this.crossOriginStylesheetsHolder.attachShadow({
+            mode: "open"
+        });
+        document.body.appendChild(this.crossOriginStylesheetsHolder);
+    }
+    shouldHandle(nodeOrHref) {
+        const url = new URL(nodeOrHref instanceof HTMLLinkElement ? nodeOrHref.href : nodeOrHref);
+        // Skip family stylesheets since we don't care about fonts
+        if (url.searchParams.has("family")) {
+            return false;
+        }
+        return true;
+    }
+    handle(node) {
+        if (node instanceof HTMLStyleElement && StyleElementWrapper.isStyleElementWrapper(node)) {
+            return;
+        }
+        const sheet = node instanceof CSSStyleSheet ? node : node.sheet;
+        if (!sheet) return;
+        let rules = null;
+        const isCrossOrigin = sheet.href && !sheet.href.startsWith(window.location.origin) && sheet.ownerNode instanceof HTMLLinkElement && (sheet.ownerNode.crossOrigin === null || sheet.ownerNode.crossOrigin === "use-credentials");
+        if (isCrossOrigin) {
+            this.handleCrossOriginStylesheet(sheet);
+            return;
+        }
+        try {
+            rules = sheet.cssRules;
+        } catch (unused) {
+            var _sheet_href;
+            this.debugLog("Failed to get css rules", {
+                href: (_sheet_href = sheet.href) != null ? _sheet_href : "no href"
+            });
+            if (node instanceof HTMLElement && node.hasAttribute(CROSSORIGIN_NODE_DATA_ATTRIBUTE)) {
+                var _sheet_href1;
+                this.debugLog("Failed to get css rules with cross origin node", {
+                    href: (_sheet_href1 = sheet.href) != null ? _sheet_href1 : "no href"
+                });
+                node.remove();
+            } else {
+                // Handle in case the above condition didn't catch it
+                this.handleCrossOriginStylesheet(sheet);
+            }
+            return;
+        }
+        this.iterateRules(rules);
+        if (node instanceof HTMLElement && node.hasAttribute(CROSSORIGIN_NODE_DATA_ATTRIBUTE)) {
+            node.remove();
+        }
+    }
+    handleCrossOriginStylesheet(sheet) {
+        var _StyleSelectorObserver_config, _StyleSelectorObserver_config1, _this_crossOriginStylesheetsHolder_shadowRoot, _this_crossOriginStylesheetsHolder;
+        if (!((_StyleSelectorObserver_config = StyleSelectorObserver.config) == null ? void 0 : _StyleSelectorObserver_config.handleCrossOriginStylesheets) || !sheet.href || !this.shouldHandle(sheet.href)) {
+            return;
+        }
+        let node;
+        if (sheet.ownerNode instanceof HTMLLinkElement) {
+            node = sheet.ownerNode.cloneNode();
+        } else {
+            var _sheet_href;
+            node = document.createElement("link");
+            node.href = (_sheet_href = sheet.href) != null ? _sheet_href : "";
+            node.rel = "stylesheet";
+        }
+        // Optionally add cache-busting param to force a fresh request.
+        // Without this, the browser may serve a cached non-CORS response
+        // (from the original request without crossOrigin), causing CORS errors.
+        if ((_StyleSelectorObserver_config1 = StyleSelectorObserver.config) == null ? void 0 : _StyleSelectorObserver_config1.cacheBustCrossOriginStylesheets) {
+            const url = new URL(node.href);
+            url.searchParams.set("_q_cache_bust", "1");
+            node.href = url.toString();
+        }
+        node.crossOrigin = "anonymous";
+        node.setAttribute("async", "");
+        node.setAttribute(CROSSORIGIN_NODE_DATA_ATTRIBUTE, "");
+        (_this_crossOriginStylesheetsHolder = this.crossOriginStylesheetsHolder) == null ? void 0 : (_this_crossOriginStylesheetsHolder_shadowRoot = _this_crossOriginStylesheetsHolder.shadowRoot) == null ? void 0 : _this_crossOriginStylesheetsHolder_shadowRoot.appendChild(node);
+    }
+    iterateRules(rules) {
+        for (const rule of rules != null ? rules : []){
+            if (rule instanceof CSSGroupingRule) {
+                this.iterateRules(rule.cssRules);
+            }
+            if (rule instanceof CSSImportRule) {
+                if (rule.styleSheet) {
+                    this.handle(rule.styleSheet);
+                }
+                continue;
+            }
+            if (!(rule instanceof CSSStyleRule)) continue;
+            for(let i = 0; i < PROPERTIES.length; i++){
+                const [property, value] = PROPERTIES[i];
+                const styleValue = rule.style.getPropertyValue(property);
+                if (!styleValue) continue;
+                if (value === "*") {
+                    this.observedSelectors.addRule("" + property + ":*", rule);
+                } else if (styleValue === value) {
+                    this.observedSelectors.addRule(property + ":" + value, rule);
+                }
+            }
+        }
+    }
+    requestUpdate(node) {
+        this.selectorUpdateQueue.add(node);
+        // No need to process if there is no listeners
+        if (this.observers.size === 0) return;
+        this.selectorUpdateQueue.scheduleExecution();
+    }
+    notify(properties) {
+        for (const [cb, observerProperties] of this.observers){
+            if (observerProperties.some((property)=>properties.has(property))) {
+                cb(this.current);
+            }
+        }
+    }
+    debugLog(message, context) {
+        _debugLog("[StyleSelectorObserver] " + message, context);
+    }
+    // Make sure the instance is a singleton to ensure that we don't have multiple observers
+    // eslint-disable-next-line no-useless-constructor
+    constructor(){
+        this.initialized = false;
+        this.observedSelectors = new ObservedSelectors();
+        this.styleNodesObserver = null;
+        this.crossOriginStylesheetsHolder = null;
+        this.observers = new Map();
+        this.handleStyleMutations = (mutations)=>{
+            const nodes = new Set();
+            for (const mutation of mutations){
+                if (mutation.type === "childList") {
+                    for (const node of mutation.addedNodes){
+                        if (node instanceof HTMLStyleElement || node instanceof HTMLLinkElement && node.rel === "stylesheet") {
+                            nodes.add(node);
+                        }
+                    }
+                }
+            }
+            for (const node of nodes){
+                if (node instanceof HTMLStyleElement) {
+                    this.requestUpdate(node);
+                }
+                if (node instanceof HTMLLinkElement && this.shouldHandle(node)) {
+                    node.addEventListener("load", ()=>this.requestUpdate(node));
+                }
+            }
+        };
+        this.processNodes = (nodes)=>{
+            for (const node of nodes){
+                this.handle(node);
+            }
+            // No need to request callback if there is no listeners
+            if (this.observers.size === 0) return;
+            const changedProperties = this.observedSelectors.getChangedProperties({
+                clear: true
+            });
+            if (changedProperties.size === 0) return;
+            this.notify(changedProperties);
+        };
+        this.selectorUpdateQueue = new AsyncBatchProcessor(this.processNodes);
+    }
+}
+StyleSelectorObserver.config = null;
+StyleSelectorObserver.instance = null;
+StyleSelectorObserver.noop = ()=>{};
+
+export { StyleSelectorObserver };