@nativescript/core 8.8.0-embed.0 → 8.8.0-embed.1-next-07-02-2024-9764786230

package/ui/styling/css-selector.js

@@ -1,7 +1,30 @@
+import { parse as convertToCSSWhatSelector } from 'css-what';
 import '../../globals';
 import { isCssVariable } from '../core/properties';
 import { isNullOrUndefined } from '../../utils/types';
-import { parseSelector } from '../../css/parser';
+import { CSSUtils } from '../../css/system-classes';
+import { checkIfMediaQueryMatches } from '../../media-query-list';
+export const MEDIA_QUERY_SEPARATOR = '&&';
+var Combinator;
+(function (Combinator) {
+    Combinator["descendant"] = " ";
+    Combinator["child"] = ">";
+    Combinator["adjacent"] = "+";
+    Combinator["sibling"] = "~";
+    // Not supported
+    Combinator["parent"] = "<";
+    Combinator["column-combinator"] = "||";
+})(Combinator || (Combinator = {}));
+var AttributeSelectorOperator;
+(function (AttributeSelectorOperator) {
+    AttributeSelectorOperator["exists"] = "";
+    AttributeSelectorOperator["equals"] = "=";
+    AttributeSelectorOperator["start"] = "^=";
+    AttributeSelectorOperator["end"] = "$=";
+    AttributeSelectorOperator["any"] = "*=";
+    AttributeSelectorOperator["element"] = "~=";
+    AttributeSelectorOperator["hyphen"] = "|=";
+})(AttributeSelectorOperator || (AttributeSelectorOperator = {}));
 var Match;
 (function (Match) {
     /**
@@ -13,7 +36,22 @@ var Match;
      */
     Match.Static = false;
 })(Match || (Match = {}));
