@nativescript/core 8.8.0-embed.0 → 8.8.0-embed.1-next-07-01-2024-9752585063

package/ui/styling/style-scope.js

@@ -1,5 +1,5 @@
 import { unsetValue, _evaluateCssVariableExpression, _evaluateCssCalcExpression, isCssVariable, isCssVariableExpression, isCssCalcExpression } from '../core/properties';
-import { SelectorsMap, SelectorsMatch, fromAstNodes } from './css-selector';
+import { StyleSheetSelectorScope, SelectorsMatch, fromAstNode, MEDIA_QUERY_SEPARATOR, matchMediaQueryString } from './css-selector';
 import { Trace } from '../../trace';
 import { File, knownFolders, path } from '../../file-system';
 import { Application } from '../../application';
@@ -13,6 +13,7 @@ function ensureKeyframeAnimationModule() {
 import { sanitizeModuleName } from '../../utils/common';
 import { resolveModuleName } from '../../module-name-resolver';
 import { cleanupImportantFlags } from './css-utils';
+import { Observable } from '../../data/observable';
 let cssAnimationParserModule;
 function ensureCssAnimationParserModule() {
     if (!cssAnimationParserModule) {
@@ -34,6 +35,18 @@ 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/;
 /**
  * Evaluate css-variable and css-calc expressions
  */
@@ -53,34 +66,27 @@ function evaluateCssExpressions(view, property, value) {
     return value;
 }
 export function mergeCssSelectors() {
-    applicationCssSelectors = applicationSelectors.slice();
-    applicationCssSelectors.push(...applicationAdditionalSelectors);
-    applicationCssSelectorVersion++;
+    mergedApplicationCssSelectors = applicationCssSelectors.slice();
+    mergedApplicationCssSelectors.push(...applicationAdditionalSelectors);
+}
+export function mergeCssKeyframes() {
+    mergedApplicationCssKeyframes = applicationCssKeyframes.slice();
+    mergedApplicationCssKeyframes.push(...applicationAdditionalKeyframes);
 }
-let applicationCssSelectors = [];
-let applicationCssSelectorVersion = 0;
-let applicationSelectors = [];
-const tagToScopeTag = new Map();
-let currentScopeTag = null;
-const applicationAdditionalSelectors = [];
-const applicationKeyframes = {};
-const animationsSymbol = Symbol('animations');
-const kebabCasePattern = /-([a-z])/g;
-const pattern = /('|")(.*?)\1/;
 class CSSSource {
-    constructor(_ast, _url, _file, _keyframes, _source) {
+    constructor(_ast, _url, _file, _source) {
         this._ast = _ast;
         this._url = _url;
         this._file = _file;
-        this._keyframes = _keyframes;
         this._source = _source;
         this._selectors = [];
+        this._keyframes = [];
         this.parse();
     }
-    static fromDetect(cssOrAst, keyframes, fileName) {
+    static fromDetect(cssOrAst, fileName) {
         if (typeof cssOrAst === 'string') {
             // raw-loader
-            return CSSSource.fromSource(cssOrAst, keyframes, fileName);
+            return CSSSource.fromSource(cssOrAst, fileName);
         }
         else if (typeof cssOrAst === 'object') {
             if (cssOrAst.default) {
@@ -88,13 +94,13 @@ class CSSSource {
             }
             if (cssOrAst.type === 'stylesheet' && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) {
                 // css-loader
-                return CSSSource.fromAST(cssOrAst, keyframes, fileName);
+                return CSSSource.fromAST(cssOrAst, fileName);
             }
         }
         // css2json-loader
-        return CSSSource.fromSource(cssOrAst.toString(), keyframes, fileName);
+        return CSSSource.fromSource(cssOrAst.toString(), fileName);
     }
-    static fromURI(uri, keyframes) {
+    static fromURI(uri) {
         // webpack modules require all file paths to be relative to /app folder
         const appRelativeUri = CSSSource.pathRelativeToApp(uri);
         const sanitizedModuleName = sanitizeModuleName(appRelativeUri);
@@ -102,7 +108,7 @@ class CSSSource {
         try {
             const cssOrAst = global.loadModule(resolvedModuleName, true);
             if (cssOrAst) {
-                return CSSSource.fromDetect(cssOrAst, keyframes, resolvedModuleName);
+                return CSSSource.fromDetect(cssOrAst, resolvedModuleName);
             }
         }
         catch (e) {
@@ -110,7 +116,7 @@ class CSSSource {
                 Trace.write(`Could not load CSS from ${uri}: ${e}`, Trace.categories.Error, Trace.messageType.warn);
             }
         }
-        return CSSSource.fromFile(appRelativeUri, keyframes);
+        return CSSSource.fromFile(appRelativeUri);
     }
     static pathRelativeToApp(uri) {
         if (!uri.startsWith('/')) {
@@ -121,39 +127,42 @@ class CSSSource {
             Trace.write(`${uri} does not start with ${appPath}`, Trace.categories.Error, Trace.messageType.error);
             return uri;
         }
-        const relativeUri = `.${uri.substr(appPath.length)}`;
+        const relativeUri = `.${uri.substring(appPath.length)}`;
         return relativeUri;
     }
-    static fromFile(url, keyframes) {
+    static fromFile(url) {
         // .scss, .sass, etc. css files in vanilla app are usually compiled to .css so we will try to load a compiled file first.
         const cssFileUrl = url.replace(/\..\w+$/, '.css');
         if (cssFileUrl !== url) {
             const cssFile = CSSSource.resolveCSSPathFromURL(cssFileUrl);
             if (cssFile) {
-                return new CSSSource(undefined, url, cssFile, keyframes, undefined);
+                return new CSSSource(undefined, url, cssFile, undefined);
             }
         }
         const file = CSSSource.resolveCSSPathFromURL(url);
-        return new CSSSource(undefined, url, file, keyframes, undefined);
+        return new CSSSource(undefined, url, file, undefined);
     }
-    static fromFileImport(url, keyframes, importSource) {
+    static fromFileImport(url, importSource) {
         const file = CSSSource.resolveCSSPathFromURL(url, importSource);
-        return new CSSSource(undefined, url, file, keyframes, undefined);
+        return new CSSSource(undefined, url, file, undefined);
     }
     static resolveCSSPathFromURL(url, importSource) {
         const app = knownFolders.currentApp().path;
         const file = resolveFileNameFromUrl(url, app, File.exists, importSource);
         return file;
     }
-    static fromSource(source, keyframes, url) {
-        return new CSSSource(undefined, url, undefined, keyframes, source);
+    static fromSource(source, url) {
+        return new CSSSource(undefined, url, undefined, source);
     }
-    static fromAST(ast, keyframes, url) {
-        return new CSSSource(ast, url, undefined, keyframes, undefined);
+    static fromAST(ast, url) {
+        return new CSSSource(ast, url, undefined, undefined);
     }
     get selectors() {
         return this._selectors;
     }
+    get keyframes() {
+        return this._keyframes;
+    }
     get source() {
         return this._source;
     }
@@ -173,7 +182,7 @@ class CSSSource {
                 }
             }
             if (this._ast) {
-                this.createSelectors();
+                this.createSelectorsAndKeyframes();
             }
             else {
                 this._selectors = [];
@@ -206,42 +215,23 @@ class CSSSource {
             }
         }
     }
-    createSelectors() {
+    createSelectorsAndKeyframes() {
         if (this._ast) {
-            this._selectors = [...this.createSelectorsFromImports(), ...this.createSelectorsFromSyntaxTree()];
-        }
-    }
-    createSelectorsFromImports() {
-        const imports = this._ast['stylesheet']['rules'].filter((r) => r.type === 'import');
-        const urlFromImportObject = (importObject) => {
-            const importItem = importObject['import'];
-            const urlMatch = importItem && importItem.match(pattern);
-            return urlMatch && urlMatch[2];
-        };
-        const sourceFromImportObject = (importObject) => importObject['position'] && importObject['position']['source'];
-        const toUrlSourcePair = (importObject) => ({
-            url: urlFromImportObject(importObject),
-            source: sourceFromImportObject(importObject),
-        });
-        const getCssFile = ({ url, source }) => (source ? CSSSource.fromFileImport(url, this._keyframes, source) : CSSSource.fromURI(url, this._keyframes));
-        const cssFiles = imports
-            .map(toUrlSourcePair)
-            .filter(({ url }) => !!url)
-            .map(getCssFile);
-        const selectors = cssFiles.map((file) => (file && file.selectors) || []);
-        return selectors.reduce((acc, val) => acc.concat(val), []);
-    }
-    createSelectorsFromSyntaxTree() {
-        const nodes = this._ast.stylesheet.rules;
-        nodes.filter(isKeyframe).forEach((node) => (this._keyframes[node.name] = node));
-        const rulesets = fromAstNodes(nodes);
-        if (rulesets && rulesets.length) {
-            ensureCssAnimationParserModule();
-            rulesets.forEach((rule) => {
-                rule[animationsSymbol] = cssAnimationParserModule.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations);
-            });
-        }
-        return rulesets;
+            const nodes = this._ast.stylesheet.rules;
+            const rulesets = [];
+            const keyframes = [];
+            // When css2json-loader is enabled, imports are handled there and removed from AST rules
+            populateRulesFromImports(nodes, rulesets, keyframes);
+            _populateRules(nodes, rulesets, keyframes);
+            if (rulesets && rulesets.length) {
+                ensureCssAnimationParserModule();
+                rulesets.forEach((rule) => {
+                    rule[animationsSymbol] = cssAnimationParserModule.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations);
+                });
+            }
+            this._selectors = rulesets;
+            this._keyframes = keyframes;
+        }
     }
     toString() {
         return this._file || this._url || '(in-memory)';
@@ -270,53 +260,147 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], CSSSource.prototype, "createSelectors", null);
+], CSSSource.prototype, "createSelectorsAndKeyframes", null);
 __decorate([
     profile,
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [String, String]),
     __metadata("design:returntype", String)
 ], CSSSource, "resolveCSSPathFromURL", null);
+function populateRulesFromImports(nodes, rulesets, keyframes) {
+    const imports = nodes.filter((r) => r.type === 'import');
+    if (!imports.length) {
+        return;
+    }
+    const urlFromImportObject = (importObject) => {
+        const importItem = importObject['import'];
+        const urlMatch = importItem && importItem.match(pattern);
+        return urlMatch && urlMatch[2];
+    };
+    const sourceFromImportObject = (importObject) => importObject['position'] && importObject['position']['source'];
+    const toUrlSourcePair = (importObject) => ({
+        url: urlFromImportObject(importObject),
+        source: sourceFromImportObject(importObject),
+    });
+    const getCssFile = ({ url, source }) => (source ? CSSSource.fromFileImport(url, source) : CSSSource.fromURI(url));
+    const cssFiles = imports
+        .map(toUrlSourcePair)
+        .filter(({ url }) => !!url)
+        .map(getCssFile);
+    for (const cssFile of cssFiles) {
+        if (cssFile) {
+            rulesets.push(...cssFile.selectors);
+            keyframes.push(...cssFile.keyframes);
+        }
+    }
+}
+export function _populateRules(nodes, rulesets, keyframes, mediaQueryString) {
+    for (const node of nodes) {
+        if (isKeyframe(node)) {
+            const keyframeRule = {
+                name: node.name,
+                keyframes: node.keyframes,
+                mediaQueryString: mediaQueryString,
+            };
+            keyframes.push(keyframeRule);
+        }
+        else if (isMedia(node)) {
+            // Media query is composite in the case of nested media queries
+            const compositeMediaQuery = mediaQueryString ? mediaQueryString + MEDIA_QUERY_SEPARATOR + node.media : node.media;
+            _populateRules(node.rules, rulesets, keyframes, compositeMediaQuery);
+        }
+        else if (isRule(node)) {
+            const ruleset = fromAstNode(node);
+            ruleset.mediaQueryString = mediaQueryString;
+            rulesets.push(ruleset);
+        }
+    }
+}
 export function removeTaggedAdditionalCSS(tag) {
-    let changed = false;
+    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--;
-            changed = true;
+            selectorsChanged = true;
         }
     }
-    if (changed) {
+    for (let i = 0; i < applicationAdditionalKeyframes.length; i++) {
+        if (applicationAdditionalKeyframes[i].tag === tag) {
+            applicationAdditionalKeyframes.splice(i, 1);
+            i--;
+            keyframesChanged = true;
+        }
+    }
+    if (selectorsChanged) {
         mergeCssSelectors();
+        updated = true;
+    }
+    if (keyframesChanged) {
+        mergeCssKeyframes();
+        updated = true;
+    }
+    if (updated) {
+        applicationCssSelectorVersion++;
     }
-    return changed;
+    return updated;
 }
 export function addTaggedAdditionalCSS(cssText, tag) {
-    const parsed = CSSSource.fromDetect(cssText, applicationKeyframes, undefined).selectors;
+    const { selectors, keyframes } = CSSSource.fromDetect(cssText, undefined);
     const tagScope = currentScopeTag || (tag && tagToScopeTag.has(tag) && tagToScopeTag.get(tag)) || null;
     if (tagScope && tag) {
         tagToScopeTag.set(tag, tagScope);
     }
-    let changed = false;
-    if (parsed && parsed.length) {
-        changed = true;
+    let selectorsChanged = false;
+    let keyframesChanged = false;
+    let updated = false;
+    if (selectors && selectors.length) {
+        selectorsChanged = true;
         if (tag != null || tagScope != null) {
-            for (let i = 0; i < parsed.length; i++) {
-                parsed[i].tag = tag;
-                parsed[i].scopedTag = tagScope;
+            for (let i = 0, length = selectors.length; i < length; i++) {
+                selectors[i].tag = tag;
+                selectors[i].scopedTag = tagScope;
             }
         }
-        applicationAdditionalSelectors.push(...parsed);
+        applicationAdditionalSelectors.push(...selectors);
         mergeCssSelectors();
+        updated = true;
     }
-    return changed;
+    if (keyframes && keyframes.length) {
+        keyframesChanged = true;
+        if (tag != null || tagScope != null) {
+            for (let i = 0, length = keyframes.length; i < length; i++) {
+                keyframes[i].tag = tag;
+                keyframes[i].scopedTag = tagScope;
+            }
+        }
+        applicationAdditionalKeyframes.push(...keyframes);
+        mergeCssKeyframes();
+        updated = true;
+    }
+    if (updated) {
+        applicationCssSelectorVersion++;
+    }
+    return updated;
 }
 const onCssChanged = profile('"style-scope".onCssChanged', (args) => {
     if (args.cssText) {
-        const parsed = CSSSource.fromSource(args.cssText, applicationKeyframes, args.cssFile).selectors;
-        if (parsed) {
-            applicationAdditionalSelectors.push(...parsed);
+        const { selectors, keyframes } = CSSSource.fromSource(args.cssText, args.cssFile);
+        let updated = false;
+        if (selectors) {
+            applicationAdditionalSelectors.push(...selectors);
             mergeCssSelectors();
+            updated = true;
+        }
+        if (keyframes) {
+            applicationAdditionalKeyframes.push(...keyframes);
+            mergeCssKeyframes();
+            updated = true;
+        }
+        if (updated) {
+            applicationCssSelectorVersion++;
         }
     }
     else if (args.cssFile) {
@@ -328,16 +412,28 @@ function onLiveSync(args) {
 }
 const loadCss = profile(`"style-scope".loadCss`, (cssModule) => {
     if (!cssModule) {
-        return undefined;
+        return;
     }
     // safely remove "./" as global CSS should be resolved relative to app folder
     if (cssModule.startsWith('./')) {
-        cssModule = cssModule.substr(2);
+        cssModule = cssModule.substring(2);
     }
-    const result = CSSSource.fromURI(cssModule, applicationKeyframes).selectors;
-    if (result.length > 0) {
-        applicationSelectors = result;
+    const { selectors, keyframes } = CSSSource.fromURI(cssModule);
+    let updated = false;
+    // Check for existing application css selectors too in case the app is undergoing a live-sync
+    if (selectors.length > 0 || applicationCssSelectors.length > 0) {
+        applicationCssSelectors = selectors;
         mergeCssSelectors();
+        updated = true;
+    }
+    // Check for existing application css keyframes too in case the app is undergoing a live-sync
+    if (keyframes.length > 0 || applicationCssKeyframes.length > 0) {
+        applicationCssKeyframes = keyframes;
+        mergeCssKeyframes();
+        updated = true;
+    }
+    if (updated) {
+        applicationCssSelectorVersion++;
     }
 });
 global.NativeScriptGlobals.events.on('cssChanged', onCssChanged);
@@ -365,6 +461,7 @@ export class CssState {
     constructor(viewRef) {
         this.viewRef = viewRef;
         this._appliedPropertyValues = CssState.emptyPropertyBag;
+        this._dynamicUpdateListenerMap = new Map();
         this._onDynamicStateChangeHandler = () => this.updateDynamicState();
     }
     /**
@@ -405,7 +502,7 @@ export class CssState {
     updateMatch() {
         const view = this.viewRef.get();
         if (view && view._styleScope) {
-            this._match = view._styleScope.matchSelectors(view);
+            this._match = view._styleScope.matchSelectors(view) ?? CssState.emptyMatch;
             this._appliedSelectorsVersion = view._styleScope.getSelectorsVersion();
         }
         else {
@@ -420,12 +517,12 @@ export class CssState {
             return;
         }
         const matchingSelectors = this._match.selectors.filter((sel) => (sel.dynamic ? sel.match(view) : true));
-        if (!matchingSelectors || matchingSelectors.length === 0) {
-            // 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.
-            // return;
-        }
+        // 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);
@@ -435,7 +532,7 @@ export class CssState {
     playKeyframeAnimations(matchingSelectors) {
         const animations = [];
         matchingSelectors.forEach((selector) => {
-            const ruleAnimations = selector.ruleset[animationsSymbol];
+            const ruleAnimations = selector.ruleset?.[animationsSymbol];
             if (ruleAnimations) {
                 ensureKeyframeAnimationModule();
                 for (const animationInfo of ruleAnimations) {
@@ -569,9 +666,14 @@ export class CssState {
         const changeMap = this._match.changeMap;
         changeMap.forEach((changes, view) => {
             if (changes.attributes) {
-                changes.attributes.forEach((attribute) => {
-                    view.addEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
-                });
+                const attributes = changes.attributes;
+                const listener = (args) => {
+                    if (attributes.has(args.propertyName)) {
+                        this._onDynamicStateChangeHandler();
+                    }
+                };
+                this._dynamicUpdateListenerMap.set(view, listener);
+                view.addEventListener(Observable.propertyChangeEvent, listener);
             }
             if (changes.pseudoClasses) {
                 changes.pseudoClasses.forEach((pseudoClass) => {
@@ -587,10 +689,8 @@ export class CssState {
     }
     unsubscribeFromDynamicUpdates() {
         this._appliedChangeMap.forEach((changes, view) => {
-            if (changes.attributes) {
-                changes.attributes.forEach((attribute) => {
-                    view.removeEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
-                });
+            if (this._dynamicUpdateListenerMap.has(view)) {
+                view.removeEventListener(Observable.propertyChangeEvent, this._dynamicUpdateListenerMap.get(view));
             }
             if (changes.pseudoClasses) {
                 changes.pseudoClasses.forEach((pseudoClass) => {
@@ -602,6 +702,7 @@ export class CssState {
                 });
             }
         });
+        this._dynamicUpdateListenerMap.clear();
         this._appliedChangeMap = CssState.emptyChangeMap;
     }
     toString() {
@@ -642,10 +743,10 @@ export class StyleScope {
     constructor() {
         this._css = '';
         this._localCssSelectors = [];
+        this._localCssKeyframes = [];
         this._localCssSelectorVersion = 0;
         this._localCssSelectorsAppliedVersion = 0;
         this._applicationCssSelectorsAppliedVersion = 0;
-        this._keyframes = new Map();
         this._cssFiles = [];
     }
     get css() {
@@ -666,17 +767,19 @@ export class StyleScope {
         }
         this._cssFiles.push(cssFileName);
         currentScopeTag = cssFileName;
-        const cssSelectors = CSSSource.fromURI(cssFileName, this._keyframes);
+        const cssFile = CSSSource.fromURI(cssFileName);
         currentScopeTag = null;
-        this._css = cssSelectors.source;
-        this._localCssSelectors = cssSelectors.selectors;
+        this._css = cssFile.source;
+        this._localCssSelectors = cssFile.selectors;
+        this._localCssKeyframes = cssFile.keyframes;
         this._localCssSelectorVersion++;
         this.ensureSelectors();
     }
     setCss(cssString, cssFileName) {
         this._css = cssString;
-        const cssFile = CSSSource.fromSource(cssString, this._keyframes, cssFileName);
+        const cssFile = CSSSource.fromSource(cssString, cssFileName);
         this._localCssSelectors = cssFile.selectors;
+        this._localCssKeyframes = cssFile.keyframes;
         this._localCssSelectorVersion++;
         this.ensureSelectors();
     }
@@ -688,22 +791,23 @@ export class StyleScope {
             this._cssFiles.push(cssFileName);
             currentScopeTag = cssFileName;
         }
-        const parsedCssSelectors = cssString ? CSSSource.fromSource(cssString, this._keyframes, cssFileName) : CSSSource.fromURI(cssFileName, this._keyframes);
+        const cssFile = cssString ? CSSSource.fromSource(cssString, cssFileName) : CSSSource.fromURI(cssFileName);
         currentScopeTag = null;
-        this._css = this._css + parsedCssSelectors.source;
-        this._localCssSelectors.push(...parsedCssSelectors.selectors);
+        this._css = this._css + cssFile.source;
+        this._localCssSelectors.push(...cssFile.selectors);
+        this._localCssKeyframes.push(...cssFile.keyframes);
         this._localCssSelectorVersion++;
         this.ensureSelectors();
     }
     getKeyframeAnimationWithName(animationName) {
-        const cssKeyframes = this._keyframes[animationName];
-        if (!cssKeyframes) {
-            return;
+        if (!this._mergedCssKeyframes) {
+            return null;
         }
+        const keyframeRule = this.findKeyframeRule(animationName);
         ensureKeyframeAnimationModule();
         const animation = new keyframeAnimationModule.KeyframeAnimationInfo();
         ensureCssAnimationParserModule();
-        animation.keyframes = cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(cssKeyframes.keyframes);
+        animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
         return animation;
     }
     ensureSelectors() {
@@ -723,46 +827,61 @@ export class StyleScope {
     }
     _createSelectors() {
         const toMerge = [];
-        toMerge.push(applicationCssSelectors.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
+        const toMergeKeyframes = [];
+        toMerge.push(...mergedApplicationCssSelectors.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
+        toMergeKeyframes.push(...mergedApplicationCssKeyframes.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
         this._applicationCssSelectorsAppliedVersion = applicationCssSelectorVersion;
-        toMerge.push(this._localCssSelectors);
+        toMerge.push(...this._localCssSelectors);
+        toMergeKeyframes.push(...this._localCssKeyframes);
         this._localCssSelectorsAppliedVersion = this._localCssSelectorVersion;
-        for (const keyframe in applicationKeyframes) {
-            this._keyframes[keyframe] = applicationKeyframes[keyframe];
-        }
         if (toMerge.length > 0) {
-            this._mergedCssSelectors = toMerge.reduce((merged, next) => merged.concat(next || []), []);
-            this._applyKeyframesOnSelectors();
-            this._selectors = new SelectorsMap(this._mergedCssSelectors);
+            this._mergedCssSelectors = toMerge;
+            this._selectorScope = new StyleSheetSelectorScope(this._mergedCssSelectors);
         }
+        else {
+            this._mergedCssSelectors = null;
+            this._selectorScope = null;
+        }
+        this._mergedCssKeyframes = toMergeKeyframes.length > 0 ? toMergeKeyframes : null;
     }
     // HACK: This @profile decorator creates a circular dependency
     // HACK: because the function parameter type is evaluated with 'typeof'
     matchSelectors(view) {
+        let match;
         // should be (view: ViewBase): SelectorsMatch<ViewBase>
         this.ensureSelectors();
-        return this._selectors.query(view);
+        if (this._selectorScope) {
+            match = this._selectorScope.query(view);
+            // Make sure to re-apply keyframes to matching selectors as a media query keyframe might be applicable at this point
+            this._applyKeyframesToSelectors(match.selectors);
+        }
+        else {
+            match = null;
+        }
+        return match;
     }
     query(node) {
         this.ensureSelectors();
-        return this._selectors.query(node).selectors;
+        const match = this.matchSelectors(node);
+        return match ? match.selectors : [];
     }
     getSelectorsVersion() {
         // The counters can only go up. So we can return just appVersion + localVersion
         // The 100000 * appVersion is just for easier debugging
         return 100000 * this._applicationCssSelectorsAppliedVersion + this._localCssSelectorsAppliedVersion;
     }
-    _applyKeyframesOnSelectors() {
-        for (let i = this._mergedCssSelectors.length - 1; i >= 0; i--) {
-            const ruleset = this._mergedCssSelectors[i];
+    _applyKeyframesToSelectors(selectors) {
+        if (!selectors?.length) {
+            return;
+        }
+        for (let i = selectors.length - 1; i >= 0; i--) {
+            const ruleset = selectors[i].ruleset;
             const animations = ruleset[animationsSymbol];
-            if (animations !== undefined && animations.length) {
+            if (animations != null && animations.length) {
                 ensureCssAnimationParserModule();
                 for (const animation of animations) {
-                    const cssKeyframe = this._keyframes[animation.name];
-                    if (cssKeyframe !== undefined) {
-                        animation.keyframes = cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(cssKeyframe.keyframes);
-                    }
+                    const keyframeRule = this.findKeyframeRule(animation.name);
+                    animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
                 }
             }
         }
@@ -770,6 +889,31 @@ export class StyleScope {
     getAnimations(ruleset) {
         return ruleset[animationsSymbol];
     }
+    findKeyframeRule(animationName) {
+        if (!this._mergedCssKeyframes) {
+            return null;
+        }
+        // Cache media query results to avoid validations of other identical queries
+        let validatedMediaQueries;
+        // Iterate in reverse order as the last usable keyframe rule matters the most
+        for (let i = this._mergedCssKeyframes.length - 1; i >= 0; i--) {
+            const rule = this._mergedCssKeyframes[i];
+            if (rule.name !== animationName) {
+                continue;
+            }
+            if (!rule.mediaQueryString) {
+                return rule;
+            }
+            if (!validatedMediaQueries) {
+                validatedMediaQueries = [];
+            }
+            const isMatchingAllQueries = matchMediaQueryString(rule.mediaQueryString, validatedMediaQueries);
+            if (isMatchingAllQueries) {
+                return rule;
+            }
+        }
+        return null;
+    }
 }
 __decorate([
     profile,
@@ -807,7 +951,7 @@ export function resolveFileNameFromUrl(url, appDirectory, fileExists, importSour
     }
     if (!isAbsolutePath) {
         if (fileName[0] === '~' && fileName[1] !== '/' && fileName[1] !== '"') {
-            fileName = fileName.substr(1);
+            fileName = fileName.substring(1);
         }
         if (importSource) {
             const importFile = resolveFilePathFromImport(importSource, fileName);
@@ -836,7 +980,7 @@ function resolveFilePathFromImport(importSource, fileName) {
 }
 export const applyInlineStyle = profile(function applyInlineStyle(view, styleStr) {
     const localStyle = `local { ${styleStr} }`;
-    const inlineRuleSet = CSSSource.fromSource(localStyle, new Map()).selectors;
+    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
@@ -876,7 +1020,13 @@ function isCurrentDirectory(uriPart) {
 function isParentDirectory(uriPart) {
     return uriPart === '..';
 }
+function isMedia(node) {
+    return node.type === 'media';
+}
 function isKeyframe(node) {
     return node.type === 'keyframes';
 }
+function isRule(node) {
+    return node.type === 'rule';
+}
 //# sourceMappingURL=style-scope.js.map