Bemify – PostHTML plugin to transform custom elements tags into HTML with BEM methodology class names
npm install posthtml-bemifysh
npm i mayoujin/posthtml-bemify#1.0.0 --save-dev
// or
npm i posthtml-bemify@1 --save-dev
`Usage
`javascript
// posthtml.config.js
module.exports = {
plugins: {
"posthtml-bemify": {
skipTags: ["svg"],
},
}
}
`Example
$3
#### Default
`html
`Would be transformed to html:
`html
`#### Named blocks
`html
`Would be transformed to html:
`html
`#### Multiple names of block
`html
`Would be transformed to html:
`html
`#### Nested blocks
`html
Content
`Would be transformed to html:
`html
Content
`$3
#### With custom name
`html
`Would be transformed to html:
`html
`#### With selective element name of multiple names block
`html
`Would be transformed to html:
`html
`$3
`html
`Would be transformed to html:
`html
`$3
`html
`Transformed to:
`html
`$3
#### Skip element with children`html
Heading
- 1
- 2
`Transformed to:
`html
Heading
- 1
- 2
`#### Skip elements children only
`html
Heading
1
2
`Transformed to:
`html
Heading
- 1
- 2
`Options
`js
{
/**
* Default block HTML tag
* @type {string}
* @default
*/
blockTag: 'div',
/**
* Default element HTML tag
* @type {string}
* @default
*/
elementTag: 'div',
/**
* Skip HTML tags list
* @type {string[]}
* @default
*/
skipTags: ['b', 'strong', 'i', 'span', 'div', 'section'], /**
* Overrides bem separators
* @type {{ blockPrefix: string, element: string, modifier: string, modifierValue: string }|false}
* @default
*/
bem: {
blockPrefix: "",
element: "__",
modifier: "--",
modifierValue: "_"
},
/**
* Pattern to ignore node tag transformation
*
* @type {{ tag?: /^[a-z-]{3}$/ } | null}
* @default
*/
ignoreTransformTag: null,
/**
* Match target nodes
*
* @type {{ BLOCK?: { tag: RegExp } | string, ELEMENT?: string | MODIFIER?: string} | null }
* @default
*/
matcher: {
BLOCK: 'bem:b' | { tag: /^[a-z-]{3}$/ },
ELEMENT: 'bem:e',
MODIFIER: 'bem:m'
},
/**
* Custom node visitor
*
* @type {function(node: { tag: string, attrs: object }, { b: string, e: string, m: string } ): void|null}
* @default
*/
nodeVisitor({ tag: /^[a-z-]{3}$/ })
}
``