Support for height media queries

[Simon-Tang]

🚀 Feature Proposal

I think it would be useful for xstyled to provide styling utils based on viewport height, as it does with viewport width.

Motivation

• Users would benefit from having this out of the box with xstyled, instead writing media queries + maybe even Window.matchMedia()
• Users would be able to write the same code to handle both viewport width and height

Example

To be honest, I'm not sure how the API would handle both width and height rules at the same time.

// Viewport width
<x.div minWidth={{ xs: 1, md: 1 / 2 }} />

// Viewport height
<x.div minWidth={{ hxs: 1, hmd: 1 / 2 }} />

// Width and height rules at the same time
???

Pitch

[quantizor]

Height-based responsive styling is a reasonable ask. The main blocker is the API design: I'd want to know how width and height combine on the same prop without making the breakpoint object ambiguous, and how the theme would express two parallel breakpoint scales without doubling the surface area of every responsive utility.

If you (or anyone) want to sketch a concrete proposal, that would be a great starting point. Some questions worth answering up front:

• Do height breakpoints share keys with width (xs/sm/md/...) or have their own namespace (hxs/...)?
• How is a combined width+height query expressed in a single prop value?
• Does the theme grow a parallel heightBreakpoints map, or is it a single map of MediaQuery objects?