How to make to lint BEM-style using stylelint and stylelint-selector-bem-pattern?

Question

I'm trying to lint BEM-style using stylelint and stylelint-selector-bem-pattern plugin but can't get it work.

My config is the following:

• node: 5.11.0
• gulp-stylelint: ^2.0.2
• stylelint-selector-bem-pattern: ^0.2.3

.stylelintrc

{
    "plugins": [
        "stylelint-selector-bem-pattern"
    ],
    "rules": {
        "selector-bem-pattern": {
            preset: "suit"
        },
    },
    "extends": "@alienlebarge/stylelint-config",
}

And a CSS files for tests

.12ad2-asd--sad {
    color: rgba(255, 0, 0, .5);
}






#yeah {
    height: 10px;
}

I get the error message from @alienlebarge/stylelint-config but not from stylelint-selector-bem-pattern plugin

src/assets/foehn/styles/foehn.css
 4:1  ✖  Unexpected empty line    max-empty-lines
 5:1  ✖  Unexpected empty line    max-empty-lines
 6:1  ✖  Unexpected empty line    max-empty-lines
 7:1  ✖  Unexpected empty line    max-empty-lines
 8:1  ✖  Unexpected empty line    max-empty-lines
 9:1  ✖  Unexpected empty line    max-empty-lines
 9:1  ✖  Unexpected id selector   selector-no-id

Answer 1

From the code here it looks like the problem probably is that you did not define your component at the top of the CSS file: https://github.com/postcss/postcss-bem-linter#defining-a-component