Doesn't work correct for me

[aimuzov]

My gulp task:

module.exports = function(gulp, plugins, growl) {
    gulp.task("postcss:dev", function() {
        var processors = [
            plugins.autoprefixerCore({
                browsers: ['last 2 versions'],
            }),
            plugins.postcssImport(),
            plugins.postcssNested(),
            plugins.cssnext(),
            plugins.postcssFontMagician(),
            plugins.postcssBemLinter(),
        ];
        return gulp.src(["assets/styles/**/+(main|vendor).css"])
            .pipe(plugins.postcss(processors))
            .pipe(gulp.dest(".tmp/public/styles"))
            .pipe(plugins.livereload())
            .pipe(plugins.if(growl, plugins.notify({ message: 'cssnext dev task complete' })));
        });
};

My page.css (this file imported to main.css):

/** @define Page */
.Page {
    display: flex;
    height: 100%;
    width: 100%;

    &--withPlugger {
        justify-content: center;
        align-items: center;
    }

    &-plugger {
        text-align: center;
    }
}
/* @end */

My main.css:

@import '../common/selectors';
@import '../common/general';

/*@import 'variables';*/
@import 'general';

@import 'components/page';

Other css file not contain @define directive.

Error:

postcss-bem-linter: /<PATH_TO_ASSETS>/styles/common/general.css:1:1: Invalid component selector "html"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/common/general.css:5:1: Invalid component selector "body"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/page/general.css:1:1: Invalid component selector "body"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/page/general.css:6:1: Invalid component selector "h1"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/page/general.css:6:1: Invalid component selector "h2"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/page/general.css:6:1: Invalid component selector "h3"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/page/general.css:6:1: Invalid component selector "h4"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/page/general.css:6:1: Invalid component selector "h5"
postcss-bem-linter: /<PATH_TO_ASSETS>/styles/page/general.css:6:1: Invalid component selector "h6"

compiled css:

html {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0;
    width: 100%;
}

body {
    background-color: white;
    font-family: 'Roboto';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto Condensed';
}

/** @define Page */
.Page {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;

    &--withPlugger {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }

    &-plugger {
        text-align: center;
    }
}
/* @end */

Sorry for my bad english.

[davidtheclark]

@Immuzov Can you try running postcss-bem-linter before postcss-import, and see what happens? Same thing?

[aimuzov]

Before postcss-import – not work (no errors). Compiled css:

html {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0;
    width: 100%;
}

body {
    background-color: white;
    font-family: 'Roboto';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto Condensed';
}

/** @define Pagetest */
.Page {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
}
.Page--withPlugger {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
.Page-plugger {
    text-align: center;
}
/* @end */

After postcss-import (same errors, any order):

1:1 >> Invalid component selector "html" [postcss-bem-linter]
5:1 >> Invalid component selector "body" [postcss-bem-linter]
1:1 >> Invalid component selector "body" [postcss-bem-linter]
6:1 >> Invalid component selector ":--heading" [postcss-bem-linter]
2:1 >> Invalid component selector ".Page" [postcss-bem-linter]
7:2 >> Invalid component selector "&--withPlugger" [postcss-bem-linter]
12:2    >> Invalid component selector "&-plugger" [postcss-bem-linter]

[davidtheclark]

When I tried the following CSS, the test passed:

html {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0;
  width: 100%;
}

body {
  background-color: white;
  font-family: 'Roboto';
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto Condensed';
}

/** @define Page */
.Page {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  width: 100%;
}
.Page--withPlugger {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
    -ms-flex-pack: center;
      justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
    -ms-flex-align: center;
      align-items: center;
}
.Page-plugger {
  text-align: center;
}
/* @end */

That suggests to me that you have something else going on. Have you tried systematically eliminating plugins to see if the removal of any of them fixes the problem?

Otherwise, since the tests pass here, all I can think of is that you could post your exact files in a gist, and I could try the whole build process locally.

[davidtheclark]

Any input on this @Immuzov? If not, I may close this, since I can't reproduce your problem.