@nativescript/core 9.1.0-alpha.9 → 9.1.0-next.0

package/ui/styling/style-scope.js

@@ -1,7 +1,7 @@
 import { getNativeScriptGlobals } from '../../globals/global-utils';
-import { _evaluateCssVariableExpression, _evaluateCssCalcExpression, isCssVariable, isCssVariableExpression, isCssCalcExpression } from '../core/properties';
+import { _evaluateCssVariableExpression, _evaluateCssCalcExpression, _expandCssShorthand, _isCssPendingSubstitution, isCssVariable, isCssVariableExpression, isCssCalcExpression } from '../core/properties';
 import { unsetValue } from '../core/properties/property-shared';
-import { StyleSheetSelectorScope, SelectorsMatch, fromAstNode, MEDIA_QUERY_SEPARATOR, matchMediaQueryString } from './css-selector';
+import { StyleSheetSelectorScope, SelectorsMatch, fromAstNode, matchMediaQueryString, matchSelectorCandidates } from './css-selector';
 import { Trace } from './styling-shared';
 import { File, knownFolders, path } from '../../file-system';
 import { Application } from '../../application';
@@ -10,7 +10,6 @@ import { KeyframeAnimationInfo, KeyframeAnimation } from '../animation/keyframe-
 import { CssAnimationParser } from './css-animation-parser';
 import { sanitizeModuleName } from '../../utils/common';
 import { resolveModuleName } from '../../module-name-resolver';
-import { cleanupImportantFlags } from './css-utils';
 import { cssTreeParse } from '../../css/css-tree-parser';
 import { CSS3Parser } from '../../css/CSS3Parser';
 import { CSSNativeScript } from '../../css/CSSNativeScript';
