Replace all variables

[ooflorent]

Allow multiple substitutions by @media definitions.

@media (--xs), (--sm) {
  body {
    font-size: 20px;
  }
}

[necolas]

Is that part of the draft spec?

[ooflorent]

Well, it seems...

I think we need a real CSS expert to answer that.
I have read the specs multiple times and I'm unable to find a valid answer.

EDIT: Since the <custom-media> is basically a <media-query-list> and <media> too, I think it should be correct.

[MoOx]

I am sure it is.
Imagine if we can not do the following @media print, (--viewport-whatever).
Maybe @tabatkins can confirm ?

[ooflorent]

You can specify multiple <media-condition> but the spec does not clearly answer if an <expression-name> can be used in a <media-query>.

[tabatkins]

What's unclear? The spec says that an <extension-name> can be used as a media feature in a boolean context, and its true/false status is well-defined. It's not a direct textual substitution; you're literally defining a new media feature, which happens to be defined by reference to a <media-query-list>.

[chikamichi]

👍 This would make it easier to handle composition of stacking constraints (width + orientation + types…)

[marioestrada]

Any reason why this hasn't been merged? This limits the functionality of this plugin and adds more burden to developers having to create new custom media queries to workaround this limitation.

[MoOx]

Maybe you should check https://github.com/postcss/postcss-custom-media ;)

[marioestrada]

@MoOx I did! But it's not that simple to move one huge project to postcss

[marioestrada]

@MoOx ok we finally migrated to postcss :)

[ooflorent]

Nevermind. We moved to postcss.