prefer-variant-directive

This rule reports a condition in a rule of your stylesheet, such as an @media query, that a variant of your theme expresses with the same meaning. The named variant keeps the stylesheet in sync when the theme changes the breakpoint. The stylistic preset enables this rule.

Reported

.card {
  @media (width >= 48rem) {prefer-variant-directive: `@media (width >= 48rem)` applies the same condition as variant `md`; write `@variant md`
    display: flex;
  }
}

Fixed

.card {
  @variant md {
    display: flex;
  }
}

How to fix

Replace the condition with @variant and the name of the variant, as in the example. The automatic fix applies it.

Options

pxToRem treats px and rem in media queries as equal at 16px per rem. With it, @media (width >= 768px) also matches md.

Rule settings