This plugin improves the tiredness of writing HTML with MindBEMding using the power of posthtml.
This plugin is a different way than respecting posthtml-bem.
I recommend that you examine the difference of the method with posthtml-bem.
Before:
// Block appends "_" to the prefix.
// Element appends "__" to the prefix.
// Modifire appends "--" to the prefix.
// Yes!! You don't have to add "Block" to the "Element" or "Modifire" prefix!!
<div class="_block --modifire">
<div class="__element __element--modifire">
<div class="_block-child">
<div class="__element-1">1</div>
<div class="__element-2">2</div>
<div class="__element-3">3</div>
<div class="something">something</div>
</div>
</div>
</div>After:
<div class="block block--modifire">
<div class="block__element block__element--modifire">
<div class="block-child">
<div class="block-child__element-1">1</div>
<div class="block-child__element-2">2</div>
<div class="block-child__element-3">3</div>
<div class="something">something</div>
</div>
</div>
</div>npm i posthtml posthtml-bemy
const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlBemy = require('posthtml-bemy');
posthtml()
.use(posthtmlBemy())
.process(html/*, options */)
.then(result => fs.writeFileSync('./after.html', result.html));nothing.