Can't pass array of strings to the class html attribute

First of all: brilliant work! These components are very lightweighted 💪

The issue:

If I use classnames I get this warning 'classnames': Stencil can already render conditional classes:

But Stencil can't handle simple lists of classes: ['my-class1', 'my-class2', 'my-class3']

I know we can write it as:

{
  ['my-class1']: true,
  ['my-class2']: true,
  ['my-class3']: true,
}

but it looks particularely verbose if we have complex combinations.

Example: I have a component that can receive a list of classes from the parent component:

<my-component arrow-left-classes="example1,example2,example3" arrow-right-classes="example1,example2" />

and then in the component I have something like a carousel:

<div>
    <div class={['prev-arrow', ...this.arrowLeftClasses]}>...</div>
    <div class={['next-arrow', ...this.arrowRightClasses]}>...</div>
</div>

This will NOT work because classes won't accept arrays and the transformation for those arrays is verbose and bad for the maintainability of the code, so I used classnames:

<div>
    <div class={classnames(['prev-arrow', ...this.arrowLeftClasses])}>...</div>
    <div class={classnames(['next-arrow', ...this.arrowRightClasses])}>...</div>
</div>

Everything works fine, except the annoying warning to not use classmates 😅

stencil-community / stencil-eslint

Can't pass array of strings to the class html attribute #25