Rule proposal: `no-class-list-add-add`

[silverwind]

Description

Like no-array-push-push but for DOMTokenList.add.

Fail

el.classList.add('foo');
el.classList.add('bar', 'baz');

Pass

el.classList.add('foo', 'bar', 'baz');

Additional Info

Maybe also name it no-classlist-add-add because the rule wil likely match on that string and does not actually know the type.

[silverwind]

Renamed to no-classlist-add-add, I think it's clearly a better name.

[silverwind]

I think I could have a try at implementing this rule.

[dimaMachina]

classList.remove accepts also multiple arguments so that we can have one generic rule for both .add and .remove methods

Fail

el.classList.remove('foo');
el.classList.remove('bar', 'baz');

Pass

el.classList.remove('foo', 'bar', 'baz');

[silverwind]

Any name suggestions when covering remove as well? no-classlist-repeated-modify?

[fisker]

It's fine to check both in one rule called -add-add.

no-plusplus checks -- too.

We may check .unshift() in no-array-push-push too, #1019

[fisker]

We should add a dash to classlist.

[silverwind]

I'm thinking of an even broader name: prefer-combinable-action. It could have a in-rule config like:

const matches = [
  ['classList', 'add'],
  ['classList', 'remove'],
  ['push'],
];

This would be very easy to extend later on and it could maybe also replace no-array-push-push.

[fisker]

I was thinking the same easier, so I searched the JavaScript spec easier today, except Math.{min,max}() there seems no other methods accepts unlimited arguments, and Math.{min,max}() normally assigned to a variable not exactly the same as Array#{push,unshift}(). Then I give up the idea to combine them into one rule.

[silverwind]

Thanks for searching. I was almost sure that Set.add would support it as well, but alas, no.