@csstools/media-query-list-parser

Media Query List Parser

Implemented from : https://www.w3.org/TR/mediaqueries-5/

Usage

Add Media Query List Parser to your project:

npm install @csstools/media-query-list-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev

Media Query List Parser depends on our CSS tokenizer and parser algorithms. It must be used together with @csstools/css-tokenizer and @csstools/css-parser-algorithms.

import { parse } from '@csstools/media-query-list-parser';

export function parseCustomMedia() {
	const mediaQueryList = parse('screen and (min-width: 300px), (50px < height < 30vw)');

	mediaQueryList.forEach((mediaQuery) => {
		mediaQuery.walk((entry, index) => {
			// Index of the current Node in `parent`.
			console.log(index);
			// Type of `parent`.
			console.log(entry.parent.type);

			// Type of `node`
			{
				// Sometimes nodes can be arrays.
				if (Array.isArray(entry.node)) {
					entry.node.forEach((item) => {
						console.log(item.type);
					});
				}

				if ('type' in entry.node) {
					console.log(entry.node.type);
				}
			}

			// stringified version of the current node.
			console.log(entry.node.toString());

			// Return `false` to stop the walker.
			return false;
		});
	});
}

Similar packages

Other packages similar to @csstools/media-query-list-parser

postcss-media-query-parser

postcss-media-query-parser is a PostCSS plugin that parses media queries in CSS. It provides similar functionality to @csstools/media-query-list-parser but is designed to work within the PostCSS ecosystem, making it a good choice if you are already using PostCSS for other CSS transformations.

css-mediaquery

css-mediaquery is a utility for parsing and matching CSS media queries. It offers similar parsing capabilities but also includes features for evaluating media queries against a given set of conditions, which can be useful for server-side rendering or testing environments.