@nativescript/core 9.0.12-next.0 → 9.0.12-next.2

package/ui/styling/style-scope.js

@@ -0,0 +1,1020 @@
+import { getNativeScriptGlobals } from '../../globals/global-utils';
+import { _evaluateCssVariableExpression, _evaluateCssCalcExpression, 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 { Trace } from './styling-shared';
+import { File, knownFolders, path } from '../../file-system';
+import { Application } from '../../application';
+import { profile } from './styling-profile';
+import { KeyframeAnimationInfo, KeyframeAnimation } from '../animation/keyframe-animation';
+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';
+import { parse as parseCss } from '../../css/lib/parse';
+// @ts-ignore apps resolve this at runtime with path alias in project bundlers
+import appConfig from '~/package.json';
+let parser = 'css-tree';
+try {
+    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 = [];
+        }
+    }
+    async parseCSSAst() {
+        if (this._source) {
+            if (__CSS_PARSER__ === 'css-tree') {
+                this._ast = cssTreeParse(this._source, this._file);
+            }
+            else if (__CSS_PARSER__ === 'nativescript') {
+                const cssparser = new CSS3Parser(this._source);
+                const stylesheet = cssparser.parseAStylesheet();
+                const cssNS = new CSSNativeScript();
+                this._ast = cssNS.parseStylesheet(stylesheet);
+            }
+            else if (__CSS_PARSER__ === 'rework') {
+                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) {
+                rulesets.forEach((rule) => {
+                    rule[animationsSymbol] = 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", Promise)
+], 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++;
+    }
+});
+getNativeScriptGlobals().events.on('cssChanged', onCssChanged);
+getNativeScriptGlobals().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);
+    getNativeScriptGlobals().events.off('loadAppCss', loadAppCSS);
+});
+if (Application.hasLaunched()) {
+    loadAppCSS({
+        eventName: 'loadAppCss',
+        object: Application,
+        cssFile: Application.getCssFileName(),
+    }, null, null);
+}
+else {
+    getNativeScriptGlobals().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;
+        }
+    }
+    /**
+     * Checks whether style scope and CSS state selectors are in sync.
+     */
+    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) {
+                for (const animationInfo of ruleAnimations) {
+                    const animation = 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](true);
+                    }
+                });
+            }
+        });
+        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](false);
+                    }
+                });
+            }
+        });
+        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);
+        const animation = new KeyframeAnimationInfo();
+        animation.keyframes = keyframeRule ? CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
+        return animation;
+    }
+    ensureSelectors() {
+        if (!this.isApplicationCssSelectorsLatestVersionApplied() || !this.isLocalCssSelectorsLatestVersionApplied() || !this._mergedCssSelectors) {
+            this._createSelectors();
+        }
+        return this.getSelectorsVersion();
+    }
+    /**
+     * Increase the application CSS selector version.
+     */
+    _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) {
+                for (const animation of animations) {
+                    const keyframeRule = this.findKeyframeRule(animation.name);
+                    animation.keyframes = keyframeRule ? 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