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

score 3 · Answer 1 · answered Oct 30 '17 at 14:35

The Stylelint plugin will only run over defined components, which in the example is not the case.

As defined at the project documentation:

The plugin will only lint the CSS if it knows the context of the CSS: is it a utility or a component. To define the context, use the configuration options to define it based on the filename (css/components/*.css) or use a special comment to define context for the CSS after it. When defining a component, the component name is needed.

You can either define implicitly at the stylelintrc.json:

...,
implicitComponents: 'components/**/*.css',
...

Or at which component with a comment into MyComponent.css:

/** @define ComponentName */

.MyComponent {...}

score 2 · Accepted Answer · answered Apr 27 '16 at 13:29

2

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

answered Apr 27 '16 at 13:29

davidtheclark

4,666
6
32
42

It's often overlooked (even by me). – davidtheclark Apr 28 '16 at 15:58
1

@davidtheclark did you manage to solve this? I'm looking to implement a gulp task. Would be helpful if you could publish here a working solution. Thanks! – Nicolas T Jul 27 '17 at 13:41

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

2 Answers2