@nativescript/core 8.9.0-napi-es5.0 → 8.9.0-napi.1

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