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'
Last active
November 24, 2015 03:42
-
-
Save mistakster/5d88e94dba3d18186a4e to your computer and use it in GitHub Desktop.
BEM-style finder for CSS Modules
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment