[Suggestion] Concat nested objects (BEM)

Hi,

classnames is a ubiquitous, indispensable library for creating classnames and I like it a lot.

However, it could be improved for optimizing creating series of BEM classes that have similar modifiers.

For example, let’s say I have the following code:

foo = {
 'cool-block': true,
 'cool-block--success': successful,
 'cool-block--error': error,
 'cool-block--pending': pending,
}

Not so bad, there’s a little code repeating but it’s bearable at least. However, let’s say I had some other element in the same file that depended on the same success/error/pending:

bar = {
 'other-block': true,
 'other-block--success': successful,
 'other-block--error': error,
 'other-block--pending': pending,
}

Again, on its own it’s bearable but together there’s an opportunity for reducing repeating code. It could be defined similar to the way it would in scss:

mods = {
 '--success': successful,
 '--error': error,
 '--pending': pending,
}
foo = {
 'cool-block': mods,
}
bar = {
 'other-block': mods,
}

Currently, if you pass a non-empty object it will evaluate as true, and an empty object evaluates as false. This means that, even if dynamically generating your nested objects, existing behavior is preserved (aka backwards compatible).

Thoughts?

[newyork-anthonyng]

@thaithco Good idea, but I’m wondering about the performance consequences this would have.

I agree with you that this package is ubiquitous, but I’m not sure that BEM is as commonly used.

I think that it should be the responsibility of the developer to create a BEM object that works with the classnames package.

Would a utility function like the below work?

const createBemObject = ({ baseNames, modifier }) => {
  const result = {};
  for (var i = 0; i < baseNames.length; i++) {
    for (var key in modifier) {
      const newKey = baseNames[i] + key;
      result[newKey] = modifier[key];
    }
  }
  return result;
};

const success = true;
const error = false;
const pending = true;

createBemObject({
  baseNames: ['cool-block', 'other-block'],
  modifier: {
    '--success': success,
    '--error': error,
    '--pending': pending,
  },
});
/*
{
  'cool-block--success': true,
  'cool-block--error': false,
  'cool-block--pending': true,
  'other-block--success': true,
  'other-block--error': false,
  'other-block--pending': true,
}
*/

[jednano]

Related, see https://www.npmjs.com/package/bem-join