When do I need to use an array?

[shinokada]

I have the following twMerge using [].

Q1. Are these correct?
Q2. When do I need to use []?

$: is a Svelte notation for reactivity.

  let trClass: string;
  $: trClass = twMerge([
    !getContext('noborder') && 'border-b last:border-b-0',
    colors[color],
    getContext('hoverable') && hoverColors[color],
    getContext('striped') && stripColors[color],
    $$props.class
  ]);

  let inputClass: string;
  $: {
    const _color = color === 'base' && background ? 'tinted' : color;
    inputClass = twMerge([
      defaultClass,
      ($$slots.left && leftPadding[_size]) || ($$slots.right && rightPadding[_size]) || inputPadding[_size],
      ringClasses[color],
      colorClasses[_color],
      borderClasses[_color],
      textSizes[_size],
      group || 'rounded-lg',
      group && 'first:rounded-l-lg last:rounded-r-lg',
      group && 'border-l-0 first:border-l last:border-r',
      $$props.class
    ]);
  }

[dcastil]

Hey @shinokada! 👋

To Q1: Yes, your usage of twmerge seems to be correct.

To Q2:

You don't need the most outer array, twMerge supports an infinite number of arguments. So your first code block could be simplified to this.

  let trClass: string;
  $: trClass = twMerge(
    !getContext('noborder') && 'border-b last:border-b-0',
    colors[color],
    getContext('hoverable') && hoverColors[color],
    getContext('striped') && stripColors[color],
    $$props.class
  );

Using arrays makes sense when you have nested conditions. E.g. let's say we have this hypothetical scenario in which we want to apply some classes when forceHover is false and even more classes when forceHover is false and disabled is also false.

twMerge(
  'grid w-max gap-2',
  forceHover && 'bg-gray-200'
  !forceHover && 'bg-white',
  !forceHover && !disabled && 'hover:bg-gray-200',
  $$props.class,
)

The code is a bit repetitive, it is harder to reason about and it's more likely that we create a bug, e.g. by not seeing that we put a ! in the wrong place.

We can simplify this code by replacing all these repeating conditions and use nesting with ternaries and arrays instead.

twMerge(
  'grid w-max gap-2',
  forceHover
    ? 'bg-gray-200'
    : ['bg-white', !disabled && 'hover:bg-gray-200'],
  $$props.class
)

Here it's clear that when forceHover is false, we apply ['bg-white', !disabled && 'hover:bg-gray-200'] and inside the array it's clear that we apply 'hover:bg-gray-200' only if disabled is false.

[shinokada]

Thank you for your explanation.

When I use your suggested code, I get the following on the line getContext('hoverable') && hoverColors[color],. But it goes away when I use an array.

Argument of type 'unknown' is not assignable to parameter of type 'ClassNameValue'.ts(2345)

[dcastil]

Hmmm that's weird, that error should also appear when you use an array. Not sure what TypeScript is doing there.

twMerge only accepts arguments of this type:

type ClassNameValue = string | null | undefined | 0 | false | ClassNameValue[]

So you'd need to check why the type of the expression getContext('hoverable') && hoverColors[color] resolves to unknown instead of one of these.