Function matchQuery

packages/core/css-mediaquery/index.ts:50–119

(mediaQuery: string, values: MediaQueryEnvironmentParams)

}

export function matchQuery(mediaQuery: string, values: MediaQueryEnvironmentParams): boolean {
	const expressions = parseQuery(mediaQuery);

	return expressions.some((query) => {
		const { type, inverse, features } = query;

		// Either the parsed or specified `type` is "all", or the types must be
		// equal for a match.
		const typeMatch = query.type === 'all' || values.type === query.type;

		// Quit early when `type` doesn't match, but take "not" into account
		if ((typeMatch && inverse) || !(typeMatch || inverse)) {
			return false;
		}

		const expressionsMatch = features.every((feature) => {
			const value: any = values[feature.property];

			// Missing or falsy values don't match
			if (!value && value !== 0) {
				return false;
			}

			switch (feature.property) {
				case 'orientation':
				case 'prefers-color-scheme':
					if (typeof value !== 'string') {
						return false;
					}

					return value.toLowerCase() === feature.value.toLowerCase();
				default: {
					// Numeric properties
					let numVal: number;

					if (typeof value !== 'number') {
						Trace.write(`Unknown CSS media query feature property: '${feature.property}' on '${query}'`, Trace.categories.MediaQuery, Trace.messageType.warn);
						return false;
					}

					switch (feature.property) {
						case 'width':
						case 'height':
						case 'device-width':
						case 'device-height': {
							numVal = Length.toDevicePixels(Length.parse(feature.value), 0);
							break;
						}
						default:
							Trace.write(`Unknown CSS media query feature property: '${feature.property}' on '${query}'`, Trace.categories.MediaQuery, Trace.messageType.warn);
							break;
					}

					switch (feature.modifier) {
						case 'min':
							return value >= numVal;
						case 'max':
							return value <= numVal;