Variable stypRenderAtRulesConst

CSS stylesheet renderer of at-rules like @media queries.

At-rules are represented by qualifiers which names start with @ symbol. Qualifier names are used as at-rules keys, and their values - as queries. If the rest of the selector is not empty, then properties are rendered in CSS rule nested inside at-rule. Otherwise the properties are rendered in at-rule.

So, for example CSS rule with { c: 'screen-only', $: '@media=screen' } selector would be rendered as

@media screen {
  .screen-only {
     /* CSS properties */
  }
}
Copy

Another option is to use named at-rules qualifiers. When named qualifier is used, the corresponding property is searched in CSS rule and all of its outer rules. The values of all matching properties are used as queries.

So the above example could be written as: { c: 'screen-only', $: '@media:screen' } if CSS rule (or its outer one) contains property @media:screen with value screen.

Enabled by default in produceStyle function.