repeated-nesting-selector

This rule reports a selector variant that repeats &, such as [&+&]:, to relate two elements. & stands for the generated class of the style, so the selector matches any two elements that share the style. When the style is shared or used as a base, it can match pairs that you did not mean.

Reported

function Items({ labels }: { labels: string[] }) {
  return (
    <div>
      {labels.map((label) => (
        <div {...style("[&+&]:mt-4")}>{label}</div>repeated-nesting-selector: `&+&` uses `&` more than once, so it matches by generated class identity; relate elements with style.ref()
      ))}
    </div>
  );
}

Fixed

function Items({ labels }: { labels: string[] }) {
  return (
    <div {...style("flex flex-col gap-4")}>
      {labels.map((label) => (
        <div>{label}</div>
      ))}
    </div>
  );
}

How to fix

• To space items in a list, put gap on the list, as in the example.
• To style an element from the state of a sibling, use refs with .in().

Rule settings