PostHTML Bemify plugin

This Posthtml plugin transform custom tags with specific attributes to BEM-like HTML

Install

``sh
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



`

#### Skip elements children only
`html



Heading

1

2

`

Transformed to:

`html



`

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}$/ })

}
``