postcss-plugin-bem-escape-block-name-less-modifier

this PostCSS plugin fixes minor problems in modifier class without block name in BEM(exactly MindBEMding).

this plugin was created to solve the problem of a specific context (block-name-less modifier), it is not designed to escape the css selector generically.

this PostCSS plugin will transform this:

.blcok.--modifier-a.--modifier-b {
    ...
}

To this:

.blcok.\--modifier-a.\--modifier-b {
    ...
}

installation

npm i -D postcss-plugin-bem-escape-block-name-less-modifier

usage

postcss([ require('postcss-plugin-bem-escape-block-name-less-modifier') ])

problem and solution

in the specification of selector name of css, if there is a hyphen (-) first, it is supposed not to specify a hyphen successively.

a strict web browser about this specification will not recognize such a class name. (ie, old android browser, etc)

so this plugin solves this problem by escaping the first letter of the class name in this pattern.

why use a modifier without a block name ?

when css is written in MindBEMding, if the modifier gets complicated, your html will be very ugly.

(the css file can be solved with a preprocessor like sass!)

<div class="my-important-class  my-important-class--active  my-important-class--danger  my-important-class--strong">

so i omit the modifier block name.

when writing like this with sass...

.my-important-class {
   &.--active {...}
   &.--danger {...}
   &.--strong {...}
}
/**
output:
.my-important-class.--active { ... }
.my-important-class.--danger { ... }
.my-important-class.--strong { ... }
**/

html will be so cute! It is!

<div class = "my-important-class  --active  --danger  --strong">