@nativescript/core 8.9.0-alpha.2 → 8.9.0-napi-es5.0

package/ui/styling/style-scope.js

@@ -4,7 +4,7 @@ import { Trace } from '../../trace';
 import { File, knownFolders, path } from '../../file-system';
 import { Application } from '../../application';
 import { profile } from '../../profiling';
-let keyframeAnimationModule;
+var keyframeAnimationModule;
 function ensureKeyframeAnimationModule() {
     if (!keyframeAnimationModule) {
         keyframeAnimationModule = require('../animation/keyframe-animation');
@@ -13,15 +13,15 @@ function ensureKeyframeAnimationModule() {
 import { sanitizeModuleName } from '../../utils/common';
 import { resolveModuleName } from '../../module-name-resolver';
 import { cleanupImportantFlags } from './css-utils';
-let cssAnimationParserModule;
+var cssAnimationParserModule;
 function ensureCssAnimationParserModule() {
     if (!cssAnimationParserModule) {
         cssAnimationParserModule = require('./css-animation-parser');
     }
 }
-let parser = 'css-tree';
+var parser = 'css-tree';
 try {
-    const appConfig = require('~/package.json');
+    var appConfig = require('~/package.json');
     if (appConfig) {
         if (appConfig.cssParser === 'rework') {
             parser = 'rework';
@@ -34,23 +34,23 @@ try {
 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/;
+var mergedApplicationCssSelectors = [];
+var applicationCssSelectors = [];
+var applicationAdditionalSelectors = [];
+var mergedApplicationCssKeyframes = [];
+var applicationCssKeyframes = [];
+var applicationAdditionalKeyframes = [];
+var applicationCssSelectorVersion = 0;
+var tagToScopeTag = new Map();
+var currentScopeTag = null;
+var animationsSymbol = Symbol('animations');
+var kebabCasePattern = /-([a-z])/g;
+var pattern = /('|")(.*?)\1/;
 /**
  * Evaluate css-variable and css-calc expressions
  */
 function evaluateCssExpressions(view, property, value) {
-    const newValue = _evaluateCssVariableExpression(view, property, value);
+    var newValue = _evaluateCssVariableExpression(view, property, value);
     if (newValue === 'unset') {
         return unsetValue;
     }
@@ -59,21 +59,21 @@ function evaluateCssExpressions(view, property, value) {
         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);
+        Trace.write("Failed to evaluate css-calc for property [".concat(property, "] for expression [").concat(value, "] to ").concat(view, ". ").concat(e.stack), Trace.categories.Error, Trace.messageType.error);
         return unsetValue;
     }
     return value;
 }
 export function mergeCssSelectors() {
     mergedApplicationCssSelectors = applicationCssSelectors.slice();
-    mergedApplicationCssSelectors.push(...applicationAdditionalSelectors);
+    mergedApplicationCssSelectors.push.apply(mergedApplicationCssSelectors, applicationAdditionalSelectors);
 }
 export function mergeCssKeyframes() {
     mergedApplicationCssKeyframes = applicationCssKeyframes.slice();
-    mergedApplicationCssKeyframes.push(...applicationAdditionalKeyframes);
+    mergedApplicationCssKeyframes.push.apply(mergedApplicationCssKeyframes, applicationAdditionalKeyframes);
 }
-class CSSSource {
-    constructor(_ast, _url, _file, _source) {
+var CSSSource = /** @class */ (function () {
+    function CSSSource(_ast, _url, _file, _source) {
         this._ast = _ast;
         this._url = _url;
         this._file = _file;
@@ -82,7 +82,7 @@ class CSSSource {
         this._keyframes = [];
         this.parse();
     }
-    static fromDetect(cssOrAst, fileName) {
+    CSSSource.fromDetect = function (cssOrAst, fileName) {
         if (typeof cssOrAst === 'string') {
             // raw-loader
             return CSSSource.fromSource(cssOrAst, fileName);
@@ -98,78 +98,90 @@ class CSSSource {
         }
         // css2json-loader
         return CSSSource.fromSource(cssOrAst.toString(), fileName);
-    }
-    static fromURI(uri) {
+    };
+    CSSSource.fromURI = function (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');
+        var appRelativeUri = CSSSource.pathRelativeToApp(uri);
+        var sanitizedModuleName = sanitizeModuleName(appRelativeUri);
+        var resolvedModuleName = resolveModuleName(sanitizedModuleName, 'css');
         try {
-            const cssOrAst = global.loadModule(resolvedModuleName, true);
+            var 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);
+                Trace.write("Could not load CSS from ".concat(uri, ": ").concat(e), Trace.categories.Error, Trace.messageType.warn);
             }
         }
         return CSSSource.fromFile(appRelativeUri);
-    }
-    static pathRelativeToApp(uri) {
+    };
+    CSSSource.pathRelativeToApp = function (uri) {
         if (!uri.startsWith('/')) {
             return uri;
         }
-        const appPath = knownFolders.currentApp().path;
+        var appPath = knownFolders.currentApp().path;
         if (!uri.startsWith(appPath)) {
-            Trace.write(`${uri} does not start with ${appPath}`, Trace.categories.Error, Trace.messageType.error);
+            Trace.write("".concat(uri, " does not start with ").concat(appPath), Trace.categories.Error, Trace.messageType.error);
             return uri;
         }
-        const relativeUri = `.${uri.substring(appPath.length)}`;
+        var relativeUri = ".".concat(uri.substring(appPath.length));
         return relativeUri;
-    }
-    static fromFile(url) {
+    };
+    CSSSource.fromFile = function (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');
+        var cssFileUrl = url.replace(/\..\w+$/, '.css');
         if (cssFileUrl !== url) {
-            const cssFile = CSSSource.resolveCSSPathFromURL(cssFileUrl);
+            var cssFile = CSSSource.resolveCSSPathFromURL(cssFileUrl);
             if (cssFile) {
                 return new CSSSource(undefined, url, cssFile, undefined);
             }
         }
-        const file = CSSSource.resolveCSSPathFromURL(url);
+        var file = CSSSource.resolveCSSPathFromURL(url);
         return new CSSSource(undefined, url, file, undefined);
-    }
-    static fromFileImport(url, importSource) {
-        const file = CSSSource.resolveCSSPathFromURL(url, importSource);
+    };
+    CSSSource.fromFileImport = function (url, importSource) {
+        var 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);
+    };
+    CSSSource.resolveCSSPathFromURL = function (url, importSource) {
+        var app = knownFolders.currentApp().path;
+        var file = resolveFileNameFromUrl(url, app, File.exists, importSource);
         return file;
-    }
-    static fromSource(source, url) {
+    };
+    CSSSource.fromSource = function (source, url) {
         return new CSSSource(undefined, url, undefined, source);
-    }
-    static fromAST(ast, url) {
+    };
+    CSSSource.fromAST = function (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);
+    };
+    Object.defineProperty(CSSSource.prototype, "selectors", {
+        get: function () {
+            return this._selectors;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CSSSource.prototype, "keyframes", {
+        get: function () {
+            return this._keyframes;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(CSSSource.prototype, "source", {
+        get: function () {
+            return this._source;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    CSSSource.prototype.load = function () {
+        var file = File.fromPath(this._file);
         this._source = file.readTextSync();
-    }
-    parse() {
+    };
+    CSSSource.prototype.parse = function () {
         try {
             if (!this._ast) {
                 if (!this._source && this._file) {
@@ -193,110 +205,119 @@ class CSSSource {
             }
             this._selectors = [];
         }
-    }
-    parseCSSAst() {
+    };
+    CSSSource.prototype.parseCSSAst = function () {
         if (this._source) {
             if (__CSS_PARSER__ === 'css-tree') {
-                const cssTreeParse = require('../../css/css-tree-parser').cssTreeParse;
+                var 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();
+                var CSS3Parser = require('../../css/CSS3Parser').CSS3Parser;
+                var CSSNativeScript = require('../../css/CSSNativeScript').CSSNativeScript;
+                var cssparser = new CSS3Parser(this._source);
+                var stylesheet = cssparser.parseAStylesheet();
+                var cssNS = new CSSNativeScript();
                 this._ast = cssNS.parseStylesheet(stylesheet);
             }
             else if (__CSS_PARSER__ === 'rework') {
-                const parseCss = require('../../css').parse;
+                var parseCss = require('../../css').parse;
                 this._ast = parseCss(this._source, { source: this._file });
             }
         }
-    }
-    createSelectorsAndKeyframes() {
+    };
+    CSSSource.prototype.createSelectorsAndKeyframes = function () {
         if (this._ast) {
-            const nodes = this._ast.stylesheet.rules;
-            const rulesets = [];
-            const keyframes = [];
+            var nodes = this._ast.stylesheet.rules;
+            var rulesets = [];
+            var 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) => {
+                rulesets.forEach(function (rule) {
                     rule[animationsSymbol] = cssAnimationParserModule.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations);
                 });
             }
             this._selectors = rulesets;
             this._keyframes = keyframes;
         }
-    }
-    toString() {
+    };
+    CSSSource.prototype.toString = function () {
         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);
+    };
+    __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);
+    return CSSSource;
+}());
 function populateRulesFromImports(nodes, rulesets, keyframes) {
-    const imports = nodes.filter((r) => r.type === 'import');
+    var imports = nodes.filter(function (r) { return r.type === 'import'; });
     if (!imports.length) {
         return;
     }
-    const urlFromImportObject = (importObject) => {
-        const importItem = importObject['import'];
-        const urlMatch = importItem && importItem.match(pattern);
+    var urlFromImportObject = function (importObject) {
+        var importItem = importObject['import'];
+        var urlMatch = importItem && importItem.match(pattern);
         return urlMatch && urlMatch[2];
     };
-    const sourceFromImportObject = (importObject) => importObject['position'] && importObject['position']['source'];
-    const toUrlSourcePair = (importObject) => ({
+    var sourceFromImportObject = function (importObject) { return importObject['position'] && importObject['position']['source']; };
+    var toUrlSourcePair = function (importObject) { return ({
         url: urlFromImportObject(importObject),
         source: sourceFromImportObject(importObject),
-    });
-    const getCssFile = ({ url, source }) => (source ? CSSSource.fromFileImport(url, source) : CSSSource.fromURI(url));
-    const cssFiles = imports
+    }); };
+    var getCssFile = function (_a) {
+        var url = _a.url, source = _a.source;
+        return (source ? CSSSource.fromFileImport(url, source) : CSSSource.fromURI(url));
+    };
+    var cssFiles = imports
         .map(toUrlSourcePair)
-        .filter(({ url }) => !!url)
+        .filter(function (_a) {
+        var url = _a.url;
+        return !!url;
+    })
         .map(getCssFile);
-    for (const cssFile of cssFiles) {
+    for (var _i = 0, cssFiles_1 = cssFiles; _i < cssFiles_1.length; _i++) {
+        var cssFile = cssFiles_1[_i];
         if (cssFile) {
-            rulesets.push(...cssFile.selectors);
-            keyframes.push(...cssFile.keyframes);
+            rulesets.push.apply(rulesets, cssFile.selectors);
+            keyframes.push.apply(keyframes, cssFile.keyframes);
         }
     }
 }
 export function _populateRules(nodes, rulesets, keyframes, mediaQueryString) {
-    for (const node of nodes) {
+    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+        var node = nodes_1[_i];
         if (isKeyframe(node)) {
-            const keyframeRule = {
+            var keyframeRule = {
                 name: node.name,
                 keyframes: node.keyframes,
                 mediaQueryString: mediaQueryString,
@@ -305,28 +326,28 @@ export function _populateRules(nodes, rulesets, keyframes, mediaQueryString) {
         }
         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;
+            var compositeMediaQuery = mediaQueryString ? mediaQueryString + MEDIA_QUERY_SEPARATOR + node.media : node.media;
             _populateRules(node.rules, rulesets, keyframes, compositeMediaQuery);
         }
         else if (isRule(node)) {
-            const ruleset = fromAstNode(node);
+            var 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++) {
+    var selectorsChanged = false;
+    var keyframesChanged = false;
+    var updated = false;
+    for (var 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++) {
+    for (var i = 0; i < applicationAdditionalKeyframes.length; i++) {
         if (applicationAdditionalKeyframes[i].tag === tag) {
             applicationAdditionalKeyframes.splice(i, 1);
             i--;
@@ -347,35 +368,35 @@ export function removeTaggedAdditionalCSS(tag) {
     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;
+    var _a = CSSSource.fromDetect(cssText, undefined), selectors = _a.selectors, keyframes = _a.keyframes;
+    var 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;
+    var selectorsChanged = false;
+    var keyframesChanged = false;
+    var updated = false;
     if (selectors && selectors.length) {
         selectorsChanged = true;
         if (tag != null || tagScope != null) {
-            for (let i = 0, length = selectors.length; i < length; i++) {
+            for (var i = 0, length_1 = selectors.length; i < length_1; i++) {
                 selectors[i].tag = tag;
                 selectors[i].scopedTag = tagScope;
             }
         }
-        applicationAdditionalSelectors.push(...selectors);
+        applicationAdditionalSelectors.push.apply(applicationAdditionalSelectors, 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++) {
+            for (var i = 0, length_2 = keyframes.length; i < length_2; i++) {
                 keyframes[i].tag = tag;
                 keyframes[i].scopedTag = tagScope;
             }
         }
-        applicationAdditionalKeyframes.push(...keyframes);
+        applicationAdditionalKeyframes.push.apply(applicationAdditionalKeyframes, keyframes);
         mergeCssKeyframes();
         updated = true;
     }
@@ -384,17 +405,17 @@ export function addTaggedAdditionalCSS(cssText, tag) {
     }
     return updated;
 }
-const onCssChanged = profile('"style-scope".onCssChanged', (args) => {
+var onCssChanged = profile('"style-scope".onCssChanged', function (args) {
     if (args.cssText) {
-        const { selectors, keyframes } = CSSSource.fromSource(args.cssText, args.cssFile);
-        let updated = false;
+        var _a = CSSSource.fromSource(args.cssText, args.cssFile), selectors = _a.selectors, keyframes = _a.keyframes;
+        var updated = false;
         if (selectors) {
-            applicationAdditionalSelectors.push(...selectors);
+            applicationAdditionalSelectors.push.apply(applicationAdditionalSelectors, selectors);
             mergeCssSelectors();
             updated = true;
         }
         if (keyframes) {
-            applicationAdditionalKeyframes.push(...keyframes);
+            applicationAdditionalKeyframes.push.apply(applicationAdditionalKeyframes, keyframes);
             mergeCssKeyframes();
             updated = true;
         }
@@ -409,7 +430,7 @@ const onCssChanged = profile('"style-scope".onCssChanged', (args) => {
 function onLiveSync(args) {
     loadCss(Application.getCssFileName(), null, null);
 }
-const loadCss = profile(`"style-scope".loadCss`, (cssModule) => {
+var loadCss = profile("\"style-scope\".loadCss", function (cssModule) {
     if (!cssModule) {
         return;
     }
@@ -417,8 +438,8 @@ const loadCss = profile(`"style-scope".loadCss`, (cssModule) => {
     if (cssModule.startsWith('./')) {
         cssModule = cssModule.substring(2);
     }
-    const { selectors, keyframes } = CSSSource.fromURI(cssModule);
-    let updated = false;
+    var _a = CSSSource.fromURI(cssModule), selectors = _a.selectors, keyframes = _a.keyframes;
+    var 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;
@@ -442,7 +463,7 @@ global.NativeScriptGlobals.events.on('livesync', onLiveSync);
 //  - 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) => {
+export var loadAppCSS = profile('"style-scope".loadAppCSS', function (args) {
     loadCss(args.cssFile, null, null);
     global.NativeScriptGlobals.events.off('loadAppCss', loadAppCSS);
 });
@@ -456,18 +477,19 @@ if (Application.hasLaunched()) {
 else {
     global.NativeScriptGlobals.events.on('loadAppCss', loadAppCSS);
 }
-export class CssState {
-    constructor(viewRef) {
+var CssState = /** @class */ (function () {
+    function CssState(viewRef) {
+        var _this = this;
         this.viewRef = viewRef;
         this._appliedPropertyValues = CssState.emptyPropertyBag;
-        this._onDynamicStateChangeHandler = () => this.updateDynamicState();
+        this._onDynamicStateChangeHandler = function () { return _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();
+    CssState.prototype.onChange = function () {
+        var view = this.viewRef.get();
         if (view && view.isLoaded) {
             this.unsubscribeFromDynamicUpdates();
             this.updateMatch();
@@ -477,64 +499,68 @@ export class CssState {
         else {
             this._matchInvalid = true;
         }
-    }
-    isSelectorsLatestVersionApplied() {
-        const view = this.viewRef.get();
+    };
+    CssState.prototype.isSelectorsLatestVersionApplied = function () {
+        var view = this.viewRef.get();
         if (!view) {
-            Trace.write(`isSelectorsLatestVersionApplied returns default value "false" because "this.viewRef" cleared.`, Trace.categories.Style, Trace.messageType.warn);
+            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() {
+    };
+    CssState.prototype.onLoaded = function () {
         if (this._matchInvalid) {
             this.updateMatch();
         }
         this.subscribeForDynamicUpdates();
         this.updateDynamicState();
-    }
-    onUnloaded() {
+    };
+    CssState.prototype.onUnloaded = function () {
         this.unsubscribeFromDynamicUpdates();
         this.stopKeyframeAnimations();
-    }
-    updateMatch() {
-        const view = this.viewRef.get();
+    };
+    CssState.prototype.updateMatch = function () {
+        var _a;
+        var view = this.viewRef.get();
         if (view && view._styleScope) {
-            this._match = view._styleScope.matchSelectors(view) ?? CssState.emptyMatch;
+            this._match = (_a = view._styleScope.matchSelectors(view)) !== null && _a !== void 0 ? _a : CssState.emptyMatch;
             this._appliedSelectorsVersion = view._styleScope.getSelectorsVersion();
         }
         else {
             this._match = CssState.emptyMatch;
         }
         this._matchInvalid = false;
-    }
-    updateDynamicState() {
-        const view = this.viewRef.get();
+    };
+    CssState.prototype.updateDynamicState = function () {
+        var _this = this;
+        var view = this.viewRef.get();
         if (!view) {
-            Trace.write(`updateDynamicState not executed to view because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+            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));
+        var matchingSelectors = this._match.selectors.filter(function (sel) { return (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);
+        view._batchUpdate(function () {
+            _this.stopKeyframeAnimations();
+            _this.setPropertyValues(matchingSelectors);
+            _this.playKeyframeAnimations(matchingSelectors);
         });
-    }
-    playKeyframeAnimations(matchingSelectors) {
-        const animations = [];
-        matchingSelectors.forEach((selector) => {
-            const ruleAnimations = selector.ruleset?.[animationsSymbol];
+    };
+    CssState.prototype.playKeyframeAnimations = function (matchingSelectors) {
+        var animations = [];
+        matchingSelectors.forEach(function (selector) {
+            var _a;
+            var ruleAnimations = (_a = selector.ruleset) === null || _a === void 0 ? void 0 : _a[animationsSymbol];
             if (ruleAnimations) {
                 ensureKeyframeAnimationModule();
-                for (const animationInfo of ruleAnimations) {
-                    const animation = keyframeAnimationModule.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
+                for (var _i = 0, ruleAnimations_1 = ruleAnimations; _i < ruleAnimations_1.length; _i++) {
+                    var animationInfo = ruleAnimations_1[_i];
+                    var animation = keyframeAnimationModule.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
                     if (animation) {
                         animations.push(animation);
                     }
@@ -542,23 +568,23 @@ export class CssState {
             }
         });
         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);
+            var view_1 = this.viewRef.get();
+            if (!view_1) {
+                Trace.write("KeyframeAnimations cannot play because \".viewRef\" is cleared", Trace.categories.Animation, Trace.messageType.warn);
                 return;
             }
-            animations.map((animation) => animation.play(view));
+            animations.map(function (animation) { return animation.play(view_1); });
             Object.freeze(animations);
             this._appliedAnimations = animations;
         }
-    }
-    stopKeyframeAnimations() {
+    };
+    CssState.prototype.stopKeyframeAnimations = function () {
         if (!this._playsKeyframeAnimations) {
             return;
         }
-        this._appliedAnimations.filter((animation) => animation.isPlaying).forEach((animation) => animation.cancel());
+        this._appliedAnimations.filter(function (animation) { return animation.isPlaying; }).forEach(function (animation) { return animation.cancel(); });
         this._appliedAnimations = CssState.emptyAnimationArray;
-        const view = this.viewRef.get();
+        var view = this.viewRef.get();
         if (view) {
             view.style['keyframe:rotate'] = unsetValue;
             view.style['keyframe:rotateX'] = unsetValue;
@@ -571,33 +597,33 @@ export class CssState {
             view.style['keyframe:opacity'] = unsetValue;
         }
         else {
-            Trace.write(`KeyframeAnimations cannot be stopped because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
+            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();
+    CssState.prototype.setPropertyValues = function (matchingSelectors) {
+        var 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);
+            Trace.write("".concat(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;
+        var newPropertyValues = new view.style.PropertyBag();
+        matchingSelectors.forEach(function (selector) { return selector.ruleset.declarations.forEach(function (declaration) { return (newPropertyValues[declaration.property] = declaration.value); }); });
+        var 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);
+        var valuesToApply = {};
+        var cssExpsProperties = {};
+        var replacementFunc = function (g) { return g[1].toUpperCase(); };
+        for (var property in newPropertyValues) {
+            var value = cleanupImportantFlags(newPropertyValues[property], property);
+            var isCssExp = isCssVariableExpression(value) || isCssCalcExpression(value);
             if (isCssExp) {
                 // we handle css exp separately because css vars must be evaluated first
                 cssExpsProperties[property] = value;
@@ -616,9 +642,9 @@ export class CssState {
             valuesToApply[property] = value;
         }
         //we need to parse CSS vars first before evaluating css expressions
-        for (const property in cssExpsProperties) {
+        for (var property in cssExpsProperties) {
             delete oldProperties[property];
-            const value = evaluateCssExpressions(view, property, cssExpsProperties[property]);
+            var value = evaluateCssExpressions(view, property, cssExpsProperties[property]);
             if (property in oldProperties && oldProperties[property] === value) {
                 // Skip unchanged values
                 continue;
@@ -633,45 +659,46 @@ export class CssState {
             valuesToApply[property] = value;
         }
         // Unset removed values
-        for (const property in oldProperties) {
+        for (var property in oldProperties) {
             if (property in view.style) {
-                view.style[`css:${property}`] = unsetValue;
+                view.style["css:".concat(property)] = unsetValue;
             }
             else {
-                const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
+                var camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
                 view[camelCasedProperty] = unsetValue;
             }
         }
         // Set new values to the style
-        for (const property in valuesToApply) {
-            const value = valuesToApply[property];
+        for (var property in valuesToApply) {
+            var value = valuesToApply[property];
             try {
                 if (property in view.style) {
-                    view.style[`css:${property}`] = value;
+                    view.style["css:".concat(property)] = value;
                 }
                 else {
-                    const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
+                    var 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);
+                Trace.write("Failed to apply property [".concat(property, "] with value [").concat(value, "] to ").concat(view, ". ").concat(e.stack), Trace.categories.Error, Trace.messageType.error);
             }
         }
         this._appliedPropertyValues = newPropertyValues;
-    }
-    subscribeForDynamicUpdates() {
-        const changeMap = this._match.changeMap;
-        changeMap.forEach((changes, view) => {
+    };
+    CssState.prototype.subscribeForDynamicUpdates = function () {
+        var _this = this;
+        var changeMap = this._match.changeMap;
+        changeMap.forEach(function (changes, view) {
             if (changes.attributes) {
-                changes.attributes.forEach((attribute) => {
-                    view.addEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
+                changes.attributes.forEach(function (attribute) {
+                    view.addEventListener(attribute + 'Change', _this._onDynamicStateChangeHandler);
                 });
             }
             if (changes.pseudoClasses) {
-                changes.pseudoClasses.forEach((pseudoClass) => {
-                    const eventName = ':' + pseudoClass;
-                    view.addEventListener(':' + pseudoClass, this._onDynamicStateChangeHandler);
+                changes.pseudoClasses.forEach(function (pseudoClass) {
+                    var eventName = ':' + pseudoClass;
+                    view.addEventListener(':' + pseudoClass, _this._onDynamicStateChangeHandler);
                     if (view[eventName]) {
                         view[eventName](+1);
                     }
@@ -679,18 +706,19 @@ export class CssState {
             }
         });
         this._appliedChangeMap = changeMap;
-    }
-    unsubscribeFromDynamicUpdates() {
-        this._appliedChangeMap.forEach((changes, view) => {
+    };
+    CssState.prototype.unsubscribeFromDynamicUpdates = function () {
+        var _this = this;
+        this._appliedChangeMap.forEach(function (changes, view) {
             if (changes.attributes) {
-                changes.attributes.forEach((attribute) => {
-                    view.removeEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
+                changes.attributes.forEach(function (attribute) {
+                    view.removeEventListener(attribute + 'Change', _this._onDynamicStateChangeHandler);
                 });
             }
             if (changes.pseudoClasses) {
-                changes.pseudoClasses.forEach((pseudoClass) => {
-                    const eventName = ':' + pseudoClass;
-                    view.removeEventListener(eventName, this._onDynamicStateChangeHandler);
+                changes.pseudoClasses.forEach(function (pseudoClass) {
+                    var eventName = ':' + pseudoClass;
+                    view.removeEventListener(eventName, _this._onDynamicStateChangeHandler);
                     if (view[eventName]) {
                         view[eventName](-1);
                     }
@@ -698,43 +726,45 @@ export class CssState {
             }
         });
         this._appliedChangeMap = CssState.emptyChangeMap;
-    }
-    toString() {
-        const view = this.viewRef.get();
+    };
+    CssState.prototype.toString = function () {
+        var view = this.viewRef.get();
         if (!view) {
-            Trace.write(`toString() of CssState cannot execute correctly because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
+            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);
+        return "".concat(view, "._cssState");
+    };
+    CssState.emptyChangeMap = Object.freeze(new Map());
+    CssState.emptyPropertyBag = {};
+    CssState.emptyAnimationArray = Object.freeze([]);
+    CssState.emptyMatch = {
+        selectors: [],
+        changeMap: new Map(),
+        addAttribute: function () { },
+        addPseudoClass: function () { },
+        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);
+    return CssState;
+}());
+export { CssState };
 CssState.prototype._appliedChangeMap = CssState.emptyChangeMap;
 CssState.prototype._appliedAnimations = CssState.emptyAnimationArray;
 CssState.prototype._matchInvalid = true;
-export class StyleScope {
-    constructor() {
+var StyleScope = /** @class */ (function () {
+    function StyleScope() {
         this._css = '';
         this._localCssSelectors = [];
         this._localCssKeyframes = [];
@@ -743,41 +773,46 @@ export class StyleScope {
         this._applicationCssSelectorsAppliedVersion = 0;
         this._cssFiles = [];
     }
-    get css() {
-        return this._css;
-    }
-    set css(value) {
-        this.setCss(value);
-    }
-    addCss(cssString, cssFileName) {
+    Object.defineProperty(StyleScope.prototype, "css", {
+        get: function () {
+            return this._css;
+        },
+        set: function (value) {
+            this.setCss(value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    StyleScope.prototype.addCss = function (cssString, cssFileName) {
         this.appendCss(cssString, cssFileName);
-    }
-    addCssFile(cssFileName) {
+    };
+    StyleScope.prototype.addCssFile = function (cssFileName) {
         this.appendCss(null, cssFileName);
-    }
-    changeCssFile(cssFileName) {
+    };
+    StyleScope.prototype.changeCssFile = function (cssFileName) {
         if (!cssFileName) {
             return;
         }
         this._cssFiles.push(cssFileName);
         currentScopeTag = cssFileName;
-        const cssFile = CSSSource.fromURI(cssFileName);
+        var 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) {
+    };
+    StyleScope.prototype.setCss = function (cssString, cssFileName) {
         this._css = cssString;
-        const cssFile = CSSSource.fromSource(cssString, cssFileName);
+        var cssFile = CSSSource.fromSource(cssString, cssFileName);
         this._localCssSelectors = cssFile.selectors;
         this._localCssKeyframes = cssFile.keyframes;
         this._localCssSelectorVersion++;
         this.ensureSelectors();
-    }
-    appendCss(cssString, cssFileName) {
+    };
+    StyleScope.prototype.appendCss = function (cssString, cssFileName) {
+        var _a, _b;
         if (!cssString && !cssFileName) {
             return;
         }
@@ -785,48 +820,49 @@ export class StyleScope {
             this._cssFiles.push(cssFileName);
             currentScopeTag = cssFileName;
         }
-        const cssFile = cssString ? CSSSource.fromSource(cssString, cssFileName) : CSSSource.fromURI(cssFileName);
+        var 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);
+        (_a = this._localCssSelectors).push.apply(_a, cssFile.selectors);
+        (_b = this._localCssKeyframes).push.apply(_b, cssFile.keyframes);
         this._localCssSelectorVersion++;
         this.ensureSelectors();
-    }
-    getKeyframeAnimationWithName(animationName) {
+    };
+    StyleScope.prototype.getKeyframeAnimationWithName = function (animationName) {
         if (!this._mergedCssKeyframes) {
             return null;
         }
-        const keyframeRule = this.findKeyframeRule(animationName);
+        var keyframeRule = this.findKeyframeRule(animationName);
         ensureKeyframeAnimationModule();
-        const animation = new keyframeAnimationModule.KeyframeAnimationInfo();
+        var animation = new keyframeAnimationModule.KeyframeAnimationInfo();
         ensureCssAnimationParserModule();
         animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
         return animation;
-    }
-    ensureSelectors() {
+    };
+    StyleScope.prototype.ensureSelectors = function () {
         if (!this.isApplicationCssSelectorsLatestVersionApplied() || !this.isLocalCssSelectorsLatestVersionApplied() || !this._mergedCssSelectors) {
             this._createSelectors();
         }
         return this.getSelectorsVersion();
-    }
-    _increaseApplicationCssSelectorVersion() {
+    };
+    StyleScope.prototype._increaseApplicationCssSelectorVersion = function () {
         applicationCssSelectorVersion++;
-    }
-    isApplicationCssSelectorsLatestVersionApplied() {
+    };
+    StyleScope.prototype.isApplicationCssSelectorsLatestVersionApplied = function () {
         return this._applicationCssSelectorsAppliedVersion === applicationCssSelectorVersion;
-    }
-    isLocalCssSelectorsLatestVersionApplied() {
+    };
+    StyleScope.prototype.isLocalCssSelectorsLatestVersionApplied = function () {
         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));
+    };
+    StyleScope.prototype._createSelectors = function () {
+        var _this = this;
+        var toMerge = [];
+        var toMergeKeyframes = [];
+        toMerge.push.apply(toMerge, mergedApplicationCssSelectors.filter(function (v) { return !v.scopedTag || _this._cssFiles.indexOf(v.scopedTag) >= 0; }));
+        toMergeKeyframes.push.apply(toMergeKeyframes, mergedApplicationCssKeyframes.filter(function (v) { return !v.scopedTag || _this._cssFiles.indexOf(v.scopedTag) >= 0; }));
         this._applicationCssSelectorsAppliedVersion = applicationCssSelectorVersion;
-        toMerge.push(...this._localCssSelectors);
-        toMergeKeyframes.push(...this._localCssKeyframes);
+        toMerge.push.apply(toMerge, this._localCssSelectors);
+        toMergeKeyframes.push.apply(toMergeKeyframes, this._localCssKeyframes);
         this._localCssSelectorsAppliedVersion = this._localCssSelectorVersion;
         if (toMerge.length > 0) {
             this._mergedCssSelectors = toMerge;
@@ -837,11 +873,11 @@ export class StyleScope {
             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;
+    StyleScope.prototype.matchSelectors = function (view) {
+        var match;
         // should be (view: ViewBase): SelectorsMatch<ViewBase>
         this.ensureSelectors();
         if (this._selectorScope) {
@@ -853,45 +889,46 @@ export class StyleScope {
             match = null;
         }
         return match;
-    }
-    query(node) {
+    };
+    StyleScope.prototype.query = function (node) {
         this.ensureSelectors();
-        const match = this.matchSelectors(node);
+        var match = this.matchSelectors(node);
         return match ? match.selectors : [];
-    }
-    getSelectorsVersion() {
+    };
+    StyleScope.prototype.getSelectorsVersion = function () {
         // 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) {
+    };
+    StyleScope.prototype._applyKeyframesToSelectors = function (selectors) {
+        if (!(selectors === null || selectors === void 0 ? void 0 : selectors.length)) {
             return;
         }
-        for (let i = selectors.length - 1; i >= 0; i--) {
-            const ruleset = selectors[i].ruleset;
-            const animations = ruleset[animationsSymbol];
+        for (var i = selectors.length - 1; i >= 0; i--) {
+            var ruleset = selectors[i].ruleset;
+            var animations = ruleset[animationsSymbol];
             if (animations != null && animations.length) {
                 ensureCssAnimationParserModule();
-                for (const animation of animations) {
-                    const keyframeRule = this.findKeyframeRule(animation.name);
+                for (var _i = 0, animations_1 = animations; _i < animations_1.length; _i++) {
+                    var animation = animations_1[_i];
+                    var keyframeRule = this.findKeyframeRule(animation.name);
                     animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
                 }
             }
         }
-    }
-    getAnimations(ruleset) {
+    };
+    StyleScope.prototype.getAnimations = function (ruleset) {
         return ruleset[animationsSymbol];
-    }
-    findKeyframeRule(animationName) {
+    };
+    StyleScope.prototype.findKeyframeRule = function (animationName) {
         if (!this._mergedCssKeyframes) {
             return null;
         }
         // Cache media query results to avoid validations of other identical queries
-        let validatedMediaQueries;
+        var 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];
+        for (var i = this._mergedCssKeyframes.length - 1; i >= 0; i--) {
+            var rule = this._mergedCssKeyframes[i];
             if (rule.name !== animationName) {
                 continue;
             }
@@ -901,45 +938,47 @@ export class StyleScope {
             if (!validatedMediaQueries) {
                 validatedMediaQueries = [];
             }
-            const isMatchingAllQueries = matchMediaQueryString(rule.mediaQueryString, validatedMediaQueries);
+            var 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);
+    };
+    __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);
+    return StyleScope;
+}());
+export { StyleScope };
 export function resolveFileNameFromUrl(url, appDirectory, fileExists, importSource) {
-    let fileName = typeof url === 'string' ? url.trim() : '';
+    var 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);
+    var isAbsolutePath = fileName.indexOf('/') === 0;
+    var absolutePath = isAbsolutePath ? fileName : path.join(appDirectory, fileName);
     if (fileExists(absolutePath)) {
         return absolutePath;
     }
@@ -948,52 +987,52 @@ export function resolveFileNameFromUrl(url, appDirectory, fileExists, importSour
             fileName = fileName.substring(1);
         }
         if (importSource) {
-            const importFile = resolveFilePathFromImport(importSource, fileName);
+            var importFile = resolveFilePathFromImport(importSource, fileName);
             if (fileExists(importFile)) {
                 return importFile;
             }
         }
-        const external = path.join(appDirectory, 'tns_modules', fileName);
-        if (fileExists(external)) {
-            return external;
+        var external_1 = path.join(appDirectory, 'tns_modules', fileName);
+        if (fileExists(external_1)) {
+            return external_1;
         }
     }
     return null;
 }
 function resolveFilePathFromImport(importSource, fileName) {
-    const importSourceParts = importSource.split(path.separator);
-    const fileNameParts = fileName
+    var importSourceParts = importSource.split(path.separator);
+    var fileNameParts = fileName
         .split(path.separator)
         // exclude the dot-segment for current directory
-        .filter((p) => !isCurrentDirectory(p));
+        .filter(function (p) { return !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)));
+    fileNameParts.forEach(function (p) { return (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;
+export var applyInlineStyle = profile(function applyInlineStyle(view, styleStr) {
+    var localStyle = "local { ".concat(styleStr, " }");
+    var 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) => {
+    inlineRuleSet[0].declarations.forEach(function (d) {
         // Use the actual property name so that a local value is set.
-        const property = d.property;
+        var property = d.property;
         if (isCssVariable(property)) {
             view.style.setUnscopedCssVariable(property, d.value);
         }
     });
-    inlineRuleSet[0].declarations.forEach((d) => {
+    inlineRuleSet[0].declarations.forEach(function (d) {
         // Use the actual property name so that a local value is set.
-        const property = d.property;
+        var property = d.property;
         try {
             if (isCssVariable(property)) {
                 // Skip css-variables, they have been handled
                 return;
             }
-            const value = evaluateCssExpressions(view, property, d.value);
+            var value = evaluateCssExpressions(view, property, d.value);
             if (property in view.style) {
                 view.style[property] = value;
             }
@@ -1002,7 +1041,7 @@ export const applyInlineStyle = profile(function applyInlineStyle(view, styleStr
             }
         }
         catch (e) {
-            Trace.write(`Failed to apply property [${d.property}] with value [${d.value}] to ${view}. ${e}`, Trace.categories.Error, Trace.messageType.error);
+            Trace.write("Failed to apply property [".concat(d.property, "] with value [").concat(d.value, "] to ").concat(view, ". ").concat(e), Trace.categories.Error, Trace.messageType.error);
         }
     });
     // This is needed in case of changes to css-variable or css-calc expressions.