@nativescript/core/ui/styling/style-scope.js

import { unsetValue, _evaluateCssVariableExpression, _evaluateCssCalcExpression, isCssVariable, isCssVariableExpression, isCssCalcExpression } from '../core/properties';
import { StyleSheetSelectorScope, SelectorsMatch, fromAstNode, MEDIA_QUERY_SEPARATOR, matchMediaQueryString } from './css-selector';
import { Trace } from '../../trace';
import { File, knownFolders, path } from '../../file-system';
import { Application } from '../../application';
import { profile } from '../../profiling';
let keyframeAnimationModule;
function ensureKeyframeAnimationModule() {
    if (!keyframeAnimationModule) {
        keyframeAnimationModule = require('../animation/keyframe-animation');
    }
}
import { sanitizeModuleName } from '../../utils/common';
import { resolveModuleName } from '../../module-name-resolver';
import { cleanupImportantFlags } from './css-utils';
let cssAnimationParserModule;
function ensureCssAnimationParserModule() {
    if (!cssAnimationParserModule) {
        cssAnimationParserModule = require('./css-animation-parser');
    }
}
let parser = 'css-tree';
try {
    const appConfig = require('~/package.json');
    if (appConfig) {
        if (appConfig.cssParser === 'rework') {
            parser = 'rework';
        }
        else if (appConfig.cssParser === 'nativescript') {
            parser = 'nativescript';
        }
    }
}
catch (e) {
    //
}
let mergedApplicationCssSelectors = [];
let applicationCssSelectors = [];
const applicationAdditionalSelectors = [];
let mergedApplicationCssKeyframes = [];
let applicationCssKeyframes = [];
const applicationAdditionalKeyframes = [];
let applicationCssSelectorVersion = 0;
const tagToScopeTag = new Map();
let currentScopeTag = null;
const animationsSymbol = Symbol('animations');
const kebabCasePattern = /-([a-z])/g;
const pattern = /('|")(.*?)\1/;
/**
 * Evaluate css-variable and css-calc expressions
 */
function evaluateCssExpressions(view, property, value) {
    const newValue = _evaluateCssVariableExpression(view, property, value);
    if (newValue === 'unset') {
        return unsetValue;
    }
    value = newValue;
    try {
        value = _evaluateCssCalcExpression(value);
    }
    catch (e) {
        Trace.write(`Failed to evaluate css-calc for property [${property}] for expression [${value}] to ${view}. ${e.stack}`, Trace.categories.Error, Trace.messageType.error);
        return unsetValue;
    }
    return value;
}
export function mergeCssSelectors() {
    mergedApplicationCssSelectors = applicationCssSelectors.slice();
    mergedApplicationCssSelectors.push(...applicationAdditionalSelectors);
}
export function mergeCssKeyframes() {
    mergedApplicationCssKeyframes = applicationCssKeyframes.slice();
    mergedApplicationCssKeyframes.push(...applicationAdditionalKeyframes);
}
class CSSSource {
    constructor(_ast, _url, _file, _source) {
        this._ast = _ast;
        this._url = _url;
        this._file = _file;
        this._source = _source;
        this._selectors = [];
        this._keyframes = [];
        this.parse();
    }
    static fromDetect(cssOrAst, fileName) {
        if (typeof cssOrAst === 'string') {
            // raw-loader
            return CSSSource.fromSource(cssOrAst, fileName);
        }
        else if (typeof cssOrAst === 'object') {
            if (cssOrAst.default) {
                cssOrAst = cssOrAst.default;
            }
            if (cssOrAst.type === 'stylesheet' && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) {
                // css-loader
                return CSSSource.fromAST(cssOrAst, fileName);
            }
        }
        // css2json-loader
        return CSSSource.fromSource(cssOrAst.toString(), fileName);
    }
    static fromURI(uri) {
        // webpack modules require all file paths to be relative to /app folder
        const appRelativeUri = CSSSource.pathRelativeToApp(uri);
        const sanitizedModuleName = sanitizeModuleName(appRelativeUri);
        const resolvedModuleName = resolveModuleName(sanitizedModuleName, 'css');
        try {
            const cssOrAst = global.loadModule(resolvedModuleName, true);
            if (cssOrAst) {
                return CSSSource.fromDetect(cssOrAst, resolvedModuleName);
            }
        }
        catch (e) {
            if (Trace.isEnabled()) {
                Trace.write(`Could not load CSS from ${uri}: ${e}`, Trace.categories.Error, Trace.messageType.warn);
            }
        }
        return CSSSource.fromFile(appRelativeUri);
    }
    static pathRelativeToApp(uri) {
        if (!uri.startsWith('/')) {
            return uri;
        }
        const appPath = knownFolders.currentApp().path;
        if (!uri.startsWith(appPath)) {
            Trace.write(`${uri} does not start with ${appPath}`, Trace.categories.Error, Trace.messageType.error);
            return uri;
        }
        const relativeUri = `.${uri.substring(appPath.length)}`;
        return relativeUri;
    }
    static fromFile(url) {
        // .scss, .sass, etc. css files in vanilla app are usually compiled to .css so we will try to load a compiled file first.
        const cssFileUrl = url.replace(/\..\w+$/, '.css');
        if (cssFileUrl !== url) {
            const cssFile = CSSSource.resolveCSSPathFromURL(cssFileUrl);
            if (cssFile) {
                return new CSSSource(undefined, url, cssFile, undefined);
            }
        }
        const file = CSSSource.resolveCSSPathFromURL(url);
        return new CSSSource(undefined, url, file, undefined);
    }
    static fromFileImport(url, importSource) {
        const file = CSSSource.resolveCSSPathFromURL(url, importSource);
        return new CSSSource(undefined, url, file, undefined);
    }
    static resolveCSSPathFromURL(url, importSource) {
        const app = knownFolders.currentApp().path;
        const file = resolveFileNameFromUrl(url, app, File.exists, importSource);
        return file;
    }
    static fromSource(source, url) {
        return new CSSSource(undefined, url, undefined, source);
    }
    static fromAST(ast, url) {
        return new CSSSource(ast, url, undefined, undefined);
    }
    get selectors() {
        return this._selectors;
    }
    get keyframes() {
        return this._keyframes;
    }
    get source() {
        return this._source;
    }
    load() {
        const file = File.fromPath(this._file);
        this._source = file.readTextSync();
    }
    parse() {
        try {
            if (!this._ast) {
                if (!this._source && this._file) {
                    this.load();
                }
                // [object Object] check guards against empty app.css file
                if (this._source && this.source !== '[object Object]') {
                    this.parseCSSAst();
                }
            }
            if (this._ast) {
                this.createSelectorsAndKeyframes();
            }
            else {
                this._selectors = [];
            }
        }
        catch (e) {
            if (Trace.isEnabled()) {
                Trace.write('Css styling failed: ' + e, Trace.categories.Style, Trace.messageType.error);
            }
            this._selectors = [];
        }
    }
    parseCSSAst() {
        if (this._source) {
            if (__CSS_PARSER__ === 'css-tree') {
                const cssTreeParse = require('../../css/css-tree-parser').cssTreeParse;
                this._ast = cssTreeParse(this._source, this._file);
            }
            else if (__CSS_PARSER__ === 'nativescript') {
                const CSS3Parser = require('../../css/CSS3Parser').CSS3Parser;
                const CSSNativeScript = require('../../css/CSSNativeScript').CSSNativeScript;
                const cssparser = new CSS3Parser(this._source);
                const stylesheet = cssparser.parseAStylesheet();
                const cssNS = new CSSNativeScript();
                this._ast = cssNS.parseStylesheet(stylesheet);
            }
            else if (__CSS_PARSER__ === 'rework') {
                const parseCss = require('../../css').parse;
                this._ast = parseCss(this._source, { source: this._file });
            }
        }
    }
    createSelectorsAndKeyframes() {
        if (this._ast) {
            const nodes = this._ast.stylesheet.rules;
            const rulesets = [];
            const keyframes = [];
            // When css2json-loader is enabled, imports are handled there and removed from AST rules
            populateRulesFromImports(nodes, rulesets, keyframes);
            _populateRules(nodes, rulesets, keyframes);
            if (rulesets && rulesets.length) {
                ensureCssAnimationParserModule();
                rulesets.forEach((rule) => {
                    rule[animationsSymbol] = cssAnimationParserModule.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations);
                });
            }
            this._selectors = rulesets;
            this._keyframes = keyframes;
        }
    }
    toString() {
        return this._file || this._url || '(in-memory)';
    }
}
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], CSSSource.prototype, "load", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], CSSSource.prototype, "parse", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], CSSSource.prototype, "parseCSSAst", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], CSSSource.prototype, "createSelectorsAndKeyframes", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, String]),
    __metadata("design:returntype", String)
], CSSSource, "resolveCSSPathFromURL", null);
function populateRulesFromImports(nodes, rulesets, keyframes) {
    const imports = nodes.filter((r) => r.type === 'import');
    if (!imports.length) {
        return;
    }
    const urlFromImportObject = (importObject) => {
        const importItem = importObject['import'];
        const urlMatch = importItem && importItem.match(pattern);
        return urlMatch && urlMatch[2];
    };
    const sourceFromImportObject = (importObject) => importObject['position'] && importObject['position']['source'];
    const toUrlSourcePair = (importObject) => ({
        url: urlFromImportObject(importObject),
        source: sourceFromImportObject(importObject),
    });
    const getCssFile = ({ url, source }) => (source ? CSSSource.fromFileImport(url, source) : CSSSource.fromURI(url));
    const cssFiles = imports
        .map(toUrlSourcePair)
        .filter(({ url }) => !!url)
        .map(getCssFile);
    for (const cssFile of cssFiles) {
        if (cssFile) {
            rulesets.push(...cssFile.selectors);
            keyframes.push(...cssFile.keyframes);
        }
    }
}
export function _populateRules(nodes, rulesets, keyframes, mediaQueryString) {
    for (const node of nodes) {
        if (isKeyframe(node)) {
            const keyframeRule = {
                name: node.name,
                keyframes: node.keyframes,
                mediaQueryString: 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;
            _populateRules(node.rules, rulesets, keyframes, compositeMediaQuery);
        }
        else if (isRule(node)) {
            const ruleset = fromAstNode(node);
            ruleset.mediaQueryString = mediaQueryString;
            rulesets.push(ruleset);
        }
    }
}
export function removeTaggedAdditionalCSS(tag) {
    let selectorsChanged = false;
    let keyframesChanged = false;
    let updated = false;
    for (let i = 0; i < applicationAdditionalSelectors.length; i++) {
        if (applicationAdditionalSelectors[i].tag === tag) {
            applicationAdditionalSelectors.splice(i, 1);
            i--;
            selectorsChanged = true;
        }
    }
    for (let i = 0; i < applicationAdditionalKeyframes.length; i++) {
        if (applicationAdditionalKeyframes[i].tag === tag) {
            applicationAdditionalKeyframes.splice(i, 1);
            i--;
            keyframesChanged = true;
        }
    }
    if (selectorsChanged) {
        mergeCssSelectors();
        updated = true;
    }
    if (keyframesChanged) {
        mergeCssKeyframes();
        updated = true;
    }
    if (updated) {
        applicationCssSelectorVersion++;
    }
    return updated;
}
export function addTaggedAdditionalCSS(cssText, tag) {
    const { selectors, keyframes } = CSSSource.fromDetect(cssText, undefined);
    const tagScope = currentScopeTag || (tag && tagToScopeTag.has(tag) && tagToScopeTag.get(tag)) || null;
    if (tagScope && tag) {
        tagToScopeTag.set(tag, tagScope);
    }
    let selectorsChanged = false;
    let keyframesChanged = false;
    let updated = false;
    if (selectors && selectors.length) {
        selectorsChanged = true;
        if (tag != null || tagScope != null) {
            for (let i = 0, length = selectors.length; i < length; i++) {
                selectors[i].tag = tag;
                selectors[i].scopedTag = tagScope;
            }
        }
        applicationAdditionalSelectors.push(...selectors);
        mergeCssSelectors();
        updated = true;
    }
    if (keyframes && keyframes.length) {
        keyframesChanged = true;
        if (tag != null || tagScope != null) {
            for (let i = 0, length = keyframes.length; i < length; i++) {
                keyframes[i].tag = tag;
                keyframes[i].scopedTag = tagScope;
            }
        }
        applicationAdditionalKeyframes.push(...keyframes);
        mergeCssKeyframes();
        updated = true;
    }
    if (updated) {
        applicationCssSelectorVersion++;
    }
    return updated;
}
const onCssChanged = profile('"style-scope".onCssChanged', (args) => {
    if (args.cssText) {
        const { selectors, keyframes } = CSSSource.fromSource(args.cssText, args.cssFile);
        let updated = false;
        if (selectors) {
            applicationAdditionalSelectors.push(...selectors);
            mergeCssSelectors();
            updated = true;
        }
        if (keyframes) {
            applicationAdditionalKeyframes.push(...keyframes);
            mergeCssKeyframes();
            updated = true;
        }
        if (updated) {
            applicationCssSelectorVersion++;
        }
    }
    else if (args.cssFile) {
        loadCss(args.cssFile, null, null);
    }
});
function onLiveSync(args) {
    loadCss(Application.getCssFileName(), null, null);
}
const loadCss = profile(`"style-scope".loadCss`, (cssModule) => {
    if (!cssModule) {
        return;
    }
    // safely remove "./" as global CSS should be resolved relative to app folder
    if (cssModule.startsWith('./')) {
        cssModule = cssModule.substring(2);
    }
    const { selectors, keyframes } = CSSSource.fromURI(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) {
        applicationCssSelectors = selectors;
        mergeCssSelectors();
        updated = true;
    }
    // Check for existing application css keyframes too in case the app is undergoing a live-sync
    if (keyframes.length > 0 || applicationCssKeyframes.length > 0) {
        applicationCssKeyframes = keyframes;
        mergeCssKeyframes();
        updated = true;
    }
    if (updated) {
        applicationCssSelectorVersion++;
    }
});
global.NativeScriptGlobals.events.on('cssChanged', onCssChanged);
global.NativeScriptGlobals.events.on('livesync', onLiveSync);
// Call to this method is injected in the application in:
//  - no-snapshot - code injected in app.ts by [bundle-config-loader](https://github.com/NativeScript/nativescript-dev-webpack/blob/9b1e34d8ef838006c9b575285c42d2304f5f02b5/bundle-config-loader.ts#L85-L92)
//  - with-snapshot - code injected in snapshot bundle by [NativeScriptSnapshotPlugin](https://github.com/NativeScript/nativescript-dev-webpack/blob/48b26f412fd70c19dc0b9c7763e08e9505a0ae11/plugins/NativeScriptSnapshotPlugin/index.js#L48-L56)
// Having the app.css loaded in snapshot provides significant boost in startup (when using the ns-theme ~150 ms). However, because app.css is resolved at build-time,
// when the snapshot is created - there is no way to use file qualifiers or change the name of on app.css
export const loadAppCSS = profile('"style-scope".loadAppCSS', (args) => {
    loadCss(args.cssFile, null, null);
    global.NativeScriptGlobals.events.off('loadAppCss', loadAppCSS);
});
if (Application.hasLaunched()) {
    loadAppCSS({
        eventName: 'loadAppCss',
        object: Application,
        cssFile: Application.getCssFileName(),
    }, null, null);
}
else {
    global.NativeScriptGlobals.events.on('loadAppCss', loadAppCSS);
}
export class CssState {
    constructor(viewRef) {
        this.viewRef = viewRef;
        this._appliedPropertyValues = CssState.emptyPropertyBag;
        this._onDynamicStateChangeHandler = () => this.updateDynamicState();
    }
    /**
     * Called when a change had occurred that may invalidate the statically matching selectors (class, id, ancestor selectors).
     * As a result, at some point in time, the selectors matched have to be requerried from the style scope and applied to the view.
     */
    onChange() {
        const view = this.viewRef.get();
        if (view && view.isLoaded) {
            this.unsubscribeFromDynamicUpdates();
            this.updateMatch();
            this.subscribeForDynamicUpdates();
            this.updateDynamicState();
        }
        else {
            this._matchInvalid = true;
        }
    }
    isSelectorsLatestVersionApplied() {
        const view = this.viewRef.get();
        if (!view) {
            Trace.write(`isSelectorsLatestVersionApplied returns default value "false" because "this.viewRef" cleared.`, Trace.categories.Style, Trace.messageType.warn);
            return false;
        }
        return this.viewRef.get()._styleScope.getSelectorsVersion() === this._appliedSelectorsVersion;
    }
    onLoaded() {
        if (this._matchInvalid) {
            this.updateMatch();
        }
        this.subscribeForDynamicUpdates();
        this.updateDynamicState();
    }
    onUnloaded() {
        this.unsubscribeFromDynamicUpdates();
        this.stopKeyframeAnimations();
    }
    updateMatch() {
        const view = this.viewRef.get();
        if (view && view._styleScope) {
            this._match = view._styleScope.matchSelectors(view) ?? CssState.emptyMatch;
            this._appliedSelectorsVersion = view._styleScope.getSelectorsVersion();
        }
        else {
            this._match = CssState.emptyMatch;
        }
        this._matchInvalid = false;
    }
    updateDynamicState() {
        const view = this.viewRef.get();
        if (!view) {
            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));
        // 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.
        // if (!matchingSelectors || matchingSelectors.length === 0) {
        // 		return;
        // }
        view._batchUpdate(() => {
            this.stopKeyframeAnimations();
            this.setPropertyValues(matchingSelectors);
            this.playKeyframeAnimations(matchingSelectors);
        });
    }
    playKeyframeAnimations(matchingSelectors) {
        const animations = [];
        matchingSelectors.forEach((selector) => {
            const ruleAnimations = selector.ruleset?.[animationsSymbol];
            if (ruleAnimations) {
                ensureKeyframeAnimationModule();
                for (const animationInfo of ruleAnimations) {
                    const animation = keyframeAnimationModule.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
                    if (animation) {
                        animations.push(animation);
                    }
                }
            }
        });
        if ((this._playsKeyframeAnimations = animations.length > 0)) {
            const view = this.viewRef.get();
            if (!view) {
                Trace.write(`KeyframeAnimations cannot play because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
                return;
            }
            animations.map((animation) => animation.play(view));
            Object.freeze(animations);
            this._appliedAnimations = animations;
        }
    }
    stopKeyframeAnimations() {
        if (!this._playsKeyframeAnimations) {
            return;
        }
        this._appliedAnimations.filter((animation) => animation.isPlaying).forEach((animation) => animation.cancel());
        this._appliedAnimations = CssState.emptyAnimationArray;
        const view = this.viewRef.get();
        if (view) {
            view.style['keyframe:rotate'] = unsetValue;
            view.style['keyframe:rotateX'] = unsetValue;
            view.style['keyframe:rotateY'] = unsetValue;
            view.style['keyframe:scaleX'] = unsetValue;
            view.style['keyframe:scaleY'] = unsetValue;
            view.style['keyframe:translateX'] = unsetValue;
            view.style['keyframe:translateY'] = unsetValue;
            view.style['keyframe:backgroundColor'] = unsetValue;
            view.style['keyframe:opacity'] = unsetValue;
        }
        else {
            Trace.write(`KeyframeAnimations cannot be stopped because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
        }
        this._playsKeyframeAnimations = false;
    }
    /**
     * Calculate the difference between the previously applied property values,
     * and the new set of property values that have to be applied for the provided selectors.
     * Apply the values and ensure each property setter is called at most once to avoid excessive change notifications.
     * @param matchingSelectors
     */
    setPropertyValues(matchingSelectors) {
        const view = this.viewRef.get();
        if (!view) {
            Trace.write(`${matchingSelectors} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
            return;
        }
        const newPropertyValues = new view.style.PropertyBag();
        matchingSelectors.forEach((selector) => selector.ruleset.declarations.forEach((declaration) => (newPropertyValues[declaration.property] = declaration.value)));
        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();
        for (const property in newPropertyValues) {
            const value = cleanupImportantFlags(newPropertyValues[property], property);
            const isCssExp = isCssVariableExpression(value) || isCssCalcExpression(value);
            if (isCssExp) {
                // we handle css exp separately because css vars must be evaluated first
                cssExpsProperties[property] = value;
                continue;
            }
            delete oldProperties[property];
            if (property in oldProperties && oldProperties[property] === value) {
                // Skip unchanged values
                continue;
            }
            if (isCssVariable(property)) {
                view.style.setScopedCssVariable(property, value);
                delete newPropertyValues[property];
                continue;
            }
            valuesToApply[property] = value;
        }
        //we need to parse CSS vars first before evaluating css expressions
        for (const property in cssExpsProperties) {
            delete oldProperties[property];
            const value = evaluateCssExpressions(view, property, cssExpsProperties[property]);
            if (property in oldProperties && oldProperties[property] === value) {
                // Skip unchanged values
                continue;
            }
            if (value === unsetValue) {
                delete newPropertyValues[property];
            }
            if (isCssVariable(property)) {
                view.style.setScopedCssVariable(property, value);
                delete newPropertyValues[property];
            }
            valuesToApply[property] = value;
        }
        // Unset removed values
        for (const property in oldProperties) {
            if (property in view.style) {
                view.style[`css:${property}`] = unsetValue;
            }
            else {
                const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
                view[camelCasedProperty] = unsetValue;
            }
        }
        // Set new values to the style
        for (const property in valuesToApply) {
            const value = valuesToApply[property];
            try {
                if (property in view.style) {
                    view.style[`css:${property}`] = value;
                }
                else {
                    const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
                    view[camelCasedProperty] = value;
                }
            }
            catch (e) {
                Trace.write(`Failed to apply property [${property}] with value [${value}] to ${view}. ${e.stack}`, Trace.categories.Error, Trace.messageType.error);
            }
        }
        this._appliedPropertyValues = newPropertyValues;
    }
    subscribeForDynamicUpdates() {
        const changeMap = this._match.changeMap;
        changeMap.forEach((changes, view) => {
            if (changes.attributes) {
                changes.attributes.forEach((attribute) => {
                    view.addEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
                });
            }
            if (changes.pseudoClasses) {
                changes.pseudoClasses.forEach((pseudoClass) => {
                    const eventName = ':' + pseudoClass;
                    view.addEventListener(':' + pseudoClass, this._onDynamicStateChangeHandler);
                    if (view[eventName]) {
                        view[eventName](+1);
                    }
                });
            }
        });
        this._appliedChangeMap = changeMap;
    }
    unsubscribeFromDynamicUpdates() {
        this._appliedChangeMap.forEach((changes, view) => {
            if (changes.attributes) {
                changes.attributes.forEach((attribute) => {
                    view.removeEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
                });
            }
            if (changes.pseudoClasses) {
                changes.pseudoClasses.forEach((pseudoClass) => {
                    const eventName = ':' + pseudoClass;
                    view.removeEventListener(eventName, this._onDynamicStateChangeHandler);
                    if (view[eventName]) {
                        view[eventName](-1);
                    }
                });
            }
        });
        this._appliedChangeMap = CssState.emptyChangeMap;
    }
    toString() {
        const view = this.viewRef.get();
        if (!view) {
            Trace.write(`toString() of CssState cannot execute correctly because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
            return '';
        }
        return `${view}._cssState`;
    }
}
CssState.emptyChangeMap = Object.freeze(new Map());
CssState.emptyPropertyBag = {};
CssState.emptyAnimationArray = Object.freeze([]);
CssState.emptyMatch = {
    selectors: [],
    changeMap: new Map(),
    addAttribute: () => { },
    addPseudoClass: () => { },
    properties: null,
};
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], CssState.prototype, "updateMatch", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], CssState.prototype, "updateDynamicState", null);
CssState.prototype._appliedChangeMap = CssState.emptyChangeMap;
CssState.prototype._appliedAnimations = CssState.emptyAnimationArray;
CssState.prototype._matchInvalid = true;
export class StyleScope {
    constructor() {
        this._css = '';
        this._localCssSelectors = [];
        this._localCssKeyframes = [];
        this._localCssSelectorVersion = 0;
        this._localCssSelectorsAppliedVersion = 0;
        this._applicationCssSelectorsAppliedVersion = 0;
        this._cssFiles = [];
    }
    get css() {
        return this._css;
    }
    set css(value) {
        this.setCss(value);
    }
    addCss(cssString, cssFileName) {
        this.appendCss(cssString, cssFileName);
    }
    addCssFile(cssFileName) {
        this.appendCss(null, cssFileName);
    }
    changeCssFile(cssFileName) {
        if (!cssFileName) {
            return;
        }
        this._cssFiles.push(cssFileName);
        currentScopeTag = cssFileName;
        const cssFile = CSSSource.fromURI(cssFileName);
        currentScopeTag = null;
        this._css = cssFile.source;
        this._localCssSelectors = cssFile.selectors;
        this._localCssKeyframes = cssFile.keyframes;
        this._localCssSelectorVersion++;
        this.ensureSelectors();
    }
    setCss(cssString, cssFileName) {
        this._css = cssString;
        const cssFile = CSSSource.fromSource(cssString, cssFileName);
        this._localCssSelectors = cssFile.selectors;
        this._localCssKeyframes = cssFile.keyframes;
        this._localCssSelectorVersion++;
        this.ensureSelectors();
    }
    appendCss(cssString, cssFileName) {
        if (!cssString && !cssFileName) {
            return;
        }
        if (cssFileName) {
            this._cssFiles.push(cssFileName);
            currentScopeTag = cssFileName;
        }
        const cssFile = cssString ? CSSSource.fromSource(cssString, cssFileName) : CSSSource.fromURI(cssFileName);
        currentScopeTag = null;
        this._css = this._css + cssFile.source;
        this._localCssSelectors.push(...cssFile.selectors);
        this._localCssKeyframes.push(...cssFile.keyframes);
        this._localCssSelectorVersion++;
        this.ensureSelectors();
    }
    getKeyframeAnimationWithName(animationName) {
        if (!this._mergedCssKeyframes) {
            return null;
        }
        const keyframeRule = this.findKeyframeRule(animationName);
        ensureKeyframeAnimationModule();
        const animation = new keyframeAnimationModule.KeyframeAnimationInfo();
        ensureCssAnimationParserModule();
        animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
        return animation;
    }
    ensureSelectors() {
        if (!this.isApplicationCssSelectorsLatestVersionApplied() || !this.isLocalCssSelectorsLatestVersionApplied() || !this._mergedCssSelectors) {
            this._createSelectors();
        }
        return this.getSelectorsVersion();
    }
    _increaseApplicationCssSelectorVersion() {
        applicationCssSelectorVersion++;
    }
    isApplicationCssSelectorsLatestVersionApplied() {
        return this._applicationCssSelectorsAppliedVersion === applicationCssSelectorVersion;
    }
    isLocalCssSelectorsLatestVersionApplied() {
        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));
        this._applicationCssSelectorsAppliedVersion = applicationCssSelectorVersion;
        toMerge.push(...this._localCssSelectors);
        toMergeKeyframes.push(...this._localCssKeyframes);
        this._localCssSelectorsAppliedVersion = this._localCssSelectorVersion;
        if (toMerge.length > 0) {
            this._mergedCssSelectors = toMerge;
            this._selectorScope = new StyleSheetSelectorScope(this._mergedCssSelectors);
        }
        else {
            this._mergedCssSelectors = null;
            this._selectorScope = null;
        }
        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;
        }
        return match;
    }
    query(node) {
        this.ensureSelectors();
        const match = this.matchSelectors(node);
        return match ? match.selectors : [];
    }
    getSelectorsVersion() {
        // The counters can only go up. So we can return just appVersion + localVersion
        // The 100000 * appVersion is just for easier debugging
        return 100000 * this._applicationCssSelectorsAppliedVersion + this._localCssSelectorsAppliedVersion;
    }
    _applyKeyframesToSelectors(selectors) {
        if (!selectors?.length) {
            return;
        }
        for (let i = selectors.length - 1; i >= 0; i--) {
            const ruleset = selectors[i].ruleset;
            const animations = ruleset[animationsSymbol];
            if (animations != null && animations.length) {
                ensureCssAnimationParserModule();
                for (const animation of animations) {
                    const keyframeRule = this.findKeyframeRule(animation.name);
                    animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
                }
            }
        }
    }
    getAnimations(ruleset) {
        return ruleset[animationsSymbol];
    }
    findKeyframeRule(animationName) {
        if (!this._mergedCssKeyframes) {
            return null;
        }
        // Cache media query results to avoid validations of other identical queries
        let validatedMediaQueries;
        // Iterate in reverse order as the last usable keyframe rule matters the most
        for (let i = this._mergedCssKeyframes.length - 1; i >= 0; i--) {
            const rule = this._mergedCssKeyframes[i];
            if (rule.name !== animationName) {
                continue;
            }
            if (!rule.mediaQueryString) {
                return rule;
            }
            if (!validatedMediaQueries) {
                validatedMediaQueries = [];
            }
            const isMatchingAllQueries = matchMediaQueryString(rule.mediaQueryString, validatedMediaQueries);
            if (isMatchingAllQueries) {
                return rule;
            }
        }
        return null;
    }
}
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, Object]),
    __metadata("design:returntype", void 0)
], StyleScope.prototype, "setCss", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, Object]),
    __metadata("design:returntype", void 0)
], StyleScope.prototype, "appendCss", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], StyleScope.prototype, "_createSelectors", null);
__decorate([
    profile,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", SelectorsMatch)
], StyleScope.prototype, "matchSelectors", null);
export function resolveFileNameFromUrl(url, appDirectory, fileExists, importSource) {
    let fileName = typeof url === 'string' ? url.trim() : '';
    if (fileName.indexOf('~/') === 0) {
        fileName = fileName.replace('~/', '');
    }
    const isAbsolutePath = fileName.indexOf('/') === 0;
    const absolutePath = isAbsolutePath ? fileName : path.join(appDirectory, fileName);
    if (fileExists(absolutePath)) {
        return absolutePath;
    }
    if (!isAbsolutePath) {
        if (fileName[0] === '~' && fileName[1] !== '/' && fileName[1] !== '"') {
            fileName = fileName.substring(1);
        }
        if (importSource) {
            const importFile = resolveFilePathFromImport(importSource, fileName);
            if (fileExists(importFile)) {
                return importFile;
            }
        }
        const external = path.join(appDirectory, 'tns_modules', fileName);
        if (fileExists(external)) {
            return external;
        }
    }
    return null;
}
function resolveFilePathFromImport(importSource, fileName) {
    const importSourceParts = importSource.split(path.separator);
    const fileNameParts = fileName
        .split(path.separator)
        // exclude the dot-segment for current directory
        .filter((p) => !isCurrentDirectory(p));
    // remove current file name
    importSourceParts.pop();
    // remove element in case of dot-segment for parent directory or add file name
    fileNameParts.forEach((p) => (isParentDirectory(p) ? importSourceParts.pop() : importSourceParts.push(p)));
    return importSourceParts.join(path.separator);
}
export const applyInlineStyle = profile(function applyInlineStyle(view, styleStr) {
    const localStyle = `local { ${styleStr} }`;
    const inlineRuleSet = CSSSource.fromSource(localStyle).selectors;
    // Reset unscoped css-variables
    view.style.resetUnscopedCssVariables();
    // Set all the css-variables first, so we can be sure they are up-to-date
    inlineRuleSet[0].declarations.forEach((d) => {
        // Use the actual property name so that a local value is set.
        const property = d.property;
        if (isCssVariable(property)) {
            view.style.setUnscopedCssVariable(property, d.value);
        }
    });
    inlineRuleSet[0].declarations.forEach((d) => {
        // Use the actual property name so that a local value is set.
        const property = d.property;
        try {
            if (isCssVariable(property)) {
                // Skip css-variables, they have been handled
                return;
            }
            const value = evaluateCssExpressions(view, property, d.value);
            if (property in view.style) {
                view.style[property] = value;
            }
            else {
                view[property] = value;
            }
        }
        catch (e) {
            Trace.write(`Failed to apply property [${d.property}] with value [${d.value}] to ${view}. ${e}`, Trace.categories.Error, Trace.messageType.error);
        }
    });
    // This is needed in case of changes to css-variable or css-calc expressions.
    view._onCssStateChange();
});
function isCurrentDirectory(uriPart) {
    return uriPart === '.';
}
function isParentDirectory(uriPart) {
    return uriPart === '..';
}
function isMedia(node) {
    return node.type === 'media';
}
function isKeyframe(node) {
    return node.type === 'keyframes';
}
function isRule(node) {
    return node.type === 'rule';
}
//# sourceMappingURL=style-scope.js.map