@@ -34,15 +33,49 @@ catch (e) {
 let mergedApplicationCssSelectors = [];
 let applicationCssSelectors = [];
 const applicationAdditionalSelectors = [];
+let mergedApplicationCssSelectorsInvalid = false;
 let mergedApplicationCssKeyframes = [];
 let applicationCssKeyframes = [];
 const applicationAdditionalKeyframes = [];
+let mergedApplicationCssKeyframesInvalid = false;
 let applicationCssSelectorVersion = 0;
+/**
+ * Shared index over the application stylesheets, built once for all style scopes.
+ * Tagged rules stay in it and are filtered out at match time - see `matchSelectorCandidates`.
+ */
+let applicationSelectorScope = null;
+let applicationSelectorScopeVersion = -1;
+let applicationSelectorScopeRuleCount = 0;
+let applicationSelectorsHaveScopedTags = false;
+/** Bumped when the application rules change in a way an append cannot express. */
+let applicationSelectorsResetVersion = 0;
+let applicationSelectorScopeResetVersion = -1;
 const tagToScopeTag = new Map();
 let currentScopeTag = null;
 const animationsSymbol = Symbol('animations');
 const kebabCasePattern = /-([a-z])/g;
+const kebabCaseReplacementFunc = (g) => g[1].toUpperCase();
 const pattern = /('|")(.*?)\1/;
+/**
+ * Parse a pending-substitution shorthand once its expression has been evaluated
+ * against the view; a value that does not survive evaluation leaves its longhands unset.
+ */
+function resolvePendingSubstitution(view, pending) {
+    const value = evaluateCssExpressions(view, pending.shorthand, pending.value);
+    if (value === unsetValue) {
+        return CssState.emptyPropertyBag;
+    }
+    const expanded = _expandCssShorthand(pending.shorthand, value);
+    if (!expanded) {
+        Trace.write(`Failed to expand shorthand [${pending.shorthand}] resolved to [${value}] for ${view}.`, Trace.categories.Style, Trace.messageType.warn);
+        return CssState.emptyPropertyBag;
+    }
+    const resolved = {};
+    for (let i = 0, length = expanded.length; i < length; i++) {
+        resolved[expanded[i][0]] = expanded[i][1];
+    }
+    return resolved;
+}
 /**
  * Evaluate css-variable and css-calc expressions
  */
@@ -61,13 +94,66 @@ function evaluateCssExpressions(view, property, value) {
     }
     return value;
 }
+/**
+ * Only marks the merged list dirty - it is rebuilt on next read, since frameworks
+ * register stylesheets one call at a time.
+ */
 export function mergeCssSelectors() {
-    mergedApplicationCssSelectors = applicationCssSelectors.slice();
-    mergedApplicationCssSelectors.push(...applicationAdditionalSelectors);
+    mergedApplicationCssSelectorsInvalid = true;
 }
 export function mergeCssKeyframes() {
-    mergedApplicationCssKeyframes = applicationCssKeyframes.slice();
-    mergedApplicationCssKeyframes.push(...applicationAdditionalKeyframes);
+    mergedApplicationCssKeyframesInvalid = true;
+}
+function getMergedApplicationCssSelectors() {
+    if (mergedApplicationCssSelectorsInvalid) {
+        mergedApplicationCssSelectorsInvalid = false;
+        mergedApplicationCssSelectors = concatRuleSets(applicationCssSelectors, applicationAdditionalSelectors);
+    }
+    return mergedApplicationCssSelectors;
+}
+function getMergedApplicationCssKeyframes() {
+    if (mergedApplicationCssKeyframesInvalid) {
+        mergedApplicationCssKeyframesInvalid = false;
+        mergedApplicationCssKeyframes = concatRuleSets(applicationCssKeyframes, applicationAdditionalKeyframes);
+    }
+    return mergedApplicationCssKeyframes;
+}
+function getApplicationSelectorScope() {
+    if (applicationSelectorScopeVersion === applicationCssSelectorVersion) {
+        return applicationSelectorScope;
+    }
+    const rulesets = getMergedApplicationCssSelectors();
+    const canAppend = applicationSelectorScope && applicationSelectorScopeResetVersion === applicationSelectorsResetVersion && rulesets.length >= applicationSelectorScopeRuleCount;
+    if (canAppend) {
+        applicationSelectorScope.appendRulesets(rulesets, applicationSelectorScopeRuleCount);
+    }
+    else {
+        applicationSelectorScope = rulesets.length > 0 ? new StyleSheetSelectorScope(rulesets, 0 /* SelectorTier.Application */) : null;
+        applicationSelectorsHaveScopedTags = false;
+        applicationSelectorScopeRuleCount = 0;
+    }
+    for (let i = applicationSelectorScopeRuleCount, length = rulesets.length; i < length; i++) {
+        if (rulesets[i].scopedTag) {
+            applicationSelectorsHaveScopedTags = true;
+            break;
+        }
+    }
+    applicationSelectorScopeRuleCount = rulesets.length;
+    applicationSelectorScopeVersion = applicationCssSelectorVersion;
+    applicationSelectorScopeResetVersion = applicationSelectorsResetVersion;
+    return applicationSelectorScope;
+}
+/** Avoids `push(...arr)`, which blows the stack past the engine's argument limit. */
+function concatRuleSets(base, additional) {
+    const baseLength = base.length;
+    const merged = new Array(baseLength + additional.length);
+    for (let i = 0; i < baseLength; i++) {
+        merged[i] = base[i];
+    }
+    for (let i = 0, length = additional.length; i < length; i++) {
+        merged[baseLength + i] = additional[i];
+    }
+    return merged;
 }
 class CSSSource {
     constructor(_ast, _url, _file, _source) {
@@ -191,7 +277,7 @@ class CSSSource {
             this._selectors = [];
         }
     }
-    async parseCSSAst() {
+    parseCSSAst() {
         if (this._source) {
             if (__CSS_PARSER__ === 'css-tree') {
                 this._ast = cssTreeParse(this._source, this._file);
@@ -244,7 +330,7 @@ __decorate([
     profile,
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Promise)
+    __metadata("design:returntype", void 0)
 ], CSSSource.prototype, "parseCSSAst", null);
 __decorate([
     profile,
@@ -296,8 +382,20 @@ export function _populateRules(nodes, rulesets, keyframes, mediaQueryString) {
             keyframes.push(keyframeRule);
         }
         else if (isMedia(node)) {
-            // Media query is composite in the case of nested media queries
-            const compositeMediaQuery = mediaQueryString ? mediaQueryString + MEDIA_QUERY_SEPARATOR + node.media : node.media;
+            // Media query can be an array of strings in case of nested queries
+            let compositeMediaQuery;
+            if (mediaQueryString) {
+                if (typeof mediaQueryString === 'string') {
+                    compositeMediaQuery = [mediaQueryString, node.media];
+                }
+                else {
+                    mediaQueryString.push(node.media);
+                    compositeMediaQuery = mediaQueryString;
+                }
+            }
+            else {
+                compositeMediaQuery = node.media;
+            }
             _populateRules(node.rules, rulesets, keyframes, compositeMediaQuery);
         }
         else if (isRule(node)) {
@@ -326,6 +424,8 @@ export function removeTaggedAdditionalCSS(tag) {
         }
     }
     if (selectorsChanged) {
+        // Rules were dropped from the middle of the list, so the index has to be rebuilt.
+        applicationSelectorsResetVersion++;
         mergeCssSelectors();
         updated = true;
     }
@@ -413,6 +513,8 @@ const loadCss = profile(`"style-scope".loadCss`, (cssModule) => {
     let updated = false;
     // Check for existing application css selectors too in case the app is undergoing a live-sync
     if (selectors.length > 0 || applicationCssSelectors.length > 0) {
+        // The base stylesheet is replaced rather than appended to.
+        applicationSelectorsResetVersion++;
         applicationCssSelectors = selectors;
         mergeCssSelectors();
         updated = true;
@@ -448,6 +550,36 @@ if (Application.hasLaunched()) {
 else {
     getNativeScriptGlobals().events.on('loadAppCss', loadAppCSS);
 }
+function trackedNamesEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (!a || !b || a.size !== b.size) {
+        return false;
+    }
+    for (const name of a) {
+        if (!b.has(name)) {
+            return false;
+        }
+    }
+    return true;
+}
+/** Two empty maps compare equal even when they are different objects. */
+function changeMapsEqual(applied, current) {
+    if (applied === current) {
+        return true;
+    }
+    if (applied.size !== current.size) {
+        return false;
+    }
+    for (const [view, changes] of applied) {
+        const currentChanges = current.get(view);
+        if (!currentChanges || !trackedNamesEqual(changes.attributes, currentChanges.attributes) || !trackedNamesEqual(changes.pseudoClasses, currentChanges.pseudoClasses)) {
+            return false;
+        }
+    }
+    return true;
+}
 export class CssState {
     constructor(viewRef) {
         this.viewRef = viewRef;
@@ -461,9 +593,13 @@ export class CssState {
     onChange() {
         const view = this.viewRef.get();
         if (view && view.isLoaded) {
-            this.unsubscribeFromDynamicUpdates();
+            // Matching does not read the subscriptions, so re-subscribe only when the
+            // dependencies actually changed - they are usually identical.
             this.updateMatch();
-            this.subscribeForDynamicUpdates();
+            if (!changeMapsEqual(this._appliedChangeMap, this._match.changeMap)) {
+                this.unsubscribeFromDynamicUpdates();
+                this.subscribeForDynamicUpdates();
+            }
             this.updateDynamicState();
         }
         else {
@@ -509,7 +645,14 @@ export class CssState {
             Trace.write(`updateDynamicState not executed to view because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
             return;
         }
-        const matchingSelectors = this._match.selectors.filter((sel) => (sel.dynamic ? sel.match(view) : true));
+        const selectors = this._match.selectors;
+        const matchingSelectors = [];
+        for (let i = 0, length = selectors.length; i < length; i++) {
+            const sel = selectors[i];
+            if (!sel.dynamic || sel.match(view)) {
+                matchingSelectors.push(sel);
+            }
+        }
         // Ideally we should return here if there are no matching selectors, however
         // if there are property removals, returning here would not remove them
         // this is seen in STYLE test in automated.
@@ -586,53 +729,117 @@ export class CssState {
         const oldProperties = this._appliedPropertyValues;
         // Update values for the scope's css-variables
         view.style.resetScopedCssVariables();
-        const valuesToApply = {};
-        const cssExpsProperties = {};
-        const replacementFunc = (g) => g[1].toUpperCase();
+        let valuesToApply;
+        let cssExpsProperties;
+        let pendingProperties;
         for (const property in newPropertyValues) {
-            const value = cleanupImportantFlags(newPropertyValues[property], property);
-            const isCssExp = isCssVariableExpression(value) || isCssCalcExpression(value);
+            const value = newPropertyValues[property];
+            if (_isCssPendingSubstitution(value)) {
+                // Resolvable only after the css variables below are up to date.
+                if (!pendingProperties) {
+                    pendingProperties = {};
+                }
+                pendingProperties[property] = value;
+                continue;
+            }
+            // Expanded shorthand values are already converted and may not be strings.
+            const isCssExp = typeof value === 'string' && (isCssVariableExpression(value) || isCssCalcExpression(value));
             if (isCssExp) {
                 // we handle css exp separately because css vars must be evaluated first
+                if (!cssExpsProperties) {
+                    cssExpsProperties = {};
+                }
                 cssExpsProperties[property] = value;
                 continue;
             }
-            delete oldProperties[property];
-            if (property in oldProperties && oldProperties[property] === value) {
-                // Skip unchanged values
-                continue;
+            // Whatever is left in oldProperties after these loops was removed and gets unset.
+            const hadOldValue = property in oldProperties;
+            const unchanged = hadOldValue && oldProperties[property] === value;
+            if (hadOldValue) {
+                delete oldProperties[property];
             }
             if (isCssVariable(property)) {
+                // The scoped css-variables were just reset, so they always have to be re-registered.
                 view.style.setScopedCssVariable(property, value);
                 delete newPropertyValues[property];
                 continue;
             }
+            if (unchanged) {
+                continue;
+            }
+            if (!valuesToApply) {
+                valuesToApply = {};
+            }
             valuesToApply[property] = value;
         }
         //we need to parse CSS vars first before evaluating css expressions
         for (const property in cssExpsProperties) {
-            delete oldProperties[property];
+            const hadOldValue = property in oldProperties;
+            const oldValue = hadOldValue ? oldProperties[property] : undefined;
+            if (hadOldValue) {
+                delete oldProperties[property];
+            }
             const value = evaluateCssExpressions(view, property, cssExpsProperties[property]);
-            if (property in oldProperties && oldProperties[property] === value) {
-                // Skip unchanged values
+            if (isCssVariable(property)) {
+                view.style.setScopedCssVariable(property, value);
+                delete newPropertyValues[property];
                 continue;
             }
             if (value === unsetValue) {
                 delete newPropertyValues[property];
             }
-            if (isCssVariable(property)) {
-                view.style.setScopedCssVariable(property, value);
+            else {
+                // Record the evaluated value - the next diff compares against it.
+                newPropertyValues[property] = value;
+            }
+            if (hadOldValue && oldValue === value) {
+                continue;
+            }
+            if (!valuesToApply) {
+                valuesToApply = {};
+            }
+            valuesToApply[property] = value;
+        }
+        // Each shorthand is resolved once, however many longhands point at it.
+        let resolvedShorthands;
+        for (const property in pendingProperties) {
+            const pending = pendingProperties[property];
+            if (!resolvedShorthands) {
+                resolvedShorthands = new Map();
+            }
+            let resolved = resolvedShorthands.get(pending);
+            if (!resolved) {
+                resolved = resolvePendingSubstitution(view, pending);
+                resolvedShorthands.set(pending, resolved);
+            }
+            const value = property in resolved ? resolved[property] : unsetValue;
+            const hadOldValue = property in oldProperties;
+            const oldValue = hadOldValue ? oldProperties[property] : undefined;
+            if (hadOldValue) {
+                delete oldProperties[property];
+            }
+            if (value === unsetValue) {
                 delete newPropertyValues[property];
             }
+            else {
+                newPropertyValues[property] = value;
+            }
+            if (hadOldValue && oldValue === value) {
+                continue;
+            }
+            if (!valuesToApply) {
+                valuesToApply = {};
+            }
             valuesToApply[property] = value;
         }
-        // Unset removed values
+        // Unset removed values - the bag is keyed by longhands only, so unsetting
+        // one entry cannot clear a value another one set.
         for (const property in oldProperties) {
             if (property in view.style) {
                 view.style[`css:${property}`] = unsetValue;
             }
             else {
-                const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
+                const camelCasedProperty = property.replace(kebabCasePattern, kebabCaseReplacementFunc);
                 view[camelCasedProperty] = unsetValue;
             }
         }
@@ -644,7 +851,7 @@ export class CssState {
                     view.style[`css:${property}`] = value;
                 }
                 else {
-                    const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
+                    const camelCasedProperty = property.replace(kebabCasePattern, kebabCaseReplacementFunc);
                     view[camelCasedProperty] = value;
                 }
             }
@@ -730,12 +937,13 @@ CssState.prototype._matchInvalid = true;
 export class StyleScope {
     constructor() {
         this._css = '';
+        this._hasSelectors = false;
         this._localCssSelectors = [];
         this._localCssKeyframes = [];
         this._localCssSelectorVersion = 0;
         this._localCssSelectorsAppliedVersion = 0;
         this._applicationCssSelectorsAppliedVersion = 0;
-        this._cssFiles = [];
+        this._cssFiles = new Set();
     }
     get css() {
         return this._css;
@@ -753,7 +961,7 @@ export class StyleScope {
         if (!cssFileName) {
             return;
         }
-        this._cssFiles.push(cssFileName);
+        this._cssFiles.add(cssFileName);
         currentScopeTag = cssFileName;
         const cssFile = CSSSource.fromURI(cssFileName);
         currentScopeTag = null;
@@ -776,7 +984,7 @@ export class StyleScope {
             return;
         }
         if (cssFileName) {
-            this._cssFiles.push(cssFileName);
+            this._cssFiles.add(cssFileName);
             currentScopeTag = cssFileName;
         }
         const cssFile = cssString ? CSSSource.fromSource(cssString, cssFileName) : CSSSource.fromURI(cssFileName);
@@ -797,11 +1005,25 @@ export class StyleScope {
         return animation;
     }
     ensureSelectors() {
-        if (!this.isApplicationCssSelectorsLatestVersionApplied() || !this.isLocalCssSelectorsLatestVersionApplied() || !this._mergedCssSelectors) {
+        if (!this.isApplicationCssSelectorsLatestVersionApplied() || !this.isLocalCssSelectorsLatestVersionApplied()) {
             this._createSelectors();
         }
         return this.getSelectorsVersion();
     }
+    /**
+     * True when any selector in the scope contains an adjacent sibling ('+') combinator.
+     */
+    get hasAdjacentCombinatorSelectors() {
+        this.ensureSelectors();
+        return !!applicationSelectorScope?.hasAdjacentCombinatorSelectors || !!this._localSelectorScope?.hasAdjacentCombinatorSelectors;
+    }
+    /**
+     * True when any selector in the scope contains a general sibling ('~') combinator.
+     */
+    get hasSiblingCombinatorSelectors() {
+        this.ensureSelectors();
+        return !!applicationSelectorScope?.hasSiblingCombinatorSelectors || !!this._localSelectorScope?.hasSiblingCombinatorSelectors;
+    }
     /**
      * Increase the application CSS selector version.
      */
@@ -815,38 +1037,43 @@ export class StyleScope {
         return this._localCssSelectorsAppliedVersion === this._localCssSelectorVersion;
     }
     _createSelectors() {
-        const toMerge = [];
-        const toMergeKeyframes = [];
-        toMerge.push(...mergedApplicationCssSelectors.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
-        toMergeKeyframes.push(...mergedApplicationCssKeyframes.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
+        const cssFiles = this._cssFiles;
+        const applicationScope = getApplicationSelectorScope();
         this._applicationCssSelectorsAppliedVersion = applicationCssSelectorVersion;
-        toMerge.push(...this._localCssSelectors);
-        toMergeKeyframes.push(...this._localCssKeyframes);
+        if (!this.isLocalCssSelectorsLatestVersionApplied() || (!this._localSelectorScope && this._localCssSelectors.length > 0)) {
+            this._localSelectorScope = this._localCssSelectors.length > 0 ? new StyleSheetSelectorScope(this._localCssSelectors, 1 /* SelectorTier.Local */) : null;
+        }
         this._localCssSelectorsAppliedVersion = this._localCssSelectorVersion;
-        if (toMerge.length > 0) {
-            this._mergedCssSelectors = toMerge;
-            this._selectorScope = new StyleSheetSelectorScope(this._mergedCssSelectors);
+        this._hasSelectors = !!applicationScope || !!this._localSelectorScope;
+        const toMergeKeyframes = [];
+        const applicationKeyframes = getMergedApplicationCssKeyframes();
+        for (let i = 0, length = applicationKeyframes.length; i < length; i++) {
+            const keyframe = applicationKeyframes[i];
+            if (!keyframe.scopedTag || cssFiles.has(keyframe.scopedTag)) {
+                toMergeKeyframes.push(keyframe);
+            }
         }
-        else {
-            this._mergedCssSelectors = null;
-            this._selectorScope = null;
+        const localKeyframes = this._localCssKeyframes;
+        for (let i = 0, length = localKeyframes.length; i < length; i++) {
+            toMergeKeyframes.push(localKeyframes[i]);
         }
         this._mergedCssKeyframes = toMergeKeyframes.length > 0 ? toMergeKeyframes : null;
     }
     // HACK: This @profile decorator creates a circular dependency
     // HACK: because the function parameter type is evaluated with 'typeof'
     matchSelectors(view) {
-        let match;
         // should be (view: ViewBase): SelectorsMatch<ViewBase>
         this.ensureSelectors();
-        if (this._selectorScope) {
-            match = this._selectorScope.query(view);
-            // Make sure to re-apply keyframes to matching selectors as a media query keyframe might be applicable at this point
-            this._applyKeyframesToSelectors(match.selectors);
-        }
-        else {
-            match = null;
+        if (!this._hasSelectors) {
+            return null;
         }
+        // The cascade has to see the application and local candidates as a single ordered set.
+        const candidates = [];
+        applicationSelectorScope?.collectCandidates(view, candidates);
+        this._localSelectorScope?.collectCandidates(view, candidates);
+        const match = matchSelectorCandidates(view, candidates, applicationSelectorsHaveScopedTags ? this._cssFiles : undefined);
+        // Make sure to re-apply keyframes to matching selectors as a media query keyframe might be applicable at this point
+        this._applyKeyframesToSelectors(match.selectors);
         return match;
     }
     query(node) {
@@ -979,6 +1206,8 @@ export const applyInlineStyle = profile('applyInlineStyle', function applyInline
             view.style.setUnscopedCssVariable(property, d.value);
         }
     });
+    // Pending-substitution longhands share one placeholder - resolve it once.
+    let resolvedShorthands;
     inlineRuleSet[0].declarations.forEach((d) => {
         // Use the actual property name so that a local value is set.
         const property = d.property;
@@ -987,7 +1216,21 @@ export const applyInlineStyle = profile('applyInlineStyle', function applyInline
                 // Skip css-variables, they have been handled
                 return;
             }
-            const value = evaluateCssExpressions(view, property, d.value);
+            let value;
+            if (_isCssPendingSubstitution(d.value)) {
+                if (!resolvedShorthands) {
+                    resolvedShorthands = new Map();
+                }
+                let resolved = resolvedShorthands.get(d.value);
+                if (!resolved) {
+                    resolved = resolvePendingSubstitution(view, d.value);
+                    resolvedShorthands.set(d.value, resolved);
+                }
+                value = property in resolved ? resolved[property] : unsetValue;
+            }
+            else {
+                value = evaluateCssExpressions(view, property, d.value);
+            }
             if (property in view.style) {
                 view.style[property] = value;
             }