Report media query features

[bartveneman]

The 2022 Web Almanac made an excellent point about media feature usage. See https://almanac.httparchive.org/en/2022/css#responsive-design List out all features, like screen, min-width, prefers-reduced-motion

[romainmenke]

A media query parser that might help with this : https://github.com/csstools/postcss-plugins/tree/main/packages/media-query-list-parser

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

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

mediaQueryList.forEach((mediaQuery) => {
    mediaQuery.walk((entry, index) => {
        // Type of `node`
        if (isMediaFeature(entry.node)){
            console.log(entry.node.getName());
        }
    });
});

Also interesting to assign a complexity score to media queries :

• how many queries in a list?
• how many features in a query?
• how many or, and lists in a query?
• negation with not?

---

edit : but I now see that css-tree is used. So it will likely make more sense to wait until they improve their support for newer media query features.

[bartveneman]

Thanks for chiming in! Adding another dependency is indeed not high on my list for a feature like this, so I'll see if/when CSSTree can give me a similar setup.

Also interesting to assign a complexity score to media queries :

Definitely! You're already familiar with my thoughts on CSS Complexity?

CSSTools is coming along nicely (I've been keeping an eye, mostly via Twitter), didn't realise the parser etc. were in the postcss-plugins repo. Starred and making sure I'm not missing updates 😉