CSS BEM class names builder

css-bem.ts

type Modifiers = {
  [key: string]: any,
}

export const toClassNames = (base: string, modifiers: Modifiers = {}): string => {
  const mods = Object
    .entries(modifiers)
    .filter(([, value]) => !!value)
    .map(([key, _]) => `${base}--${key}`);

  return [base, ...mods].join(' ');
};

// toClassNames("button", {
//   red: true,
//   "has-icon": undefined,
//   disabled: "Y",
// });
// 
// Output:
// "button button--red button--disabled"