Use multiple classNameCases for block, element and modifier

[dahelg]

There are projects which use a mixture of classNameCases, for example, the component's classname as PascalCase and the rest as kebab-case (see the scss style guide of the open source project "thenewboston").

This means, if I choose one classname case in the bemHelper options, that the linting shows me every class as a problem. If I use "any", it gives me no advise at all. Therefor, I would like to use a list which lets me choose which styles I want to use:

Instead of this:

  // The allowed case styling of class names.
  //  ...
  "bemHelper.classNameCase": "kebab",

I want this:

  "bemHelper.classNameCase": ["pascal", "kebab"],

or even a differentiation like this:

  "bemHelper.blockClassNameCase": "pascal",
  "bemHelper.elementClassNameCase": "kebab",
  "bemHelper.modifierClassNameCase": "kebab",

I suppose that not all combinations make sense. So it may also be okay, to use a predefined set of triples.

What do you think about this? 🙂

[Box-Of-Hats]

Hi, thanks for the great suggestion. I like the idea to allow more customisation to the linting but I want to be careful not to break the existing settings. The second option you've proposed looks like it would work and not break the old settings so I'll see if I can get that working soon

[Box-Of-Hats]

This feature is now available in 1.2.0 🚀

You can enable multiple cases using the setting "bemHelper.classNameCase" with a comma separated list of cases:

//settings.json
{
    "bemHelper.classNameCase": "kebab,pascal"
}

0c9ac8ad2e32da957c2cb12eef9c2051786c87af