prefer-direct-styling

This rule reports a selector variant that styles another element from the current one, such as [&_button]: on a parent. The styles of the button then live in the parent, so reading the button does not show them. The stylistic preset enables this rule.

Reported

const toolbar = style("flex gap-2 [&_button]:p-4");prefer-direct-styling: variant selector `& button` styles another element. Attach these styles directly to that element

Fixed

const toolbar = style("flex gap-2");
const button = style("p-4");

How to fix

• Give the styles to the element itself with its own style() call, as in the example.
• If the element comes from markup that you cannot change, such as rendered Markdown, keep the selector and add a suppression comment with the reason.

Rule settings