-function getNodeDirectSibling(node) {
+function eachNodePreviousGeneralSibling(node, callback) {
+    if (!node.parent || !node.parent.getChildIndex || !node.parent.getChildAt || !node.parent.getChildrenCount) {
+        return;
+    }
+    const nodeIndex = node.parent.getChildIndex(node);
+    if (nodeIndex === 0) {
+        return;
+    }
+    const count = node.parent.getChildrenCount();
+    let retVal = true;
+    for (let i = nodeIndex - 1; i >= 0 && retVal; i--) {
+        const sibling = node.parent.getChildAt(i);
+        retVal = callback(sibling);
+    }
+}
+function getNodePreviousDirectSibling(node) {
     if (!node.parent || !node.parent.getChildIndex || !node.parent.getChildAt) {
         return null;
     }
@@ -32,7 +70,19 @@ function SelectorProperties(specificity, rarity, dynamic = false) {
         return cls;
     };
 }
-let SelectorCore = class SelectorCore {
+function FunctionalPseudoClassProperties(specificity, rarity, pseudoSelectorListType) {
+    return (cls) => {
+        cls.prototype.specificity = specificity;
+        cls.prototype.rarity = rarity;
+        cls.prototype.combinator = undefined;
+        cls.prototype.dynamic = false;
+        cls.prototype.pseudoSelectorListType = pseudoSelectorListType;
+        return cls;
+    };
+}
+export class SelectorBase {
+}
+let SelectorCore = class SelectorCore extends SelectorBase {
     lookupSort(sorter, base) {
         sorter.sortAsUniversal(base || this);
     }
@@ -69,7 +119,7 @@ let InvalidSelector = class InvalidSelector extends SimpleSelector {
         this.e = e;
     }
     toString() {
-        return `<error: ${this.e}>`;
+        return `<${this.e}>`;
     }
     match(node) {
         return false;
@@ -158,52 +208,55 @@ ClassSelector = __decorate([
 ], ClassSelector);
 export { ClassSelector };
 let AttributeSelector = class AttributeSelector extends SimpleSelector {
-    constructor(attribute, test, value) {
+    constructor(attribute, test, value, ignoreCase) {
         super();
         this.attribute = attribute;
         this.test = test;
         this.value = value;
-        if (!test) {
-            // HasAttribute
-            this.match = (node) => !isNullOrUndefined(node[attribute]);
-            return;
-        }
-        if (!value) {
-            this.match = (node) => false;
-        }
-        this.match = (node) => {
-            const attr = node[attribute] + '';
-            if (test === '=') {
-                // Equals
-                return attr === value;
-            }
-            if (test === '^=') {
-                // PrefixMatch
-                return attr.startsWith(value);
-            }
-            if (test === '$=') {
-                // SuffixMatch
-                return attr.endsWith(value);
-            }
-            if (test === '*=') {
-                // SubstringMatch
-                return attr.indexOf(value) !== -1;
-            }
-            if (test === '~=') {
-                // Includes
-                const words = attr.split(' ');
-                return words && words.indexOf(value) !== -1;
-            }
-            if (test === '|=') {
-                // DashMatch
-                return attr === value || attr.startsWith(value + '-');
-            }
-        };
+        this.ignoreCase = ignoreCase;
     }
     toString() {
-        return `[${this.attribute}${wrap(this.test)}${(this.test && this.value) || ''}]${wrap(this.combinator)}`;
+        return `[${this.attribute}${wrap(AttributeSelectorOperator[this.test] ?? this.test)}${this.value || ''}]${wrap(this.combinator)}`;
     }
     match(node) {
+        let attr = node[this.attribute];
+        if (this.test === 'exists') {
+            return !isNullOrUndefined(attr);
+        }
+        if (!this.value) {
+            return false;
+        }
+        // Now, convert value to string
+        attr += '';
+        if (this.ignoreCase) {
+            attr = attr.toLowerCase();
+            this.value = this.value.toLowerCase();
+        }
+        // =
+        if (this.test === 'equals') {
+            return attr === this.value;
+        }
+        // ^=
+        if (this.test === 'start') {
+            return attr.startsWith(this.value);
+        }
+        // $=
+        if (this.test === 'end') {
+            return attr.endsWith(this.value);
+        }
+        // *=
+        if (this.test === 'any') {
+            return attr.indexOf(this.value) !== -1;
+        }
+        // ~=
+        if (this.test === 'element') {
+            const words = attr.split(' ');
+            return words && words.indexOf(this.value) !== -1;
+        }
+        // |=
+        if (this.test === 'hyphen') {
+            return attr === this.value || attr.startsWith(this.value + '-');
+        }
         return false;
     }
     mayMatch(node) {
@@ -215,7 +268,7 @@ let AttributeSelector = class AttributeSelector extends SimpleSelector {
 };
 AttributeSelector = __decorate([
     SelectorProperties(10 /* Specificity.Attribute */, 0 /* Rarity.Attribute */, Match.Dynamic),
-    __metadata("design:paramtypes", [String, String, String])
+    __metadata("design:paramtypes", [String, String, String, Boolean])
 ], AttributeSelector);
 export { AttributeSelector };
 let PseudoClassSelector = class PseudoClassSelector extends SimpleSelector {
@@ -241,12 +294,100 @@ PseudoClassSelector = __decorate([
     __metadata("design:paramtypes", [String])
 ], PseudoClassSelector);
 export { PseudoClassSelector };
+export class FunctionalPseudoClassSelector extends PseudoClassSelector {
+    constructor(cssPseudoClass, dataType) {
+        super(cssPseudoClass);
+        const selectors = [];
+        const needsHighestSpecificity = this.specificity === -1 /* Specificity.SelectorListHighest */;
+        let specificity = 0;
+        if (Array.isArray(dataType)) {
+            for (const asts of dataType) {
+                const selector = createSelectorFromAst(asts);
+                if (selector instanceof InvalidSelector) {
+                    // Only forgiving selector list can ignore invalid selectors
+                    if (this.selectorListType !== 1 /* PseudoClassSelectorList.Forgiving */) {
+                        selectors.splice(0);
+                        specificity = 0;
+                        break;
+                    }
+                    continue;
+                }
+                // The specificity of some pseudo-classes is replaced by the specificity of the most specific selector in its comma-separated argument of selectors
+                if (needsHighestSpecificity && selector.specificity > specificity) {
+                    specificity = selector.specificity;
+                }
+                selectors.push(selector);
+            }
+        }
+        this.selectors = selectors;
+        this.specificity = specificity;
+        // Functional pseudo-classes become dynamic based on selectors in selector list
+        this.dynamic = this.selectors.some((sel) => sel.dynamic);
+    }
+    toString() {
+        return `:${this.cssPseudoClass}(${this.selectors.join(', ')})${wrap(this.combinator)}`;
+    }
+    match(node) {
+        return false;
+    }
+    mayMatch(node) {
+        return true;
+    }
+    trackChanges(node, map) {
+        this.selectors.forEach((sel) => sel.trackChanges(node, map));
+    }
+}
+let NotFunctionalPseudoClassSelector = class NotFunctionalPseudoClassSelector extends FunctionalPseudoClassSelector {
+    match(node) {
+        return !this.selectors.some((sel) => sel.match(node));
+    }
+};
+NotFunctionalPseudoClassSelector = __decorate([
+    FunctionalPseudoClassProperties(-1 /* Specificity.SelectorListHighest */, 0 /* Rarity.PseudoClass */, 0 /* PseudoClassSelectorList.Regular */)
+], NotFunctionalPseudoClassSelector);
+export { NotFunctionalPseudoClassSelector };
+let IsFunctionalPseudoClassSelector = class IsFunctionalPseudoClassSelector extends FunctionalPseudoClassSelector {
+    match(node) {
+        return this.selectors.some((sel) => sel.match(node));
+    }
+    lookupSort(sorter, base) {
+        // A faster lookup can be performed when selector list contains just a single selector
+        if (this.selectors.length === 1) {
+            this.selectors[0].lookupSort(sorter, base || this);
+        }
+        else {
+            super.lookupSort(sorter, base || this);
+        }
+    }
+};
+IsFunctionalPseudoClassSelector = __decorate([
+    FunctionalPseudoClassProperties(-1 /* Specificity.SelectorListHighest */, 0 /* Rarity.PseudoClass */, 1 /* PseudoClassSelectorList.Forgiving */)
+], IsFunctionalPseudoClassSelector);
+export { IsFunctionalPseudoClassSelector };
+let WhereFunctionalPseudoClassSelector = class WhereFunctionalPseudoClassSelector extends FunctionalPseudoClassSelector {
+    match(node) {
+        return this.selectors.some((sel) => sel.match(node));
+    }
+    lookupSort(sorter, base) {
+        // A faster lookup can be performed when selector list contains just a single selector
+        if (this.selectors.length === 1) {
+            this.selectors[0].lookupSort(sorter, base || this);
+        }
+        else {
+            super.lookupSort(sorter, base || this);
+        }
+    }
+};
+WhereFunctionalPseudoClassSelector = __decorate([
+    FunctionalPseudoClassProperties(0 /* Specificity.Zero */, 0 /* Rarity.PseudoClass */, 1 /* PseudoClassSelectorList.Forgiving */)
+], WhereFunctionalPseudoClassSelector);
+export { WhereFunctionalPseudoClassSelector };
 export class SimpleSelectorSequence extends SimpleSelector {
     constructor(selectors) {
         super();
         this.selectors = selectors;
         this.specificity = selectors.reduce((sum, sel) => sel.specificity + sum, 0);
-        this.head = this.selectors.reduce((prev, curr) => (!prev || curr.rarity > prev.rarity ? curr : prev), null);
+        this.head = selectors.reduce((prev, curr) => (!prev || curr.rarity > prev.rarity ? curr : prev), null);
         this.dynamic = selectors.some((sel) => sel.dynamic);
     }
     toString() {
@@ -265,34 +406,41 @@ export class SimpleSelectorSequence extends SimpleSelector {
         this.head.lookupSort(sorter, base || this);
     }
 }
-export class Selector extends SelectorCore {
+export class ComplexSelector extends SelectorCore {
     constructor(selectors) {
         super();
         this.selectors = selectors;
-        const supportedCombinator = [undefined, ' ', '>', '+'];
-        let siblingGroup;
-        let lastGroup;
+        let siblingsToGroup;
+        let currentGroup;
         const groups = [];
         this.specificity = 0;
         this.dynamic = false;
-        for (let i = selectors.length - 1; i > -1; i--) {
+        for (let i = selectors.length - 1; i >= 0; i--) {
             const sel = selectors[i];
-            if (supportedCombinator.indexOf(sel.combinator) === -1) {
-                throw new Error(`Unsupported combinator "${sel.combinator}".`);
-            }
-            if (sel.combinator === undefined || sel.combinator === ' ') {
-                groups.push((lastGroup = [(siblingGroup = [])]));
-            }
-            if (sel.combinator === '>') {
-                lastGroup.push((siblingGroup = []));
+            switch (sel.combinator) {
+                case undefined:
+                case Combinator.descendant:
+                    siblingsToGroup = [];
+                    currentGroup = [siblingsToGroup];
+                    groups.push(currentGroup);
+                    break;
+                case Combinator.child:
+                    siblingsToGroup = [];
+                    currentGroup.push(siblingsToGroup);
+                    break;
+                case Combinator.adjacent:
+                case Combinator.sibling:
+                    break;
+                default:
+                    throw new Error(`Unsupported combinator "${sel.combinator}" for selector ${sel}.`);
             }
             this.specificity += sel.specificity;
             if (sel.dynamic) {
                 this.dynamic = true;
             }
-            siblingGroup.push(sel);
+            siblingsToGroup.push(sel);
         }
-        this.groups = groups.map((g) => new Selector.ChildGroup(g.map((sg) => new Selector.SiblingGroup(sg))));
+        this.groups = groups.map((g) => new Selector.ChildGroup(g.map((selectors) => (selectors.length > 1 ? new Selector.SiblingGroup(selectors) : selectors[0]))));
         this.last = selectors[selectors.length - 1];
     }
     toString() {
@@ -301,13 +449,13 @@ export class Selector extends SelectorCore {
     match(node) {
         return this.groups.every((group, i) => {
             if (i === 0) {
-                node = group.match(node);
+                node = group.getMatchingNode(node, true);
                 return !!node;
             }
             else {
                 let ancestor = node;
                 while ((ancestor = ancestor.parent ?? ancestor._modalParent)) {
-                    if ((node = group.match(ancestor))) {
+                    if ((node = group.getMatchingNode(ancestor, true))) {
                         return true;
                     }
                 }
@@ -315,8 +463,14 @@ export class Selector extends SelectorCore {
             }
         });
     }
+    mayMatch(node) {
+        return false;
+    }
+    trackChanges(node, map) {
+        this.selectors.forEach((sel) => sel.trackChanges(node, map));
+    }
     lookupSort(sorter, base) {
-        this.last.lookupSort(sorter, this);
+        this.last.lookupSort(sorter, base || this);
     }
     accumulateChanges(node, map) {
         if (!this.dynamic) {
@@ -325,7 +479,7 @@ export class Selector extends SelectorCore {
         const bounds = [];
         const mayMatch = this.groups.every((group, i) => {
             if (i === 0) {
-                const nextNode = group.mayMatch(node);
+                const nextNode = group.getMatchingNode(node, false);
                 bounds.push({ left: node, right: node });
                 node = nextNode;
                 return !!node;
@@ -333,7 +487,7 @@ export class Selector extends SelectorCore {
             else {
                 let ancestor = node;
                 while ((ancestor = ancestor.parent)) {
-                    const nextNode = group.mayMatch(ancestor);
+                    const nextNode = group.getMatchingNode(ancestor, false);
                     if (nextNode) {
                         bounds.push({ left: ancestor, right: null });
                         node = nextNode;
@@ -366,37 +520,112 @@ export class Selector extends SelectorCore {
         return mayMatch;
     }
 }
+export var Selector;
 (function (Selector) {
     // Non-spec. Selector sequences are grouped by ancestor then by child combinators for easier backtracking.
-    class ChildGroup {
+    class ChildGroup extends SelectorBase {
         constructor(selectors) {
+            super();
             this.selectors = selectors;
             this.dynamic = selectors.some((sel) => sel.dynamic);
         }
+        getMatchingNode(node, strict) {
+            const funcName = strict ? 'match' : 'mayMatch';
+            return this.selectors.every((sel, i) => (node = i === 0 ? node : node.parent) && sel[funcName](node)) ? node : null;
+        }
         match(node) {
-            return this.selectors.every((sel, i) => (node = i === 0 ? node : node.parent) && sel.match(node)) ? node : null;
+            return this.getMatchingNode(node, true) != null;
         }
         mayMatch(node) {
-            return this.selectors.every((sel, i) => (node = i === 0 ? node : node.parent) && sel.mayMatch(node)) ? node : null;
+            return this.getMatchingNode(node, false) != null;
         }
         trackChanges(node, map) {
-            this.selectors.forEach((sel, i) => (node = i === 0 ? node : node.parent) && sel.trackChanges(node, map));
+            this.selectors.forEach((sel, i) => {
+                if (i === 0) {
+                    node && sel.trackChanges(node, map);
+                }
+                else {
+                    node = node.parent;
+                    if (node && sel.mayMatch(node)) {
+                        sel.trackChanges(node, map);
+                    }
+                }
+            });
         }
     }
     Selector.ChildGroup = ChildGroup;
-    class SiblingGroup {
+    class SiblingGroup extends SelectorBase {
         constructor(selectors) {
+            super();
             this.selectors = selectors;
             this.dynamic = selectors.some((sel) => sel.dynamic);
         }
         match(node) {
-            return this.selectors.every((sel, i) => (node = i === 0 ? node : getNodeDirectSibling(node)) && sel.match(node)) ? node : null;
+            return this.selectors.every((sel, i) => {
+                if (i === 0) {
+                    return node && sel.match(node);
+                }
+                if (sel.combinator === Combinator.adjacent) {
+                    node = getNodePreviousDirectSibling(node);
+                    return node && sel.match(node);
+                }
+                // Sibling combinator
+                let isMatching = false;
+                eachNodePreviousGeneralSibling(node, (sibling) => {
+                    isMatching = sel.match(sibling);
+                    return !isMatching;
+                });
+                return isMatching;
+            });
         }
         mayMatch(node) {
-            return this.selectors.every((sel, i) => (node = i === 0 ? node : getNodeDirectSibling(node)) && sel.mayMatch(node)) ? node : null;
+            return this.selectors.every((sel, i) => {
+                if (i === 0) {
+                    return node && sel.mayMatch(node);
+                }
+                if (sel.combinator === Combinator.adjacent) {
+                    node = getNodePreviousDirectSibling(node);
+                    return node && sel.mayMatch(node);
+                }
+                // Sibling combinator
+                let isMatching = false;
+                eachNodePreviousGeneralSibling(node, (sibling) => {
+                    isMatching = sel.mayMatch(sibling);
+                    return !isMatching;
+                });
+                return isMatching;
+            });
         }
         trackChanges(node, map) {
-            this.selectors.forEach((sel, i) => (node = i === 0 ? node : getNodeDirectSibling(node)) && sel.trackChanges(node, map));
+            this.selectors.forEach((sel, i) => {
+                if (i === 0) {
+                    if (node) {
+                        sel.trackChanges(node, map);
+                    }
+                }
+                else {
+                    if (sel.combinator === Combinator.adjacent) {
+                        node = getNodePreviousDirectSibling(node);
+                        if (node && sel.mayMatch(node)) {
+                            sel.trackChanges(node, map);
+                        }
+                    }
+                    else {
+                        // Sibling combinator
+                        let matchingSibling;
+                        eachNodePreviousGeneralSibling(node, (sibling) => {
+                            const isMatching = sel.mayMatch(sibling);
+                            if (isMatching) {
+                                matchingSibling = sibling;
+                            }
+                            return !isMatching;
+                        });
+                        if (matchingSibling) {
+                            sel.trackChanges(matchingSibling, map);
+                        }
+                    }
+                }
+            });
         }
     }
     Selector.SiblingGroup = SiblingGroup;
@@ -408,112 +637,161 @@ export class RuleSet {
         this.selectors.forEach((sel) => (sel.ruleset = this));
     }
     toString() {
-        return `${this.selectors.join(', ')} {${this.declarations.map((d, i) => `${i === 0 ? ' ' : ''}${d.property}: ${d.value}`).join('; ')} }`;
+        let desc = `${this.selectors.join(', ')} {${this.declarations.map((d, i) => `${i === 0 ? ' ' : ''}${d.property}: ${d.value}`).join('; ')} }`;
+        if (this.mediaQueryString) {
+            desc = `@media ${this.mediaQueryString} { ${desc} }`;
+        }
+        return desc;
     }
     lookupSort(sorter) {
         this.selectors.forEach((sel) => sel.lookupSort(sorter));
     }
 }
-export function fromAstNodes(astRules) {
-    return astRules.filter(isRule).map((rule) => {
-        const declarations = rule.declarations.filter(isDeclaration).map(createDeclaration);
-        const selectors = rule.selectors.map(createSelector);
-        return new RuleSet(selectors, declarations);
-    });
+export function fromAstNode(astRule) {
+    const declarations = astRule.declarations.filter(isDeclaration).map(createDeclaration);
+    const selectors = astRule.selectors.map(createSelector);
+    return new RuleSet(selectors, declarations);
 }
 function createDeclaration(decl) {
     return { property: isCssVariable(decl.property) ? decl.property : decl.property.toLowerCase(), value: decl.value };
 }
 function createSimpleSelectorFromAst(ast) {
-    if (ast.type === '.') {
-        return new ClassSelector(ast.identifier);
-    }
-    if (ast.type === '') {
-        return new TypeSelector(ast.identifier.replace('-', '').toLowerCase());
-    }
-    if (ast.type === '#') {
-        return new IdSelector(ast.identifier);
+    if (ast.type === 'attribute') {
+        if (ast.name === 'class') {
+            return new ClassSelector(ast.value);
+        }
+        if (ast.name === 'id') {
+            return new IdSelector(ast.value);
+        }
+        return new AttributeSelector(ast.name, ast.action, ast.value, !!ast.ignoreCase);
     }
-    if (ast.type === '[]') {
-        return new AttributeSelector(ast.property, ast.test, ast.test && ast.value);
+    if (ast.type === 'tag') {
+        return new TypeSelector(ast.name.replace('-', '').toLowerCase());
     }
-    if (ast.type === ':') {
-        return new PseudoClassSelector(ast.identifier);
+    if (ast.type === 'pseudo') {
+        if (ast.name === 'is') {
+            return new IsFunctionalPseudoClassSelector(ast.name, ast.data);
+        }
+        if (ast.name === 'where') {
+            return new WhereFunctionalPseudoClassSelector(ast.name, ast.data);
+        }
+        if (ast.name === 'not') {
+            return new NotFunctionalPseudoClassSelector(ast.name, ast.data);
+        }
+        return new PseudoClassSelector(ast.name);
     }
-    if (ast.type === '*') {
+    if (ast.type === 'universal') {
         return new UniversalSelector();
     }
+    return new InvalidSelector(new Error(ast.type));
 }
-function createSimpleSelectorSequenceFromAst(ast) {
-    if (ast.length === 0) {
+function createSimpleSelectorSequenceFromAst(asts) {
+    if (asts.length === 0) {
         return new InvalidSelector(new Error('Empty simple selector sequence.'));
     }
-    else if (ast.length === 1) {
-        return createSimpleSelectorFromAst(ast[0]);
+    if (asts.length === 1) {
+        return createSimpleSelectorFromAst(asts[0]);
     }
-    else {
-        return new SimpleSelectorSequence(ast.map(createSimpleSelectorFromAst));
+    const sequenceSelectors = [];
+    for (const ast of asts) {
+        const selector = createSimpleSelectorFromAst(ast);
+        if (selector instanceof InvalidSelector) {
+            return selector;
+        }
+        sequenceSelectors.push(selector);
     }
+    return new SimpleSelectorSequence(sequenceSelectors);
 }
-function createSelectorFromAst(ast) {
-    if (ast.length === 0) {
+function createSelectorFromAst(asts) {
+    let result;
+    if (asts.length === 0) {
         return new InvalidSelector(new Error('Empty selector.'));
     }
-    else if (ast.length === 1) {
-        return createSimpleSelectorSequenceFromAst(ast[0][0]);
-    }
-    else {
-        const simpleSelectorSequences = [];
-        let simpleSelectorSequence;
-        let combinator;
-        for (let i = 0; i < ast.length; i++) {
-            simpleSelectorSequence = createSimpleSelectorSequenceFromAst(ast[i][0]);
-            combinator = ast[i][1];
-            if (combinator) {
-                simpleSelectorSequence.combinator = combinator;
+    if (asts.length === 1) {
+        return createSimpleSelectorFromAst(asts[0]);
+    }
+    const simpleSelectorSequences = [];
+    let sequenceAsts = [];
+    let combinatorCount = 0;
+    for (const ast of asts) {
+        const combinator = Combinator[ast.type];
+        // Combinator means the end of a sequence
+        if (combinator != null) {
+            const selector = createSimpleSelectorSequenceFromAst(sequenceAsts);
+            if (selector instanceof InvalidSelector) {
+                return selector;
+            }
+            selector.combinator = combinator;
+            simpleSelectorSequences.push(selector);
+            combinatorCount++;
+            // Cleanup stored selectors for the new sequence to take place
+            sequenceAsts = [];
+        }
+        else {
+            sequenceAsts.push(ast);
+        }
+    }
+    if (combinatorCount > 0) {
+        // Create a sequence using the remaining selectors after the last combinator
+        if (sequenceAsts.length) {
+            const selector = createSimpleSelectorSequenceFromAst(sequenceAsts);
+            if (selector instanceof InvalidSelector) {
+                return selector;
             }
-            simpleSelectorSequences.push(simpleSelectorSequence);
+            simpleSelectorSequences.push(selector);
         }
-        return new Selector(simpleSelectorSequences);
+        return new ComplexSelector(simpleSelectorSequences);
     }
+    return createSimpleSelectorSequenceFromAst(sequenceAsts);
 }
 export function createSelector(sel) {
     try {
-        const parsedSelector = parseSelector(sel);
-        if (!parsedSelector) {
+        const result = convertToCSSWhatSelector(sel);
+        if (!result?.length) {
             return new InvalidSelector(new Error('Empty selector'));
         }
-        return createSelectorFromAst(parsedSelector.value);
+        return createSelectorFromAst(result[0]);
     }
     catch (e) {
         return new InvalidSelector(e);
     }
 }
-function isRule(node) {
-    return node.type === 'rule';
-}
 function isDeclaration(node) {
     return node.type === 'declaration';
 }
-export class SelectorsMap {
-    constructor(rulesets) {
+export function matchMediaQueryString(mediaQueryString, cachedQueries) {
+    // It can be a single or multiple queries in case of nested media queries
+    const mediaQueryStrings = mediaQueryString.split(MEDIA_QUERY_SEPARATOR);
+    return mediaQueryStrings.every((mq) => {
+        let isMatching;
+        // Query has already been validated
+        if (cachedQueries.includes(mq)) {
+            isMatching = true;
+        }
+        else {
+            isMatching = checkIfMediaQueryMatches(mq);
+            if (isMatching) {
+                cachedQueries.push(mq);
+            }
+        }
+        return isMatching;
+    });
+}
+export class SelectorScope {
+    constructor() {
         this.id = {};
         this.class = {};
         this.type = {};
         this.universal = [];
         this.position = 0;
-        rulesets.forEach((rule) => rule.lookupSort(this));
     }
-    query(node) {
-        const selectorsMatch = new SelectorsMatch();
+    getSelectorCandidates(node) {
         const { cssClasses, id, cssType } = node;
         const selectorClasses = [this.universal, this.id[id], this.type[cssType]];
         if (cssClasses && cssClasses.size) {
             cssClasses.forEach((c) => selectorClasses.push(this.class[c]));
         }
-        const selectors = selectorClasses.reduce((cur, next) => cur.concat(next || []), []);
-        selectorsMatch.selectors = selectors.filter((sel) => sel.accumulateChanges(node, selectorsMatch)).sort((a, b) => a.specificity - b.specificity || a.pos - b.pos);
-        return selectorsMatch;
+        return selectorClasses.reduce((cur, next) => cur.concat(next || []), []);
     }
     sortById(id, sel) {
         this.addToMap(this.id, id, sel);
@@ -538,11 +816,85 @@ export class SelectorsMap {
         return sel;
     }
 }
+export class MediaQuerySelectorScope extends SelectorScope {
+    constructor(mediaQueryString) {
+        super();
+        this._mediaQueryString = mediaQueryString;
+    }
+    get mediaQueryString() {
+        return this._mediaQueryString;
+    }
+}
+export class StyleSheetSelectorScope extends SelectorScope {
+    constructor(rulesets) {
+        super();
+        this.lookupRulesets(rulesets);
+    }
+    createMediaQuerySelectorScope(mediaQueryString) {
+        const selectorScope = new MediaQuerySelectorScope(mediaQueryString);
+        selectorScope.position = this.position;
+        if (this.mediaQuerySelectorScopes) {
+            this.mediaQuerySelectorScopes.push(selectorScope);
+        }
+        else {
+            this.mediaQuerySelectorScopes = [selectorScope];
+        }
+        return selectorScope;
+    }
+    lookupRulesets(rulesets) {
+        let lastMediaSelectorScope;
+        for (let i = 0, length = rulesets.length; i < length; i++) {
+            const ruleset = rulesets[i];
+            if (lastMediaSelectorScope && lastMediaSelectorScope.mediaQueryString !== ruleset.mediaQueryString) {
+                // Once done with current media query scope, update stylesheet scope position
+                this.position = lastMediaSelectorScope.position;
+                lastMediaSelectorScope = null;
+            }
+            if (ruleset.mediaQueryString) {
+                // Create media query selector scope and register selector lookups there
+                if (!lastMediaSelectorScope) {
+                    lastMediaSelectorScope = this.createMediaQuerySelectorScope(ruleset.mediaQueryString);
+                }
+                ruleset.lookupSort(lastMediaSelectorScope);
+            }
+            else {
+                ruleset.lookupSort(this);
+            }
+        }
+        // If reference of last media selector scope is still kept, update stylesheet scope position
+        if (lastMediaSelectorScope) {
+            this.position = lastMediaSelectorScope.position;
+            lastMediaSelectorScope = null;
+        }
+    }
+    query(node) {
+        const selectorsMatch = new SelectorsMatch();
+        const selectors = this.getSelectorCandidates(node);
+        // Validate media queries and include their selectors if needed
+        if (this.mediaQuerySelectorScopes) {
+            // Cache media query results to avoid validations of other identical queries
+            const validatedMediaQueries = [];
+            for (let i = 0, length = this.mediaQuerySelectorScopes.length; i < length; i++) {
+                const selectorScope = this.mediaQuerySelectorScopes[i];
+                const isMatchingAllQueries = matchMediaQueryString(selectorScope.mediaQueryString, validatedMediaQueries);
+                if (isMatchingAllQueries) {
+                    const mediaQuerySelectors = selectorScope.getSelectorCandidates(node);
+                    selectors.push(...mediaQuerySelectors);
+                }
+            }
+        }
+        selectorsMatch.selectors = selectors.filter((sel) => sel.accumulateChanges(node, selectorsMatch)).sort((a, b) => a.specificity - b.specificity || a.pos - b.pos);
+        return selectorsMatch;
+    }
+}
 export class SelectorsMatch {
     constructor() {
         this.changeMap = new Map();
     }
     addAttribute(node, attribute) {
+        if (CSSUtils.IgnoredCssDynamicAttributeTracking.has(attribute)) {
+            return;
+        }
         const deps = this.properties(node);
         if (!deps.attributes) {
             deps.attributes = new Set();
@@ -577,8 +929,10 @@ export const CSSHelper = {
     SimpleSelectorSequence,
     Selector,
     RuleSet,
-    SelectorsMap,
-    fromAstNodes,
+    SelectorScope,
+    MediaQuerySelectorScope,
+    StyleSheetSelectorScope,
+    fromAstNode,
     SelectorsMatch,
 };
 //# sourceMappingURL=css-selector.js.map