@nativescript/core 9.1.0-dev.0 → 9.1.0-next.0

package/ui/styling/css-selector.js

@@ -1,9 +1,9 @@
 import { parse as convertToCSSWhatSelector } from 'css-what';
 import '../../globals';
-import { isCssVariable } from '../core/properties';
+import { _expandCssShorthand, _pendingCssShorthandSubstitution, isCssVariable } from '../core/properties';
 import { isNullOrUndefined } from '../../utils/types';
+import { cleanupImportantFlags } from './css-utils';
 import { checkIfMediaQueryMatches } from '../../media-query-list';
-export const MEDIA_QUERY_SEPARATOR = '&&';
 var Combinator;
 (function (Combinator) {
     Combinator["descendant"] = " ";
@@ -60,12 +60,48 @@ function getNodePreviousDirectSibling(node) {
     }
     return node.parent.getChildAt(nodeIndex - 1);
 }
+/**
+ * `<attribute>Change` is only raised by properties defined as prototype accessors;
+ * a plain instance value (e.g. Angular's `_ngcontent-*` markers) never notifies,
+ * so subscribing to its change event would be pure overhead.
+ */
+const notifyingAttributes = new WeakMap();
+function attributeNotifiesChanges(node, attribute) {
+    const prototype = Object.getPrototypeOf(node);
+    if (!prototype) {
+        return false;
+    }
+    let cache = notifyingAttributes.get(prototype);
+    if (cache) {
+        const cached = cache.get(attribute);
+        if (cached !== undefined) {
+            return cached;
+        }
+    }
+    else {
+        cache = new Map();
+        notifyingAttributes.set(prototype, cache);
+    }
+    let notifies = false;
+    for (let current = prototype; current; current = Object.getPrototypeOf(current)) {
+        const descriptor = Object.getOwnPropertyDescriptor(current, attribute);
+        if (descriptor) {
+            notifies = !!descriptor.set;
+            break;
+        }
+    }
+    cache.set(attribute, notifies);
+    return notifies;
+}
 function SelectorProperties(specificity, rarity, dynamic = false) {
     return (cls) => {
         cls.prototype.specificity = specificity;
         cls.prototype.rarity = rarity;
         cls.prototype.combinator = undefined;
         cls.prototype.dynamic = dynamic;
+        cls.prototype.hasAdjacentCombinator = false;
+        cls.prototype.hasSiblingCombinator = false;
+        cls.prototype.tier = 0 /* SelectorTier.Application */;
         return cls;
     };
 }
@@ -75,6 +111,8 @@ function FunctionalPseudoClassProperties(specificity, rarity, pseudoSelectorList
         cls.prototype.rarity = rarity;
         cls.prototype.combinator = undefined;
         cls.prototype.dynamic = false;
+        cls.prototype.hasAdjacentCombinator = false;
+        cls.prototype.hasSiblingCombinator = false;
         cls.prototype.pseudoSelectorListType = pseudoSelectorListType;
         return cls;
     };
@@ -213,6 +251,10 @@ let AttributeSelector = class AttributeSelector extends SimpleSelector {
         this.test = test;
         this.value = value;
         this.ignoreCase = ignoreCase;
+        // Normalize once at construction instead of on every match
+        if (ignoreCase && value) {
+            this.value = value.toLowerCase();
+        }
     }
     toString() {
         return `[${this.attribute}${wrap(AttributeSelectorOperator[this.test] ?? this.test)}${this.value || ''}]${wrap(this.combinator)}`;
@@ -229,7 +271,6 @@ let AttributeSelector = class AttributeSelector extends SimpleSelector {
         attr += '';
         if (this.ignoreCase) {
             attr = attr.toLowerCase();
-            this.value = this.value.toLowerCase();
         }
         // =
         if (this.test === 'equals') {
@@ -259,10 +300,15 @@ let AttributeSelector = class AttributeSelector extends SimpleSelector {
         return false;
     }
     mayMatch(node) {
-        return true;
+        // Registered properties live on the prototype and anything already assigned is
+        // an own value; an attribute on neither can never start matching without the
+        // css state being invalidated anyway.
+        return this.attribute in node;
     }
     trackChanges(node, map) {
-        map.addAttribute(node, this.attribute);
+        if (attributeNotifiesChanges(node, this.attribute)) {
+            map.addAttribute(node, this.attribute);
+        }
     }
 };
 AttributeSelector = __decorate([
@@ -322,6 +368,8 @@ export class FunctionalPseudoClassSelector extends PseudoClassSelector {
         this.specificity = specificity;
         // Functional pseudo-classes become dynamic based on selectors in selector list
         this.dynamic = this.selectors.some((sel) => sel.dynamic);
+        this.hasAdjacentCombinator = this.selectors.some((sel) => sel.hasAdjacentCombinator);
+        this.hasSiblingCombinator = this.selectors.some((sel) => sel.hasSiblingCombinator);
     }
     toString() {
         return `:${this.cssPseudoClass}(${this.selectors.join(', ')})${wrap(this.combinator)}`;
@@ -388,18 +436,35 @@ export class SimpleSelectorSequence extends SimpleSelector {
         this.specificity = selectors.reduce((sum, sel) => sel.specificity + sum, 0);
         this.head = selectors.reduce((prev, curr) => (!prev || curr.rarity > prev.rarity ? curr : prev), null);
         this.dynamic = selectors.some((sel) => sel.dynamic);
+        this.hasAdjacentCombinator = selectors.some((sel) => sel.hasAdjacentCombinator);
+        this.hasSiblingCombinator = selectors.some((sel) => sel.hasSiblingCombinator);
     }
     toString() {
         return `${this.selectors.join('')}${wrap(this.combinator)}`;
     }
     match(node) {
-        return this.selectors.every((sel) => sel.match(node));
+        const selectors = this.selectors;
+        for (let i = 0, length = selectors.length; i < length; i++) {
+            if (!selectors[i].match(node)) {
+                return false;
+            }
+        }
+        return true;
     }
     mayMatch(node) {
-        return this.selectors.every((sel) => sel.mayMatch(node));
+        const selectors = this.selectors;
+        for (let i = 0, length = selectors.length; i < length; i++) {
+            if (!selectors[i].mayMatch(node)) {
+                return false;
+            }
+        }
+        return true;
     }
     trackChanges(node, map) {
-        this.selectors.forEach((sel) => sel.trackChanges(node, map));
+        const selectors = this.selectors;
+        for (let i = 0, length = selectors.length; i < length; i++) {
+            selectors[i].trackChanges(node, map);
+        }
     }
     lookupSort(sorter, base) {
         this.head.lookupSort(sorter, base || this);
@@ -414,6 +479,8 @@ export class ComplexSelector extends SelectorCore {
         const groups = [];
         this.specificity = 0;
         this.dynamic = false;
+        this.hasAdjacentCombinator = false;
+        this.hasSiblingCombinator = false;
         for (let i = selectors.length - 1; i >= 0; i--) {
             const sel = selectors[i];
             switch (sel.combinator) {
@@ -428,7 +495,10 @@ export class ComplexSelector extends SelectorCore {
                     currentGroup.push(siblingsToGroup);
                     break;
                 case Combinator.adjacent:
+                    this.hasAdjacentCombinator = true;
+                    break;
                 case Combinator.sibling:
+                    this.hasSiblingCombinator = true;
                     break;
                 default:
                     throw new Error(`Unsupported combinator "${sel.combinator}" for selector ${sel}.`);
@@ -437,6 +507,12 @@ export class ComplexSelector extends SelectorCore {
             if (sel.dynamic) {
                 this.dynamic = true;
             }
+            if (sel.hasAdjacentCombinator) {
+                this.hasAdjacentCombinator = true;
+            }
+            if (sel.hasSiblingCombinator) {
+                this.hasSiblingCombinator = true;
+            }
             siblingsToGroup.push(sel);
         }
         this.groups = groups.map((g) => new Selector.ChildGroup(g.map((selectors) => (selectors.length > 1 ? new Selector.SiblingGroup(selectors) : selectors[0]))));
@@ -446,27 +522,39 @@ export class ComplexSelector extends SelectorCore {
         return this.selectors.join('');
     }
     match(node) {
-        return this.groups.every((group, i) => {
+        const groups = this.groups;
+        for (let i = 0, length = groups.length; i < length; i++) {
+            const group = groups[i];
             if (i === 0) {
                 node = group.getMatchingNode(node, true);
-                return !!node;
+                if (!node) {
+                    return false;
+                }
             }
             else {
                 let ancestor = node;
+                let matched = false;
                 while ((ancestor = ancestor.parent ?? ancestor._modalParent)) {
                     if ((node = group.getMatchingNode(ancestor, true))) {
-                        return true;
+                        matched = true;
+                        break;
                     }
                 }
-                return false;
+                if (!matched) {
+                    return false;
+                }
             }
-        });
+        }
+        return true;
     }
     mayMatch(node) {
         return false;
     }
     trackChanges(node, map) {
-        this.selectors.forEach((sel) => sel.trackChanges(node, map));
+        const selectors = this.selectors;
+        for (let i = 0, length = selectors.length; i < length; i++) {
+            selectors[i].trackChanges(node, map);
+        }
     }
     lookupSort(sorter, base) {
         this.last.lookupSort(sorter, base || this);
@@ -529,8 +617,20 @@ export var Selector;
             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;
+            const selectors = this.selectors;
+            for (let i = 0, length = selectors.length; i < length; i++) {
+                if (i !== 0) {
+                    node = node.parent;
+                }
+                if (!node) {
+                    return null;
+                }
+                const sel = selectors[i];
+                if (!(strict ? sel.match(node) : sel.mayMatch(node))) {
+                    return null;
+                }
+            }
+            return node;
         }
         match(node) {
             return this.getMatchingNode(node, true) != null;
@@ -647,12 +747,39 @@ export class RuleSet {
     }
 }
 export function fromAstNode(astRule) {
-    const declarations = astRule.declarations.filter(isDeclaration).map(createDeclaration);
+    const declarations = [];
+    const nodes = astRule.declarations;
+    for (let i = 0, length = nodes.length; i < length; i++) {
+        const node = nodes[i];
+        if (isDeclaration(node)) {
+            appendDeclaration(declarations, node);
+        }
+    }
     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 appendDeclaration(declarations, decl) {
+    const property = isCssVariable(decl.property) ? decl.property : decl.property.toLowerCase();
+    const value = cleanupImportantFlags(decl.value, decl.property);
+    // The cascade is defined on longhands: a shorthand declares each of its
+    // longhands in its place, so it is expanded here to keep source order meaningful.
+    const expanded = _expandCssShorthand(property, value);
+    if (expanded) {
+        for (let i = 0, length = expanded.length; i < length; i++) {
+            declarations.push({ property: expanded[i][0], value: expanded[i][1] });
+        }
+        return;
+    }
+    // A var()/calc() shorthand cannot be expanded yet - cascade one
+    // pending-substitution value per longhand instead.
+    const pending = _pendingCssShorthandSubstitution(property, value);
+    if (pending) {
+        for (let i = 0, length = pending.length; i < length; i++) {
+            declarations.push({ property: pending[i][0], value: pending[i][1] });
+        }
+        return;
+    }
+    declarations.push({ property, value });
 }
 function createSimpleSelectorFromAst(ast) {
     if (ast.type === 'attribute') {
@@ -759,22 +886,40 @@ function isDeclaration(node) {
     return node.type === 'declaration';
 }
 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;
+    if (!mediaQueryString) {
+        return false;
+    }
+    if (typeof mediaQueryString === 'string') {
+        // Query has already been validated
+        if (cachedQueries.includes(mediaQueryString)) {
+            return true;
+        }
+        const result = checkIfMediaQueryMatches(mediaQueryString);
+        if (result) {
+            cachedQueries.push(mediaQueryString);
+            return result;
+        }
+        return false;
+    }
+    for (let i = 0, length = mediaQueryString.length; i < length; i++) {
+        const mq = mediaQueryString[i];
         // Query has already been validated
         if (cachedQueries.includes(mq)) {
-            isMatching = true;
+            continue;
         }
-        else {
-            isMatching = checkIfMediaQueryMatches(mq);
-            if (isMatching) {
-                cachedQueries.push(mq);
-            }
+        if (!checkIfMediaQueryMatches(mq)) {
+            return false;
+        }
+        cachedQueries.push(mq);
+    }
+    return true;
+}
+function appendSelectorCandidates(candidates, selectors) {
+    if (selectors) {
+        for (let i = 0, length = selectors.length; i < length; i++) {
+            candidates.push(selectors[i]);
         }
-        return isMatching;
-    });
+    }
 }
 export class SelectorScope {
     constructor() {
@@ -783,14 +928,32 @@ export class SelectorScope {
         this.type = {};
         this.universal = [];
         this.position = 0;
-    }
-    getSelectorCandidates(node) {
+        this.tier = 0 /* SelectorTier.Application */;
+        /**
+         * True when any selector in the scope contains an adjacent sibling ('+') combinator.
+         */
+        this.hasAdjacentCombinatorSelectors = false;
+        /**
+         * True when any selector in the scope contains a general sibling ('~') combinator.
+         */
+        this.hasSiblingCombinatorSelectors = false;
+    }
+    getSelectorCandidates(node, candidates = []) {
         const { cssClasses, id, cssType } = node;
-        const selectorClasses = [this.universal, this.id[id], this.type[cssType]];
+        appendSelectorCandidates(candidates, this.universal);
+        if (id) {
+            appendSelectorCandidates(candidates, this.id[id]);
+        }
+        if (cssType) {
+            appendSelectorCandidates(candidates, this.type[cssType]);
+        }
         if (cssClasses && cssClasses.size) {
-            cssClasses.forEach((c) => selectorClasses.push(this.class[c]));
+            const classSelectors = this.class;
+            for (const cssClass of cssClasses) {
+                appendSelectorCandidates(candidates, classSelectors[cssClass]);
+            }
         }
-        return selectorClasses.reduce((cur, next) => cur.concat(next || []), []);
+        return candidates;
     }
     sortById(id, sel) {
         this.addToMap(this.id, id, sel);
@@ -811,26 +974,42 @@ export class SelectorScope {
         map[head].push(this.makeDocSelector(sel));
     }
     makeDocSelector(sel) {
+        if (sel.hasAdjacentCombinator) {
+            this.hasAdjacentCombinatorSelectors = true;
+        }
+        if (sel.hasSiblingCombinator) {
+            this.hasSiblingCombinatorSelectors = true;
+        }
         sel.pos = this.position++;
+        sel.tier = this.tier;
         return sel;
     }
 }
 export class MediaQuerySelectorScope extends SelectorScope {
-    constructor(mediaQueryString) {
+    constructor(mediaQueryString, tier) {
         super();
         this._mediaQueryString = mediaQueryString;
+        this.tier = tier;
     }
     get mediaQueryString() {
         return this._mediaQueryString;
     }
 }
 export class StyleSheetSelectorScope extends SelectorScope {
-    constructor(rulesets) {
+    constructor(rulesets, tier = 0 /* SelectorTier.Application */) {
         super();
+        this.tier = tier;
         this.lookupRulesets(rulesets);
     }
+    /**
+     * Index rulesets added after this scope was built; the rules already indexed
+     * keep their positions.
+     */
+    appendRulesets(rulesets, from) {
+        this.lookupRulesets(rulesets, from);
+    }
     createMediaQuerySelectorScope(mediaQueryString) {
-        const selectorScope = new MediaQuerySelectorScope(mediaQueryString);
+        const selectorScope = new MediaQuerySelectorScope(mediaQueryString, this.tier);
         selectorScope.position = this.position;
         if (this.mediaQuerySelectorScopes) {
             this.mediaQuerySelectorScopes.push(selectorScope);
@@ -840,9 +1019,9 @@ export class StyleSheetSelectorScope extends SelectorScope {
         }
         return selectorScope;
     }
-    lookupRulesets(rulesets) {
+    lookupRulesets(rulesets, from = 0) {
         let lastMediaSelectorScope;
-        for (let i = 0, length = rulesets.length; i < length; i++) {
+        for (let i = from, 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
@@ -865,10 +1044,24 @@ export class StyleSheetSelectorScope extends SelectorScope {
             this.position = lastMediaSelectorScope.position;
             lastMediaSelectorScope = null;
         }
+        // Media query scopes are queried through this scope, so their combinator flags roll up
+        if (this.mediaQuerySelectorScopes) {
+            for (const selectorScope of this.mediaQuerySelectorScopes) {
+                if (selectorScope.hasAdjacentCombinatorSelectors) {
+                    this.hasAdjacentCombinatorSelectors = true;
+                }
+                if (selectorScope.hasSiblingCombinatorSelectors) {
+                    this.hasSiblingCombinatorSelectors = true;
+                }
+            }
+        }
     }
-    query(node) {
-        const selectorsMatch = new SelectorsMatch();
-        const selectors = this.getSelectorCandidates(node);
+    /**
+     * Append every selector that could match the node, matching media query scopes
+     * included, for `matchSelectorCandidates` to resolve.
+     */
+    collectCandidates(node, candidates = []) {
+        this.getSelectorCandidates(node, candidates);
         // Validate media queries and include their selectors if needed
         if (this.mediaQuerySelectorScopes) {
             // Cache media query results to avoid validations of other identical queries
@@ -877,18 +1070,49 @@ export class StyleSheetSelectorScope extends SelectorScope {
                 const selectorScope = this.mediaQuerySelectorScopes[i];
                 const isMatchingAllQueries = matchMediaQueryString(selectorScope.mediaQueryString, validatedMediaQueries);
                 if (isMatchingAllQueries) {
-                    const mediaQuerySelectors = selectorScope.getSelectorCandidates(node);
-                    selectors.push(...mediaQuerySelectors);
+                    selectorScope.getSelectorCandidates(node, candidates);
                 }
             }
         }
-        selectorsMatch.selectors = selectors.filter((sel) => sel.accumulateChanges(node, selectorsMatch)).sort((a, b) => a.specificity - b.specificity || a.pos - b.pos);
-        return selectorsMatch;
+        return candidates;
+    }
+    query(node) {
+        return matchSelectorCandidates(node, this.collectCandidates(node));
     }
 }
+/** Cascade order: specificity, then source order - (tier, position) across stylesheets. */
+function compareSelectors(a, b) {
+    return a.specificity - b.specificity || a.tier - b.tier || a.pos - b.pos;
+}
+/**
+ * Resolve collected candidates against a node, compacting the array in place.
+ * `scopedTags` filters out rules registered on behalf of a stylesheet this scope
+ * never loaded; pass it only when such rules exist - it costs a lookup per candidate.
+ */
+export function matchSelectorCandidates(node, candidates, scopedTags) {
+    const selectorsMatch = new SelectorsMatch();
+    let matched = 0;
+    for (let i = 0, length = candidates.length; i < length; i++) {
+        const selector = candidates[i];
+        if (scopedTags) {
+            const scopedTag = selector.ruleset?.scopedTag;
+            if (scopedTag && !scopedTags.has(scopedTag)) {
+                continue;
+            }
+        }
+        if (selector.accumulateChanges(node, selectorsMatch)) {
+            candidates[matched++] = selector;
+        }
+    }
+    candidates.length = matched;
+    selectorsMatch.selectors = candidates.sort(compareSelectors);
+    return selectorsMatch;
+}
+/** Shared by matches that track nothing; a real map is materialized on first write. */
+const emptyChangeMap = new Map();
 export class SelectorsMatch {
     constructor() {
-        this.changeMap = new Map();
+        this.changeMap = emptyChangeMap;
     }
     addAttribute(node, attribute) {
         const deps = this.properties(node);
@@ -905,9 +1129,13 @@ export class SelectorsMatch {
         deps.pseudoClasses.add(pseudoClass);
     }
     properties(node) {
-        let set = this.changeMap.get(node);
+        let changeMap = this.changeMap;
+        if (changeMap === emptyChangeMap) {
+            this.changeMap = changeMap = new Map();
+        }
+        let set = changeMap.get(node);
         if (!set) {
-            this.changeMap.set(node, (set = {}));
+            changeMap.set(node, (set = {}));
         }
         return set;
     }
@@ -930,5 +1158,6 @@ export const CSSHelper = {
     StyleSheetSelectorScope,
     fromAstNode,
     SelectorsMatch,
+    matchSelectorCandidates,
 };
 //# sourceMappingURL=css-selector.js.map