BEM-style finder for CSS Modules

readme.md

BEM-style finder for CSS Modules

const hash = {
  'home-page': 'home-page',
  'home-page_wide': 'home-page home-page-wide',
  'home-page__title': 'home-page-title',
  'home-page__button': 'button',
  'home-page__button_type_cta': 'button cta-button'
};

const bem(hash);

bem.b(); // 'home-page'
bem.e('title'); // 'home-page-title'
bem.e('button'); // 'button'
bem.bm('wide'); // 'home-page home-page-wide'
bem.m('type', 'cta') // 'button cta-button'

bem-object.js

/**
 * @constructor
 */
function BemObject(hash) {
	this._hash = hash;
}

BemObject.prototype.b = function () {
	var blockKeys = Object.keys(this._hash)
		.filter(function (key) {
			return key.indexOf('_') === -1;
		});

	if (!blockKeys.length) {
		throw new Error('Block must exist');
	}

	return this._hash[blockKeys[0]];
};

BemObject.prototype.e = function (name) {
	var elementKeys = Object.keys(this._hash)
		.filter(function (key) {
			return key.indexOf('__' + name) > 0
		});

	return elementKeys.length ? this._hash[elementKeys[0]] : '';
};

// element modifier
BemObject.prototype.m = function (name, value) {
	var tag = '_' + name + (value ? ('_' + value) : '');
	var modifierKeys = Object.keys(this._hash)
		.filter(function (key) {
			return key.indexOf('__') > 0 && key.indexOf(tag) > 0;
		});

	return modifierKeys.length ? this._hash[modifierKeys[0]] : '';
};

// block modifier
BemObject.prototype.bm = function (name, value) {
	var tag = '_' + name + (value ? ('_' + value) : '');
	var modifierKeys = Object.keys(this._hash)
		.filter(function (key) {
			return key.indexOf('__') === -1 && key.indexOf(tag) > 0;
		});

	return modifierKeys.length ? this._hash[modifierKeys[0]] : '';
};

export default BemObject;