Function parseQuery

packages/core/css-mediaquery/index.ts:121–176

(mediaQuery: string)

}

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;
	});
}