CSS Values lvl 5, standard if() syntax

[kanashimia]

What would you want to propose?

Spec: https://drafts.csswg.org/css-values-5/#if-notation
This is the draft for a standard conditional selector.
There is a plugin that does similar thing called postcss-conditional-values, it could either be modified to support new experimental syntax, or a new plugin could be made partly based on it.
Would be nice to have a polyfill for this in the future with the standard syntax.

Suggested solution

Spec allows media queries, and overall it is differs from postcss-conditional-values in a number of ways, so a new plugin is probably better.

Spec allows stuff like this:

.valid-if {
  --if-clause: media(width >= 600px): blue;
  color: if(...var(--if-clause); else: green;);
}

I don't think is something that can be polyfilled

Additional context

Overall this is more of a different syntax for queries, and doesn't replace postcss-conditional-values.

This request is related to #134 for some part.

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

Style queries or anything querying the actual element itself can also not be polyfilled.

.bar {
  color: green;
}

@container style(--foo: 1) {
  .bar {
    color: red;
  }
}

Is not the same as:

.bar {
  color: if(style(--foo: 1): red; else: green);
}

The first queries a container of .bar, the second queries .bar itself.