[css-nesting?] Allow nesting `@media` inside `@font-face`

[valtlai]

Spec: https://drafts.csswg.org/css-nesting/#conditionals (?)

Could we allow nesting @media at-rules inside @font-face?

My use case would be conditionally loading a hinted or unhinted font:

@font-face {
  font-family: 'The Font';
  src: url(the-font-hinted.woff2);

  @media (resolution >= 2x) {
    src: url(the-font-unhinted.woff2);
  }
}

Without nesting support (or if() support, see #11941), we have to needlessly repeat the unchanged descriptors:

@media (resolution < 2x) {
  @font-face {
    font-family: 'The Font';
    src: url(the-font-hinted.woff2);
  }
}

@media (resolution >= 2x) {
  @font-face {
    font-family: 'The Font';
    src: url(the-font-unhinted.woff2);
  }
}

This isn’t DRY and is annoying when there are a lot of @font-face rules.

[AtkinsSJ]

If I understand it correctly, you would be able to do this using if():

@font-face {
  font-family: 'The Font';
  src: if(
    media(resolution >= 2x) : url(the-font-hinted.woff2);
    else : url(the-font-unhinted.woff2)
  );
}

[valtlai]

I was just going to open an issue about this. Is if() already allowed in at-rule descriptors?

Edit: Opened #11941. Feel free to close if already specced.

[tabatkins]

I'm gonna go ahead and close this in favor of of #11941, yeah. (It can always be reopened if needed.)