invalid-marker-use

This rule reports a marker class, such as group or peer, with a variant or the ! modifier. A marker only names an element for other selectors and has no CSS of its own, so a variant cannot turn it on or off.

Reported

style("hover:group");invalid-marker-use: `hover:group` cannot add the marker class `group` under variants or ref conditions

Fixed

const parent = style("group");
const child = style("group-hover:underline");

How to fix

• Add the marker without a variant, and put the condition on the utilities of the element that reacts, such as group-hover:underline.
• To connect elements with names that TypeScript checks, use style.ref() instead of group and peer.

Options

ignoredClasses lists marker class names that the rule does not check. Each name must match exactly.

Rule settings