Is there a grunt plugin for this?

[simonsmith]

You can use it with grunt-postcss - https://github.com/nDmitry/grunt-postcss

[jitendravyas]

ok. I have this in my Gruntfile

BEM linter is not working though

        postcss: {
            options: {
                syntax: require('postcss-scss'),
                processors: [
                    require('autoprefixer')({ add: false, browsers: ['last 1 versions'] }),
                    require('postcss-bem-linter')({preset: 'suit'}),
                    require('postcss-reporter')(),
                ]
            },

I get no linter error

[simonsmith]

Have you followed the instructions for defining a component?

[jitendravyas]

These instructions are confusing to me, I'm not able to understand them. Is there any dummy project demo to understand it?

[simonsmith]

@jitendravyas Which part are you having difficulty with?

[jitendravyas]

I don't know where and in which kind of file .css or Gruntfile.js I need to create these components https://github.com/postcss/postcss-bem-linter#defining-a-component-and-utilities

I want to use it on a legacy project which use Grunt and Sass and Autoprefixer (via postcss). I am also using stylelint and found this linter can be used with that too.

We are already using Harry robert's BEM convention.

I want to lint all scss files inside project/css/*scss

I can also use it with stylelint if that makes anything easy.

[simonsmith]

The simplest way to get started is to add the define comment at the top of your CSS/Scss file that tells postcss-bem-linter what name to test with:

/* @define MyComponent */

Once you've added that ensure your grunt task is running on the correct file path and it should work as expected/

[jitendravyas]

In gruntfile

        stylelint: {
            all: ['app/styles/**/*.scss']
        },

.stylelintrc

{
    "plugins": [
        "stylelint-selector-bem-pattern"
    ],
    "rules": {
      "plugin/selector-bem-pattern": {
      "componentName": "[A-Z]+",
      "componentSelectors": {
        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
        "combined": "^\\.combined-{componentName}-[a-z]+$"
      },
      "utilitySelectors": "^\\.util-[a-z]+$"
    }
    }
}

/Users/jitendravyas/app-v3/styles/components/_campaign-settings-integrations.scss

/* @define campaign-settings */

.campaign-settings__integrations {
  @include flex;
}

.campaign-settings__integration {
  border: 1px solid $color-green;
  border-radius: 3px;
  color: $color-green;
  margin-right: $base-spacing-unit;
  @include flex;

  .check {
    background: $color-green;
    color: white;
    @include vertical-center;
  }

  > div {
    padding: $half-spacing-unit;
  }
}

Not getting any error when I run stylelint. Stylelint is working with other rules.