classList could also accept an array of strings

[rodrigocfd]

Currently classList attribute accepts an object with class names as keys and boolean as values. This is very convenient, and it works perfectly.

However, there are cases where I just need to pass an array of class names to the element. Currently, there are two ways to to this: (1) concatenate strings with class; and (2) create an object with all values true with classList:

function Foo() {
  const cls1 = 'foo';
  const cls2 = 'bar';

  return <>
    <div class={`${cls1} ${cls2}`} /> /* (1) */

    <div classList={{[cls1]: true, [cls2]: true}} /> /* (2) */
  </>;
}

It would be handy if classList would also accept a simple array of strings. It would allow us to write this:

function Foo() {
  const cls1 = 'foo';
  const cls2 = 'bar';

  return <>
    <div classList={[cls1, cls2]} />
  </>;
}

[snnsnn]

You can achieve somewhat similar effect using join:

<div class={['a', 'b'].join(' ')}>Text</div>

classlist aims conditional styling, which can be used with a signal or a selector created via createSelector.

[atk]

You could use a simple tool to move such an array into the object required to classList:

const cl = <
    ClassNames extends ReadonlyArray<string | false | null | undefined>,
    ClassList = { [key in ClassNames[number] & string]: true }
>(classNames: ClassNames) => classNames.reduce((obj, className) => {
  if (typeof className == "string") {
    obj[className] = true;
  }
  return obj;
}, {} as Record<string, true>) as ClassList;

[gabrielmfern]

Totally support this.

But maybe it'd be better to have another prop to this, like classes since it would make it easier to use normal classList, or rather change from classList to optionalClasses and use classList for this since the name classList is kinda misleading.

[atk]

The problem is already apparent with with classList and class - you cannot use them at the same time. The former is generally preferable for dynamic class names, whereas the latter will be better for completely static classes. Using both at the same time will lead to issues.

[elite174]

IMO I'd expect classList to work as clsx, - because it even has LIST in its name. At the moment it's quite useless, because you often need to pass class via props which looks like this:

classList={{[props.class ?? '']: true}}

Nobody does this, because it's not convenient. Instead you use clsx or similar tool. It would be so awesome if classList worked as it named.

[snnsnn]

The classList is intended to be used with dynamic values and pairs perfectly well with selector signals. The compiled code uses Element.classList property internally which is part of the DOM standard. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

I believe you are trying to force your React's way of thinking into Solid. React does not need such a functionality because of the top down rendering thanks to VDOm. In Solid updates are more granular which makes classList highly useful and very convenient.

[elite174]

I do understand this, but it's really common pattern when you need to pass extra class to child component:

// You can't do this, because there will be `undefined` in the class
// const Child = (props) => <div class={`child ${props.class}`}>Child</div>;

// Workarounds:
// const Child = (props) => <div class={`child ${props.class ?? ''}`}>Child</div>; - ugly whitespace at the end
// const Child = (props) => <div class="child" classList={{[props.class ?? '']: true}}>Child</div>; - more bloated version

const Parent = (props) => <Child class={styles.someExtraClass} />

Every person I know who uses Solid also uses clsx or similar tool to make it more convenient.

[merlindru]

This exact thing is what I've been running into

Putting clsx() everywhere is a hassle and not convenient, especially for Tailwind

Vue is the best library for Tailwind, with a close followup by Svelte, because they make this exact use dead simple. I direly need something like this in Solid.js

[davedbase]

Personally I think classList is a benefit and very valuable utility in Solid when used correctly. From reading the above a lot of people seem to have trouble writing it out. I've found the following pattern works well for me:

return (
  <div
    class="base"
    classList={{ [props.class as string]: !!props.class }}
  >
    Hello world
  </div>
);

It's clean and concise. Can anyone think of downsides to it?

Also, I do think that it might be worth considering clsx syntax as well in classList perhaps by adding an array option to it:

return (
  <div classList={[ "base", props.class ]}>
    Hello world
  </div>
);
// Possibly also an array with an object as well?
return (
  <div classList={[
    "base",
    { "active": active() && !loading }
  ]}>
    Hello world
  </div>
);

Leaning on Solid's transformers means not having to ship out all of clsx which is a win for our users.

[merlindru]

It's clean and concise. Can anyone think of downsides to it?

I'm using this exact pattern but repeating it over 100s of components is so tiring

This is specifically why I'm upvoting this issue - I want it to be like in your second example

classList={["base", props.class]}

Or even merge the class by default like Vue does (and preact allows you to, optionally)

[Caffeine19]

hi,take a look at this
https://github.com/lukeed/clsx

// Arrays clsx(['foo', 0, false, 'bar']); //=> 'foo bar'