bem

bemmet

Simple Emmet-like tool to expand abbreviations into BEMJSON

Showing:

Popularity

Downloads/wk

3

Maintenance

No Maintenance Data Available

Package

Dependencies

3

License

MPL-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

bemmet

Simple Emmet-like tool to expand abbreviations into BEMJSON. Check out online demo.

Also available as Sublime Text and Atom plugins.

Usage

var bemmet = require('bemmet');
var bemjson = bemmet('b1>__e1*2>b3_theme_islands+_state_active{hello}'); // object
var bemjsonString = bemmet.stringify('b1>__e1*2>b3_theme_islands+_state_active{hello}');

console.log(bemjsonString);
// {
//     block: 'b1',
//     content: [
//         {
//             elem: 'e1',
//             content: [
//                 {
//                     block: 'b3',
//                     mods: { theme: 'islands' },
//                     content: {}
//                 },
//                 {
//                     block: 'b1',
//                     mods: { state: 'active' },
//                     content: 'hello'
//                 }
//             ]
//         },
//         {
//             elem: 'e1',
//             content: [
//                 {
//                     block: 'b3',
//                     mods: { theme: 'islands' },
//                     content: {}
//                 },
//                 {
//                     block: 'b1',
//                     mods: { state: 'active' },
//                     content: 'hello'
//                 }
//             ]
//         }
//     ]
// }

Custom naming scheme

var bemmet = require('bemmet');
var abbreviation = 'b1>__e1*2>b3--islands+--active';
var bemjson = bemmet.stringify(abbreviation, {
    naming: {
        elem: '__',
        mod: '--'
    }
});

console.log(bemjson);
// {
//     block: 'b1',
//     content: [
//         {
//             elem: 'e1',
//             content: [
//                 {
//                     block: 'b3',
//                     mods: { islands: true },
//                     content: {}
//                 },
//                 {
//                     block: 'b1',
//                     mods: { active: true },
//                     content: {}
//                 }
//             ]
//         },
//         {
//             elem: 'e1',
//             content: [
//                 {
//                     block: 'b3',
//                     mods: { islands: true },
//                     content: {}
//                 },
//                 {
//                     block: 'b1',
//                     mods: { active: true },
//                     content: {}
//                 }
//             ]
//         }
//     ]
// }

API

bemmet(abbreviation, [parentBlock], [options]); // object
bemmet.stringify(abbreviation, [parentBlock], [options]); // string

parentBlock is used to explicitly define context for shortcuts like __elem when there's no parent block in abbreviation itself.

options.naming is used to configure BEM naming scheme. For details please refer to bem-naming.

For stringify() method it's possible to configure indentation and quotes via options.indent (string) and options.singleQuotes (boolean) params.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial