quick bem helper hack

createBem.ts

import * as log from 'loglevel'

// # create bem
//
// ```
// const bem = createBem('my-favorite-foods')
//
// bem.b() === 'my-favorite-foods'
// bem.b('ordered') === 'my-favorite-foods--ordered'
// bem.b(['ordered', 'waiting-for']) === 'my-favorite-foods--ordered my-favorite-foods--waiting-for'
//
// bem.e('cheese') === 'my-favorite-foods__cheese'
// bem.e('cheese', 'cheddar') === 'my-favorite-foods__cheese--cheddar'
// bem.e('cheese', ['cheddar', 'camembert']) ===
//   'my-favorite-foods__cheese--cheddar my-favorite-foods__cheese--camembert'
// ```

const logged = []

const logClassName = (combined) => {
    // just copy this section from the console and paste into
    // a new scss file, then do a bit of a search and replace
    if (logged.indexOf(combined) === -1) {
        log.info(combined)
        logged.push(combined)
    }
}

const createBem = (block: string, debug = false) => ({
    // block helper
    b: (mod?: string | string[]): string => {
        let combined = ''
        if (!mod) {
            combined = block
        } else {
            const modArr = typeof mod === 'string' ? [mod] : mod
            combined = modArr.map(modItem => `${block}--${modItem}`).join(' ')
        }

        if (debug) {
            logClassName(combined)
        }
        return combined
    },
    // block__element helper
    e: (element = '', mod?: string | string[]): string => {
        const blockElement = `${block}__${element}`
        let combined = ''
        if (!mod) {
            combined = blockElement
        } else {
            const modArr = typeof mod === 'string' ? [mod] : mod
            combined = modArr.map(modItem => `${blockElement}--${modItem}`).join(' ')
        }

        if (debug) {
            logClassName(combined)
        }
        return combined
    }
})

export default createBem