Skip to content

perf(core): Cache media query arrays in the ruleset #11309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 1 commit into from
Jul 18, 2026
+39 −28
Merged

perf(core): Cache media query arrays in the ruleset #11309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/core/ui/animation/keyframe-animation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface Keyframes {
keyframes: Array<UnparsedKeyframe>;
tag?: string | number;
scopedTag?: string;
mediaQueryString?: string;
mediaQueryString?: string | string[];
}

export class UnparsedKeyframe {
Expand Down
46 changes: 23 additions & 23 deletions packages/core/ui/styling/css-selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { isNullOrUndefined } from '../../utils/types';
import * as ReworkCSS from '../../css';
import { checkIfMediaQueryMatches } from '../../media-query-list';

export const MEDIA_QUERY_SEPARATOR = '&&';

/**
* An interface describing the shape of a type on which the selectors may apply.
* Note, the ui/core/view.View implements Node.
Expand Down Expand Up @@ -830,7 +828,7 @@ export namespace Selector {
export class RuleSet {
public selectors: SelectorCore[];
public declarations: Declaration[];
public mediaQueryString: string;
public mediaQueryString: string | string[];
public tag?: string | number;
public scopedTag?: string;

Expand Down Expand Up @@ -997,26 +995,28 @@ function isDeclaration(node: ReworkCSS.Node): node is ReworkCSS.Declaration {
return node.type === 'declaration';
}

// Media query strings come from parsed stylesheets, so the distinct set is small
// and stable. Cache the split results as splitting happens on every style query.
const splitMediaQueryCache = new Map<string, string[]>();

function splitMediaQueryString(mediaQueryString: string): string[] {
let mediaQueryStrings = splitMediaQueryCache.get(mediaQueryString);
if (!mediaQueryStrings) {
mediaQueryStrings = mediaQueryString.split(MEDIA_QUERY_SEPARATOR);
splitMediaQueryCache.set(mediaQueryString, mediaQueryStrings);
export function matchMediaQueryString(mediaQueryString: string | string[], cachedQueries: string[]): boolean {
if (!mediaQueryString) {
return false;
}

return mediaQueryStrings;
}
if (typeof mediaQueryString === 'string') {
// Query has already been validated
if (cachedQueries.includes(mediaQueryString)) {
return true;
}

const result = checkIfMediaQueryMatches(mediaQueryString);
if (result) {
cachedQueries.push(mediaQueryString);
return result;
}

export function matchMediaQueryString(mediaQueryString: string, cachedQueries: string[]): boolean {
// It can be a single or multiple queries in case of nested media queries
const mediaQueryStrings = splitMediaQueryString(mediaQueryString);
return false;
}

for (let i = 0, length = mediaQueryStrings.length; i < length; i++) {
const mq = mediaQueryStrings[i];
for (let i = 0, length = mediaQueryString.length; i < length; i++) {
const mq = mediaQueryString[i];

// Query has already been validated
if (cachedQueries.includes(mq)) {
Expand Down Expand Up @@ -1097,15 +1097,15 @@ export abstract class SelectorScope<T extends Node> implements LookupSorter {
}

export class MediaQuerySelectorScope<T extends Node> extends SelectorScope<T> {
private _mediaQueryString: string;
private _mediaQueryString: string | string[];

constructor(mediaQueryString: string) {
constructor(mediaQueryString: string | string[]) {
super();

this._mediaQueryString = mediaQueryString;
}

get mediaQueryString(): string {
get mediaQueryString(): string | string[] {
return this._mediaQueryString;
}
}
Expand All @@ -1119,7 +1119,7 @@ export class StyleSheetSelectorScope<T extends Node> extends SelectorScope<T> {
this.lookupRulesets(rulesets);
}

private createMediaQuerySelectorScope(mediaQueryString: string): MediaQuerySelectorScope<T> {
private createMediaQuerySelectorScope(mediaQueryString: string | string[]): MediaQuerySelectorScope<T> {
const selectorScope = new MediaQuerySelectorScope(mediaQueryString);
selectorScope.position = this.position;

Expand Down
19 changes: 15 additions & 4 deletions packages/core/ui/styling/style-scope.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { _evaluateCssVariableExpression, _evaluateCssCalcExpression, isCssVariab
import { unsetValue } from '../core/properties/property-shared';
import * as ReworkCSS from '../../css';

import { RuleSet, StyleSheetSelectorScope, SelectorCore, SelectorsMatch, ChangeMap, fromAstNode, Node, MEDIA_QUERY_SEPARATOR, matchMediaQueryString } from './css-selector';
import { RuleSet, StyleSheetSelectorScope, SelectorCore, SelectorsMatch, ChangeMap, fromAstNode, Node, matchMediaQueryString } from './css-selector';
import { Trace } from './styling-shared';
import { File, knownFolders, path } from '../../file-system';
import { Application, CssChangedEventData, LoadAppCSSEventData } from '../../application';
Expand Down Expand Up @@ -317,7 +317,7 @@ function populateRulesFromImports(nodes: ReworkCSS.Node[], rulesets: RuleSet[],
}
}

export function _populateRules(nodes: ReworkCSS.Node[], rulesets: RuleSet[], keyframes: Keyframes[], mediaQueryString?: string): void {
export function _populateRules(nodes: ReworkCSS.Node[], rulesets: RuleSet[], keyframes: Keyframes[], mediaQueryString?: string | string[]): void {
for (const node of nodes) {
if (isKeyframe(node)) {
const keyframeRule: Keyframes = {
Expand All @@ -328,8 +328,19 @@ export function _populateRules(nodes: ReworkCSS.Node[], rulesets: RuleSet[], key

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;
// Media query can be an array of strings in case of nested queries
let compositeMediaQuery: string | string[];

if (mediaQueryString) {
if (typeof mediaQueryString === 'string') {
compositeMediaQuery = [mediaQueryString, node.media];
} else {
mediaQueryString.push(node.media);
compositeMediaQuery = mediaQueryString;
}
} else {
compositeMediaQuery = node.media;
}

_populateRules(node.rules, rulesets, keyframes, compositeMediaQuery);
} else if (isRule(node)) {
Expand Down
Loading