@csstools/media-query-list-parser
TypeScript icon, indicating that this package has built-in type declarations

4.0.3 • Public • Published

Media Query List Parser for CSS

npm version Build Status Discord

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
4.0.31,217,466latest

Version History

VersionDownloads (Last 7 Days)Published
4.0.31,217,466
4.0.21,231,532
4.0.17,184
4.0.012,610
3.0.1598,451
3.0.08,990
2.1.13981,393
2.1.1216,018
2.1.11155,301
2.1.10101
2.1.9140,358
2.1.8100,474
2.1.7210,948
2.1.614,829
2.1.5148,961
2.1.467,300
2.1.314,908
2.1.248,257
2.1.114,131
2.1.013,866
2.0.436,441
2.0.340
2.0.27,566
2.0.149,257
2.0.01,455
1.0.02,515

Package Sidebar

Install

npm i @csstools/media-query-list-parser

Weekly Downloads

5,100,352

Version

4.0.3

License

MIT

Unpacked Size

113 kB

Total Files

7

Last publish

Collaborators

  • jonathantneal
  • alaguna
  • romainmenke