Simple function to aid with building BEM-style class names

bem-class-builder.js

/**
 * Used like:
 * const cls = buildBEMBuilder("block-name");
 *
 * let blockClass = cls();
 *   // => "block-name"
 *
 * let modifiedBlockClass = cls({
 *   goodModifier: true,
 *   badModifier: false,
 * });
 *   // => "block-name block-name--good-modifier"
 *
 * let elementClass = cls('an-element');
 *   // => "block-name__an-element"
 *
 * let modifiedElementClass = cls('an-element', {
 *   aModifier: true,
 *   anotherModifier: true,
 * });
 *   // => "block-name__an-element block-name__an-element--a-modifier block-name__an-element--another-modifier"
**/

const FALSY_CHECKS = {
  true(condition) { return condition !== true },
  truthy(condition) { return !condition },
  nullish(condition) { return condition === false || condition == null },
};
let modifierCheckStyle = Object.keys(FALSY_CHECKS)[0];

function dasherize(str) {
  return str
    .replace(/_/g, "-")
    .replace(/[A-Z]/g, char => `-${char.toLowerCase()}`)
    .replace(/^-+/g, "");
}

function buildBEMBuilder(_blockName) {
  const blockName = dasherize(_blockName);
  return function combineWithElementAndModifiers(element, modifiers = {}) {
    if (!element) { return blockName; }

    let elementClass = blockName;
    if (typeof element === "string") {
      elementClass += `__${dasherize(element)}`;
    }
    
    else if (typeof element === "object") {
      modifiers = element;
    }
    if (!modifiers) { return elementClass; }

    return Object.entries(modifiers)
      .reduce((className, [modifier, useModifier]) => {
        if (FALSY_CHECKS[modifierCheckStyle](useModifier)) { return className; }
        
        return `${className} ${elementClass}--${dasherize(modifier)}`;
      }, elementClass);
  }
}

Object.defineProperty(bEMClassBuilder, "modifierCheckStyle", {
  get() {
    return modifierCheckStyle;
  },
  set(requestedCheckStyle) {
    if (FALSY_CHECKS[requestedCheckStyle]) {
      throw Error(
        `invalid-truthy-check-style:
        There is no truthy check style of “${requestedCheckStyle}”
        Must be one of:
        ${
          FALSY_CHECKS.map(a => `• ${a}`).join('\n')
        }`.replace(/        /g, ''));
    }
    modifierCheckStyle = requestedCheckStyle;
  }
});