Allow custom media queries to be used in @container rules

[gabrielgrant]

Container queries have a syntax nearly identical to media queries, and can replace them in many cases, while adding extra functionality. But as of right now, the custom-media plugin doesn't allow using the defined media queries in @container rules.

This PR adds causes the plugin to process @container at-rules in the same way @media at-rules are handled

FWIW, container queries are now natively supported in Blink and WebKit, and supported via polyfill in Gecko/Firefox

[Antonio-Laguna]

@gabrielgrant thanks for this PR. However we won't be integrating this within postcss-custom-media.

The reason is that that's not part of any spec and it hasn't even been drafted. For whatever is worth, none of the proposals related to custom-media or anything in that line is getting any traction with browsers nor CSSWG so we're hesitant to add tooling without, at least, a draft spec.

This is the closest to what you're suggesting but it didn't get picked either (for now) w3c/csswg-drafts#7622

[gabrielgrant]

@Antonio-Laguna thanks for taking a look. from the discussion in w3c/csswg-drafts#6698 it sounds like the plan is for the functionality of env() to be pretty much a superset of the functionality of custom media (and so seems likely that will move forward instead). Would it make sense to mention that on the custom-css README that using the env function plugin may be a better choice? (I certainly would have appreciated a nudge in that direction)

[romainmenke]

Hi @gabrielgrant, there is no plan to use env() for this afaik.
Author defined values with env() is also pretty much dead. It is so unlikely to move forward that we are even removing it from postcss-preset-env in the upcoming major version.

The complexity here is that browsers do not treat these things as strings. For a browser these are two completely different things. So a catch-all API that allows you to inject full media queries in @media but also full containers queries in @container is very unlikely.

I think it might even be best to open a new issue at csswg-drafts, asking them to include custom container queries in the specification.

The issues linked here are unlikely to move forward but something like @custom-container might gain more traction.

[romainmenke]

Side note :

We are extra careful with additions and new plugins and try to align them very closely to native browser behavior.

But you should not feel limited by this.
You are absolutely free to take the code for @custom-media and make it work for @container in any way or form you like :)
It can be a totally valid productivity plugin, even without a specification.

[romainmenke]

@gabrielgrant I've opened an issue requesting for a specification update for custom container queries : w3c/csswg-drafts#8121

Initial feedback is not negative :)

I am closing this pull request only because we can not add to the plugin @custom-media. They are unrelated features even if both are types of queries.

If there is a little bit more progress on this in the CSSWG we obviously want to have a mirror plugin like the one for @custom-media but specific to @custom-container.

[gabrielgrant]

@romainmenke thanks so much for the follow-up!