1. @csstools/media-query-list-parser
Parse CSS media query lists.
@csstools/media-query-list-parser
Package: @csstools/media-query-list-parser
Created by: csstools
Last modified: Wed, 13 Mar 2024 18:48:12 GMT
Version: 2.1.9
License: MIT
Downloads: 12,551,843
Repository: https://github.com/csstools/postcss-plugins

Install

npm install @csstools/media-query-list-parser
yarn add @csstools/media-query-list-parser

Media Query List Parser

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

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code