I'm writing this ticket in support of allowing modifiers to be defined with multiple modvalues.

It is often the case that, in a component library, you want to enable style modifications on components across multiple semantic ranges, eg:

• Component size (small, medium, large)
• Color scheme (light mode, dark mode)
• Information density (compact, normal, light)
• etc...

In many cases, each of these ranges can be exposed to users of the component with a separate, unique prop (eg. <MyComponent size="small" color="light" density="compact" />).

However, this design pattern is not very flexible and future-proof, especially when developing unstyled components. In my company, the person writing the component API and the person writing the style are two different people (sometimes those are even from a different company). We need to be able to expose a future-proof, multi-valued prop where multiple style modifications can be expressed, eg. <MyComponent variant="small light compact" />.

This is not currently possible with @bem-react/classname. I'd like to add support for passing arrays of string values to a mod, resulting in multiple mod modifiers being produced:

cn('MyComponent, { variant: ['small', 'light', 'compact'] })
// MyComponent MyComponent-variant_small MyComponent-variant_light MyComponent-variant_compact