NativeScript
diff --git a/‎packages/core/css-mediaquery/index.spec.ts‎
Lines changed: 8 additions & 110 deletions b/‎packages/core/css-mediaquery/index.spec.ts‎
Lines changed: 8 additions & 110 deletions
diff --git a/‎packages/core/css-mediaquery/index.ts‎
Lines changed: 24 additions & 172 deletions b/‎packages/core/css-mediaquery/index.ts‎
Lines changed: 24 additions & 172 deletions
diff --git a/‎packages/core/css-mediaquery/LICENSE‎ ‎…kages/core/css-mediaquery/parser/LICENSE‎packages/core/css-mediaquery/LICENSE renamed to packages/core/css-mediaquery/parser/LICENSE b/‎packages/core/css-mediaquery/LICENSE‎ ‎…kages/core/css-mediaquery/parser/LICENSE‎packages/core/css-mediaquery/LICENSE renamed to packages/core/css-mediaquery/parser/LICENSE
@@ -1,118 +1,16 @@
-import { MediaQueryType, matchQuery, parseQuery } from '.';
+import { checkIfMediaQueryMatches } from '.';
+import { Screen } from '../platform';
 
 describe('css-mediaquery', () => {
-	describe('parseQuery', () => {
-		it('should parse media queries without expressions', () => {
-			expect(parseQuery('screen')).toEqual([
-				{
-					inverse: false,
-					type: MediaQueryType.screen,
-					features: [],
-				},
-			]);
+	const { widthDIPs } = Screen.mainScreen;
 
-			expect(parseQuery('not screen')).toEqual([
-				{
-					inverse: true,
-					type: MediaQueryType.screen,
-					features: [],
-				},
-			]);
+	describe('checkIfMediaQueryMatches', () => {
+		it('should return true for a correct match', () => {
+			expect(checkIfMediaQueryMatches(`only screen and (max-width: ${widthDIPs})`)).toBe(true);
 		});
 
-		it('should throw a SyntaxError when a media query is invalid', () => {
-			expect(() => parseQuery('some crap')).toThrow(SyntaxError);
-			expect(() => parseQuery('48em')).toThrow(SyntaxError);
-			expect(() => parseQuery('screen and crap')).toThrow(SyntaxError);
-			expect(() => parseQuery('screen and (48em)')).toThrow(SyntaxError);
-			expect(() => parseQuery('screen and (foo:)')).toThrow(SyntaxError);
-			expect(() => parseQuery('()')).toThrow(SyntaxError);
-			expect(() => parseQuery('(foo) (bar)')).toThrow(SyntaxError);
-			expect(() => parseQuery('(foo:) and (bar)')).toThrow(SyntaxError);
-		});
-	});
-
-	describe('matchQuery', () => {
-		describe('Equality check', () => {
-			it('orientation: should return true for a correct match (===)', () => {
-				expect(matchQuery('(orientation: portrait)', { orientation: 'portrait' })).toBe(true);
-			});
-
-			it('orientation: should return false for an incorrect match (===)', () => {
-				expect(matchQuery('(orientation: landscape)', { orientation: 'portrait' })).toBe(false);
-			});
-
-			it('prefers-color-scheme: should return true for a correct match (===)', () => {
-				expect(matchQuery('(prefers-color-scheme: dark)', { 'prefers-color-scheme': 'dark' })).toBe(true);
-			});
-
-			it('prefers-color-scheme: should return false for an incorrect match (===)', () => {
-				expect(matchQuery('(prefers-color-scheme: light)', { 'prefers-color-scheme': 'dark' })).toBe(false);
-			});
-
-			it('width: should return true for a correct match', () => {
-				expect(matchQuery('(width: 800px)', { width: 800 })).toBe(true);
-			});
-
-			it('width: should return false for an incorrect match', () => {
-				expect(matchQuery('(width: 800px)', { width: 900 })).toBe(false);
-			});
-		});
-
-		describe('Type', () => {
-			it('should return true for a correct match', () => {
-				expect(matchQuery('screen', { type: MediaQueryType.screen })).toBe(true);
-			});
-
-			it('should return false for an incorrect match', () => {
-				expect(
-					matchQuery('screen and (orientation: portrait)', {
-						type: MediaQueryType.print,
-						orientation: 'portrait',
-					}),
-				).toBe(false);
-			});
-
-			it('should return false for a media query without a type when type is specified in the value object', () => {
-				expect(matchQuery('(min-width: 500px)', { type: MediaQueryType.screen })).toBe(false);
-			});
-
-			it('should return true for a media query without a type when type is not specified in the value object', () => {
-				expect(matchQuery('(min-width: 500px)', { width: 700 })).toBe(true);
-			});
-		});
-
-		describe('Not', () => {
-			it('should return false when theres a match on a `not` query', () => {
-				expect(
-					matchQuery('not screen and (orientation: portrait)', {
-						type: MediaQueryType.screen,
-						orientation: 'landscape',
-					}),
-				).toBe(false);
-			});
-
-			it('should not disrupt an OR query', () => {
-				expect(
-					matchQuery('not screen and (color), screen and (min-height: 48em)', {
-						type: MediaQueryType.screen,
-						height: 1000,
-					}),
-				).toBe(true);
-			});
-
-			it('should return false for when type === all', () => {
-				expect(
-					matchQuery('not all and (min-width: 48em)', {
-						type: MediaQueryType.all,
-						width: 1000,
-					}),
-				).toBe(false);
-			});
-
-			it('should return true for inverted value', () => {
-				expect(matchQuery('not screen and (min-width: 48px)', { width: 24 })).toBe(true);
-			});
+		it('should return false for an incorrect match', () => {
+			expect(checkIfMediaQueryMatches(`only screen and (max-width: ${widthDIPs - 1})`)).toBe(false);
 		});
 	});
 });
@@ -1,176 +1,28 @@
-/*
-Copyright (c) 2014, Yahoo! Inc. All rights reserved.
-Copyrights licensed under the New BSD License.
-See the accompanying LICENSE file for terms.
-*/
-
-// https://github.com/ericf/css-mediaquery
-
+import { getApplicationProperties } from '../application/helpers-common';
+import { Screen } from '../platform';
 import { Trace } from '../trace';
-import { Length } from '../ui/styling/length-shared';
-
-// -----------------------------------------------------------------------------
-
-const RE_MEDIA_QUERY = /^(?:(only|not)?\s*([_a-z][_a-z0-9-]*)|(\([^\)]+\)))(?:\s*and\s*(.*))?$/i,
-	RE_MQ_EXPRESSION = /^\(\s*([_a-z-][_a-z0-9-]*)\s*(?:\:\s*([^\)]+))?\s*\)$/,
-	RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/,
-	RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?\s*$/,
-	RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?\s*$/;
-
-export enum MediaQueryType {
-	all = 'all',
-	print = 'print',
-	screen = 'screen',
-}
-
-export type MediaQueryProperties = 'width' | 'height' | 'device-width' | 'device-height' | 'orientation' | 'prefers-color-scheme';
-
-export interface MediaQueryEnvironmentParams {
-	type?: MediaQueryType;
-	width?: number;
-	height?: number;
-	'device-width'?: number;
-	'device-height'?: number;
-	orientation?: string;
-	'prefers-color-scheme'?: string;
-}
-
-export interface MediaQueryExpression {
-	inverse: boolean;
-	type: MediaQueryType;
-	features: MediaQueryFeature[];
-}
-
-export interface MediaQueryFeature {
-	modifier: string;
-	property: MediaQueryProperties | string;
-	value: string;
-}
-
-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;
-						default:
-							return value === numVal;
-					}
-
-					break;
-				}
-			}
+import { matchQuery, MediaQueryType } from './parser';
+
+export function checkIfMediaQueryMatches(mediaQueryString: string): boolean {
+	const { widthPixels, heightPixels } = Screen.mainScreen;
+
+	let matches: boolean;
+
+	try {
+		const appProperties = getApplicationProperties();
+		matches = matchQuery(mediaQueryString, {
+			type: MediaQueryType.screen,
+			width: widthPixels,
+			height: heightPixels,
+			'device-width': widthPixels,
+			'device-height': heightPixels,
+			orientation: appProperties.orientation,
+			'prefers-color-scheme': appProperties.systemAppearance,
 		});
+	} catch (err) {
+		matches = false;
+		Trace.write(err, Trace.categories.MediaQuery, Trace.messageType.error);
+	}
 
-		return (expressionsMatch && !inverse) || (!expressionsMatch && inverse);
-	});
-}
-
-export function parseQuery(mediaQuery: string): MediaQueryExpression[] {
-	const mediaQueryStrings = mediaQuery.split(',');
-
-	return mediaQueryStrings.map((query) => {
-		query = query.trim();
-
-		const captures = query.match(RE_MEDIA_QUERY);
-
-		// Media query must be valid
-		if (!captures) {
-			throw new SyntaxError(`Invalid CSS media query: '${query}'`);
-		}
-
-		const modifier = captures[1];
-		const type = captures[2];
-		const featureString = ((captures[3] || '') + (captures[4] || '')).trim();
-
-		const expression: MediaQueryExpression = {
-			inverse: !!modifier && modifier.toLowerCase() === 'not',
-			type: MediaQueryType[type ? type.toLowerCase() : 'all'] ?? 'all',
-			features: [],
-		};
-
-		// Check for media query features
-		if (!featureString) {
-			return expression;
-		}
-
-		// Split features string into a list
-		const features = featureString.match(/\([^\)]+\)/g);
-
-		// Media query must be valid
-		if (!features) {
-			throw new SyntaxError(`Invalid CSS media query features: '${featureString}' on '${query}'`);
-		}
-
-		for (const feature of features) {
-			const captures = feature.match(RE_MQ_EXPRESSION);
-
-			// Media query must be valid
-			if (!captures) {
-				throw new SyntaxError(`Invalid CSS media query feature: '${feature}' on '${query}'`);
-			}
-
-			const featureData = captures[1].toLowerCase().match(RE_MQ_FEATURE);
-
-			expression.features.push({
-				modifier: featureData[1],
-				property: featureData[2],
-				value: captures[2],
-			});
-		}
-
-		return expression;
-	});
+	return matches;
 }