csstype

csstype copied to clipboard

Would be very useful for libraries that accept media query features.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

I concider these features to be handled by vendors the way they like it. The problem is that there's endless different combinations of @media and there's no way to type properties after a specific pattern that I know of. Same thing as for CSS Custom Properties and @supports. But if you anyone have any suggestions I would appreciate if you shared them.

The way I figured I could type my own media query utility function is like this:

interface MaxWidthQuery {
  maxWidth: number | string;
}
interface MinWidthQuery {
  minWidth: number | string;
}
interface OrientationQuery {
  orientation: 'portrait' | 'landscape';
}
interface ScreenQuery {
  screen: boolean;
}
interface HoverQuery {
  hover: 'none' | 'hover';
}

type MediaQuery =
  | MaxWidthQuery
  | MinWidthQuery
  | HoverQuery
  | OrientationQuery
  | ScreenQuery;

function json2mq(query: MediaQuery) { ... }

json2mq({ orientation: 'landscape', screen: true })

Etc, but it's not really worth maintaining that list if it's only for a single project.

The whole purpose of CSSType is to autogenerate types from other sources (with a small exception of SVG CSS properties 😉). The only source I could find of CSS media queries was this and the only thing it contains is client support of all features so it wouldn't be enough. If you can find another source containing enough data to autogenerate this it would be more interesting.

Hi ✌️
I'm newbie here, sorry if I'm commenting in the wrong place!

I found a source that I believe is ideal for this case! Webref specifically @webref/css.

I found the content in this file.

Interesting, that looks useful for sure. Thanks 👍