Require runtime evaluation?

[eeeps]

In a lot of cases, container queries are a developer-convinence feature.

In other words — you could write Media Queries; there's a deterministic relationship between viewport size and component state — but Container Queries would be much more compact, DRY, understandable, explainable, & maintainable.

I sort of hesitate to suggest it, but if the inherent layout performance penalties involved in evaluating CQs are too heavy at runtime, perhaps they could be better implemented in-front of some kind of pre-processing tool? Which would convert all of your tidy CQs into MQ spaghetti, for deployment.

[tabatkins]

Doing so requires you feeding layout information to the system in some way.

[eeeps]

And I guess while the system has access to your CSS, it doesn't have access to the browsing environment (e.g., user styles). Hm.

Note that this is also true for most of the media-queries-for-components that people are writing everywhere all of the time right now. But the "system" there is the media query author, who's assuming things.

[ausi]

I thought of that in the past and I think it’s possible to write a PostCSS plugin that can achieve that, but the features would be way less powerful than what the JS runtimes offer.

I just posted a draft of how I think this could work: https://gist.github.com/ausi/6f74afbd75127151addfe75f81cfe5da