Unable to get postcss-bem-linter to display any errors

[alibby251]

I've created a simple demo of some message boxes using plain HTML and CSS - the CSS used is this:

/* postcss-bem-linter: define .content */

.dlgBox {
  border-radius: 0.625rem;
  padding: 0.625rem 0.625rem 0.625rem 2.375rem;
  margin: 0.625rem;
  width: 14.5rem; }

.dlgBox__alert {
  font-family: Tahoma, Geneva, Arial, sans-serif;
  font-size: 0.6875rem;
  color: #555;
  border-radius: 0.625rem; 
}

.dlgBox__alert.small span {
  font-weight: bold;
  text-transform: uppercase; 
}

.dlgBox__alert--error {
  background: #ffecec url("../img/error.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f5aca6; 
}

.dlgBox__alert--error:hover {
  opacity: 0.8; 
}

.dlgBox__alert--success {
  background: #e9ffd9 url("../img/success.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #a6ca8a; 
}

.dlgBox__alert--success:hover {
  opacity: 0.8; 
}

.dlgBox__alert--warning {
  background: #fff8c4 url("../img/warning.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f2c779; 
}

.dlgBox__alert--warning:hover {
  opacity: 0.8; 
}

.dlgBox__alert--notice {
  background: #e3f7fc url("../img/info.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #8ed9f6; 
}

.dlgBox__alert--notice:hover {
  opacity: 0.8; 
}

My issue is that I am unable to get postcss-bem-linter to show any errors - I've tried dropping one of the hyphens out of the rule, such as:

.dlgBox__alert-notice:hover {
  opacity: 0.8; 
}

...and one of the underscores as well, in a similar fashion. This is what I have in my gulpfile.js:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var bemLinter = require('postcss-bem-linter');
var reporter = require('postcss-reporter');

gulp.task('lint', function() {
  return gulp.src("src/*.css")
    .pipe(postcss([bemLinter({
        componentName: /[A-Z]+/
      }), reporter({
        formatter: function(input) {
          return input.source + ' produced ' + input.messages.length + ' messages';
        }
      })
    ]))
  .pipe(gulp.dest('/dest'));
});

gulp.task('default', ['lint']);

var watcher = gulp.watch('src/*.css', ['default']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

The only error I was able to get it to show was an "Invalid selector" one - I fixed this by adding the define: statement at the top of the CSS stylesheet. Can someone please point out where I'm going wrong? Each time I run the gulp task, I get a 0 messages confirmation from gulp-reporter, yet I am sure it should be showing something else...the version of PostCSS used is version 6.0.

[davidtheclark]

I will try to look into it this weekend, but here are some places to start:

• The component name that you define should not start with a .: it's just the name of the component. The . will be expected at the beginning of class selectors without you having to specify that in your definition.
• There is no PostCSS version 6.0 release yet, so you must be using some other version?
• Have you tried using postcss-reporter's default formatter instead of your custom function? Just to make sure there's not a problem with your function?

If any of the above fixes the problem, let me know how we can improve the docs so others don't hit the same stumbling block. If not, I'll see if I can reproduce the problem within the next couple of days.

[alibby251]

Hi davidtheclark,

Thanks for responding - hopefully this helps:

1. I removed the . from before the component name in the class that I define at the top of the style sheet, so I have this: /* postcss-bem-linter: define dlgBox */ (apologies - the classname in my original post was incorrect - it should be dlgBox, and not content!) This gave me the following:

C:\wamp\www\postcss>gulp
[16:38:34] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[16:38:34] Starting 'lint'...
C:\wamp\www\postcss\src\style.css produced 10 messages
[16:38:34] gulp-postcss: style.css
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:9:1: Invalid component sel
ector ".dlgBox__alert"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:16:1: Invalid component se
lector ".dlgBox__alert.small span"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:21:1: Invalid component se
lector ".dlgBox__alert--error"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:26:1: Invalid component se
lector ".dlgBox__alert--error:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:30:1: Invalid component se
lector ".dlgBox__alert--success"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:35:1: Invalid component se
lector ".dlgBox__alert--success:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:39:1: Invalid component se
lector ".dlgBox__alert--warning"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:44:1: Invalid component se
lector ".dlgBox__alert--warning:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:48:1: Invalid component se
lector ".dlgBox__alert--notice"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:53:1: Invalid component se
lector ".dlgBox__alert--notice:hover"
[16:38:34] Finished 'lint' after 95 ms
[16:38:34] Starting 'default'...
[16:38:34] Finished 'default' after 37 µs

...putting the . back in before dlgBox produces this:

File C:\wamp\www\postcss\src\style.css was changed, running tasks...
[16:39:35] Starting 'lint'...
C:\wamp\www\postcss\src\style.css produced 0 messages
[16:39:35] Finished 'lint' after 42 ms
[16:39:35] Starting 'default'...
[16:39:35] Finished 'default' after 28 µs

1. I think my "version 6.0" may actually be from gulp-postcss, and not postcss - sorry for the confusion! The version of PostCSS I am using is 3.3.8.
2. I've tried stripping back the gulpfile.js to the default options for postcss-reporter - this has no effect: it doesn't show any errors, even though I removed one if the hyphens (line 21), and added a .small in on line 16 (so it shows .dlgBox__alert.small span instead). If the second error doesn't show, then my understanding is that the first should at least show - am I correct, or am I missing something here? From what I can see the custom function is working - it's actually taken directly from the postcss-reporter site ;-)

[davidtheclark]

@alibby251 I think is a configuration error that was eaten by gulp-postcss. When I run your CSS against your config { componentName: /[A-Z]+/ }, I got the following error:

Error: You tried to `@define` a component but have not provided a `componentSelectors` pattern

That makes sense: that's what you've done.

Did you want to extend the suit or bem config and just add your own componentName pattern? If so, you would do that like this:

{
  preset: 'suit',
  componentName: /[A-Z]+/ 
}

If you want to write your own componentSelectors pattern, you can do that, too.

Also: @w0rm do you have any suggestions for @alibby251 about getting the errors to print out? Does he need to use gulp-plumber? Thanks!

[w0rm]

@davidtheclark gulp-postcss doesn't swallow errors.

I set up the project and ran the task, this was the output:

[w0rm@work ~/Work/postcss]$ gulp lint
[10:11:13] Using gulpfile ~/Work/postcss/gulpfile.js
[10:11:13] Starting 'lint'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: You tried to `@define` a component but have not provided a `componentSelectors` pattern
    at checkRule (/Users/w0rm/Work/postcss/node_modules/postcss-bem-linter/index.js:62:15)
    at /Users/w0rm/Work/postcss/node_modules/postcss-bem-linter/index.js:40:9
    at Array.forEach (native)
    at /Users/w0rm/Work/postcss/node_modules/postcss-bem-linter/index.js:37:14
    at /Users/w0rm/Work/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:115:34
    at /Users/w0rm/Work/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:73:26
    at Root.each (/Users/w0rm/Work/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:59:22)
    at Root.walk (/Users/w0rm/Work/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:72:21)
    at Root.walkRules (/Users/w0rm/Work/postcss/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:113:25)
    at /Users/w0rm/Work/postcss/node_modules/postcss-bem-linter/index.js:35:10
[w0rm@work ~/Work/postcss]$ 

[davidtheclark]

Thanks a lot, @w0rm : I suspected that gulp-postcss wouldn't do that. @alibby251 : Must be something else. Anyway, let me know if using a proper configuration object fixes your confusion.

[alibby251]

Thanks for this - I will work on it again this evening, to see if I can make any more progress. At present, I'm trying out a few things for a project I'm working on - my aim was to force postcss-bem-linter to display errors deliberately (yes, I know, normally that wouldn't be the case, but there are valid reasons for doing so ;-)) - I will keep you posted with progress...

[alibby251]

I've had another look - I feel like I'm missing something, as I still can't get it to show any error, save for the invalid selector one from earlier!

My gulpfile.js file looks like this:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var plumber = require('gulp-plumber');
var bemLinter = require('postcss-bem-linter');
var reporter = require('postcss-reporter');

gulp.task('default', function() {
  return gulp.src("src/*.css")
    .pipe(plumber())
    .pipe(postcss([bemLinter({
        componentSelectors: function(componentName) {
          return new RegExp('^\\.' + componentName + '(?:-[0-9]+)?$');
        }
      }),
      reporter()

    ]))
    .pipe(gulp.dest('dest/'));
});

var watcher = gulp.watch('src/*.css', ['default']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

At present, the task appears to simply copy the file from the src folder to the dest folder - it doesn't seem to be running bemlinter, with or without a componentSelectors config object. I've tried changing elements in the source css file, to force it to show an error: this isn't having any effect! I've added in gulp-plumber - still no change. I've also tried changing the regex in the componentSelectors config; I put in 0-9 in place of a-z - I am correct in assuming that this should force an error, as none of my classes have numbers in them?

Any ideas, anyone...?

[w0rm]

Are you using the most recent versions of the packages?

[alibby251]

AFAIK, yes - they were all installed from new; this is my package.json file:

{
  "name": "postcss",
  "version": "1.0.0",
  "description": "Configuration file for PostCSS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alex Libby",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.0.3",
    "cssnano": "^3.2.0",
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.3",
    "gulp-plumber": "^1.0.1",
    "gulp-postcss": "^6.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "postcss-bem": "^0.3.2",
    "postcss-bem-linter": "^2.0.0",
    "postcss-calc": "^5.0.0",
    "postcss-cli": "^2.1.0",
    "postcss-css-variables": "^0.5.0",
    "postcss-custom-media": "^5.0.0",
    "postcss-each": "^0.7.0",
    "postcss-math": "0.0.1",
    "postcss-mixins": "^1.0.1",
    "postcss-nesting": "^2.0.6"
  }
}

I know there are a few packages in there - I've been trying a few things, chuckle! I've stripped the package.json file down to gulp-postcss, plumber, postcss-bem and postcss-bem-linter, just to see if there is anything that might conflict. This ran fine, but with no change to the output - it doesn't flag anything, even though I have some items in the CSS file that I believe should flag as errors (some of the items have missing '_''s in their names...)

[davidtheclark]

@alibby251: I simplified the setup and ran into no problems: everything works as expected.

Given this test.css:

/* postcss-bem-linter: define dlgBox */

.dlgBox {
  border-radius: 0.625rem;
  padding: 0.625rem 0.625rem 0.625rem 2.375rem;
  margin: 0.625rem;
  width: 14.5rem; }

.dlgBox__alert {
  font-family: Tahoma, Geneva, Arial, sans-serif;
  font-size: 0.6875rem;
  color: #555;
  border-radius: 0.625rem;
}

.dlgBox__alert.small span {
  font-weight: bold;
  text-transform: uppercase;
}

.dlgBox__alert--error {
  background: #ffecec url("../img/error.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f5aca6;
}

.dlgBox__alert--error:hover {
  opacity: 0.8;
}

.dlgBox__alert--success {
  background: #e9ffd9 url("../img/success.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #a6ca8a;
}

.dlgBox__alert--success:hover {
  opacity: 0.8;
}

.dlgBox__alert--warning {
  background: #fff8c4 url("../img/warning.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f2c779;
}

.dlgBox__alert--warning:hover {
  opacity: 0.8;
}

.dlgBox__alert--notice {
  background: #e3f7fc url("../img/info.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #8ed9f6;
}

.dlgBox__alert--notice:hover {
  opacity: 0.8;
}

And this gulpfile.js:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var bemLinter = require('postcss-bem-linter');
var reporter = require('postcss-reporter');

gulp.task('default', function() {
  return gulp.src("test.css")
    .pipe(postcss([
      bemLinter({
        componentSelectors: function(componentName) {
          return new RegExp('^\\.' + componentName + '(?:-[0-9]+)?$');
        }
      }),
      reporter()
    ]))
    .pipe(gulp.dest('dest/'));
});

I got this console output:

➜  test  gulp
[20:59:07] Using gulpfile ~/dev/test/gulpfile.js
[20:59:07] Starting 'default'...

test.css
9:1 ⚠  Invalid component selector ".dlgBox__alert" [postcss-bem-linter]
16:1    ⚠  Invalid component selector ".dlgBox__alert.small span" [postcss-bem-linter]
21:1    ⚠  Invalid component selector ".dlgBox__alert--error" [postcss-bem-linter]
26:1    ⚠  Invalid component selector ".dlgBox__alert--error:hover" [postcss-bem-linter]
30:1    ⚠  Invalid component selector ".dlgBox__alert--success" [postcss-bem-linter]
35:1    ⚠  Invalid component selector ".dlgBox__alert--success:hover" [postcss-bem-linter]
39:1    ⚠  Invalid component selector ".dlgBox__alert--warning" [postcss-bem-linter]
44:1    ⚠  Invalid component selector ".dlgBox__alert--warning:hover" [postcss-bem-linter]
48:1    ⚠  Invalid component selector ".dlgBox__alert--notice" [postcss-bem-linter]
53:1    ⚠  Invalid component selector ".dlgBox__alert--notice:hover" [postcss-bem-linter]

[20:59:08] gulp-postcss: test.css
postcss-bem-linter: /Users/davidclark/dev/test/test.css:9:1: Invalid component selector ".dlgBox__alert"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:16:1: Invalid component selector ".dlgBox__alert.small span"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:21:1: Invalid component selector ".dlgBox__alert--error"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:26:1: Invalid component selector ".dlgBox__alert--error:hover"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:30:1: Invalid component selector ".dlgBox__alert--success"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:35:1: Invalid component selector ".dlgBox__alert--success:hover"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:39:1: Invalid component selector ".dlgBox__alert--warning"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:44:1: Invalid component selector ".dlgBox__alert--warning:hover"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:48:1: Invalid component selector ".dlgBox__alert--notice"
postcss-bem-linter: /Users/davidclark/dev/test/test.css:53:1: Invalid component selector ".dlgBox__alert--notice:hover"

[davidtheclark]

@alibby251 : I think you should start over with your build process, keep it simple and make sure each step works before adding another step.

[alibby251]

Hi davidtheclark,Thanks for this - the trouble is though, I was already able to get this message!The issue was that when I change the selectors (such as removing one or more '' out of the name), I got a response back to indicate that the code was OK, even though my understanding was that this should not be the case. If you remove a out of one or more of the selector names, what response do you get?On 27 October 2015 at 04:02 David Clark notifications@github.com wrote:Closed #70.—Reply to this email directly or view it on GitHub.  

[davidtheclark]

If I remove a _ from .dlgBox__alert, I get all the same error messages but that one changed to this:

9:1 ⚠  Invalid component selector ".dlgBox_alert" [postcss-bem-linter]

Again, expected behavior.

I guess I still don't understand the problem. That is why I suggest starting from a clean slate with the build process, adding one piece at a time, in order to better identify which part of the process is going wrong.

(Also ... I notice that you're using __ and -- like in BEM, but you haven't set the BEM preset. Is your intention to use BEM? If so you need to add that to your config.)

[alibby251]

Hi davidtheclark,

Mmm - it's getting fustrating: I still can't replicate what you're getting ;-)

The issue I have is that I can only get it to show this:

C:\wamp\www\postcss>gulp
[20:41:57] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[20:41:57] Starting 'default'...
[20:41:57] gulp-postcss: style.css
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:15:1: Invalid component selector ".dlgBox_alert.small span"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:20:1: Invalid component selector ".dlgBox_alert--error"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:25:1: Invalid component selector ".dlgBox_alert--error:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:29:1: Invalid component selector ".dlgBox__alert--success"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:34:1: Invalid component selector ".dlgBox__alert--success:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:38:1: Invalid component selector ".dlgBox__alert--warning"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:43:1: Invalid component selector ".dlgBox__alert--warning:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:47:1: Invalid component selector ".dlgBox__alert--notice"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:52:1: Invalid component selector ".dlgBox__alert--notice:hover"
[20:41:57] Finished 'default' after 117 ms
File C:\wamp\www\postcss\src\style.css was changed, running tasks...
[20:42:27] Starting 'default'...
[20:42:28] Finished 'default' after 42 ms

I've reduced my gulpfile.js file to what I believe the bare minimum should be:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var bemLinter = require('postcss-bem-linter');

gulp.task('default', function() {
  return gulp.src('src/style.css')
    .pipe(postcss([bemLinter({ preset: 'bem' })]))
    .pipe(gulp.dest('dest/'));
});

• it's as if it is taking no notice of the bemLinter plugin at all. I've also reduced my package.json file down to the bare minimum too - gulp-reporter is being called simply to display something in a console window, but I get absolutely nothing displayed:

{
  "name": "postcss",
  "version": "1.0.0",
  "description": "Configuration file for PostCSS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alex Libby",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-postcss": "^6.0.0",
    "postcss-bem-linter": "^2.0.0",
    "postcss-reporter": "^1.3.0"
  }
}

My expectation was that it would show errors for the lines that are clearly incorrect, such as removing a '_' from one of the block/element names. Is this right, or have I misunderstood what I should expect to see? I've also tried adding a preset - set to BEM - as per the docs; this doesn't seem to have any effect either. The only thing that comes to mind is that I am running this in Node 4.1.1 on a Windows 10 system - is there anything stopping me from using Windows? Ultimately I would like to be able to demonstrate that if I deliberately generate an error, postcss-bem-linter correctly picks it up. As far as I can see, the only difference between your examples and mine would appear to be the OS - I assume you are using Mac or Linux?

[davidtheclark]

I do not understand what you expect to happen that is not happening. Every single one of your selectors is being complained about, right? And that's what you want?

My expectation was that it would show errors for the lines that are clearly incorrect,

That is what it is doing in the output that you pasted above.

Here's what might help: Please post these 4 things:

1. The CSS file
2. The gulpfile
3. The actual output
4. The output that you expect but are not getting

[alibby251]

Hi,

Thanks for this - hopefully this will help:

CSS:

/** postcss-bem-linter: define .dlgBox */

.dlgBox {
  border-radius: 0.625rem;
  padding: 0.625rem 0.625rem 0.625rem 2.375rem;
  margin: 0.625rem;
  width: 14.5rem; }

.dlgBox__alert {
  font-family: Tahoma, Geneva, Arial, sans-serif;
  font-size: 0.6875rem;
  color: #555;
  border-radius: 0.625rem; 
}

.dlgBox_alert.small span {
  font-weight: bold;
  text-transform: uppercase; 
}

.dlgBox_alert--error {
  background: #ffecec url("../img/error.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f5aca6; 
}

.dlgBox_alert--error:hover {
  opacity: 0.8; 
}

.dlgBox__alert--success {
  background: #e9ffd9 url("../img/success.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #a6ca8a; 
}

.dlgBox__alert--success:hover {
  opacity: 0.8; 
}

.dlgBox__alert--warning {
  background: #fff8c4 url("../img/warning.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f2c779; 
}

.dlgBox__alert--warning:hover {
  opacity: 0.8; 
}

.dlgBox__alert--notice {
  background: #e3f7fc url("../img/info.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #8ed9f6; 
}

.dlgBox__alert--notice:hover {
  opacity: 0.8; 
}

Gulp file:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var bemLinter = require('postcss-bem-linter');

gulp.task('default', function() {
  return gulp.src('src/style.css')
    .pipe(postcss([bemLinter({ preset: 'bem' })]))
    .pipe(gulp.dest('dest/'));
});

The output:

C:\wamp\www\postcss>gulp
[21:15:42] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[21:15:42] Starting 'default'...
[21:15:42] Finished 'default' after 93 ms

I am expecting to see something like this:

postcss-bem-linter: C:\wamp\www\postcss\src\style.css:15:1: Invalid component selector ".dlgBox_alert.small span"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:20:1: Invalid component selector ".dlgBox_alert--error"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:25:1: Invalid component selector ".dlgBox_alert--error:hover"

-  in a similar style to this:
9:1 ⚠  Invalid component selector ".dlgBox_alert" [postcss-bem-linter]

The errors should only appear for those lines that are clearly incorrect - in this instance, the three lines above should show, as they are missing '_''s in the selector names. No other lines should show - I can get all of the lines to show, but *only* if I remove the . from the @define statement at the top of the CSS file. Does this make sense?

[davidtheclark]

Can you change the CSS file so that it has /** postcss-bem-linter: define dlgBox */ --- no period in front of dlgBox. Then retry --- if it's the same just let me know.

[alibby251]

No problem - it's similar to what I've had before:

C:\wamp\www\postcss>gulp [21:33:06] Using gulpfile C:\wamp\www\postcss\gulpfile.js [21:33:06] Starting 'default'... [21:33:07] gulp-postcss: style.css postcss-bem-linter: C:\wamp\www\postcss\src\style.css:16:1: Invalid component se lector ".dlgBox_alert.small span" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:21:1: Invalid component se lector ".dlgBox_alert--error" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:26:1: Invalid component se lector ".dlgBox_alert--error:hover" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:30:1: Invalid component se lector ".dlgBoxalert--success" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:35:1: Invalid component se lector ".dlgBoxalert--success:hover" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:39:1: Invalid component se lector ".dlgBoxalert--warning" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:44:1: Invalid component se lector ".dlgBoxalert--warning:hover" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:48:1: Invalid component se lector ".dlgBoxalert--notice" postcss-bem-linter: C:\wamp\www\postcss\src\style.css:53:1: Invalid component se lector ".dlgBoxalert--notice:hover" [21:33:07] Finished 'default' after 106 ms

This is the only time I can get it to show any errors - if I add the . back in, I don't get any errors showing, even though I know the code clearly has content that should error. Does this help?

[davidtheclark]

There's no question here: you should not have a . in front. So with a correct definition (no .), you are receiving errors for all the selectors. How does that differ from what you want to see?

[alibby251]

Thank you though for being so patient - I'm sure I must be driving you up the wall ;-)

OK - so in theory, that means that every single selector I have in my example is incorrect, right? I was only expecting to see issues for 3 rules (due to the missing '_' in each name), not all of them...

I had another look at my CSS (I honestly think I'm really losing the plot, chuckle!) - I don't think I had that right either, when comparing it to my HTML markup:

  <div class="content__alert">
    <div class="dlgBox content__alert--error"><span>error: </span>Write your error message here.</div>
    <div class="dlgBox content__alert--success"><span>success: </span>Write your success message here.</div>
    <div class="dlgBox content__alert--warning"><span>warning: </span>Write your warning message here.</div>
    <div class="dlgBox content__alert--notice"><span>notice: </span>Write your notice message here.</div>
  </div>

I've replaced .dlgBox in all except the first rule - this is still showing errors for every single selector, which to me suggests that I'm still missing something, and that this should be easier to configure than this, chuckle!

[davidtheclark]

@alibby251 : Sounds like you had to change your CSS file --- what is it now?

[alibby251]

This is what it is now:

/** postcss-bem-linter: define content */

.dlgBox {
  border-radius: 0.625rem;
  padding: 0.625rem 0.625rem 0.625rem 2.375rem;
  margin: 0.625rem;
  width: 14.5rem; }

.content__alert {
  font-family: Tahoma, Geneva, Arial, sans-serif;
  font-size: 0.6875rem;
  color: #555;
  border-radius: 0.625rem; 
}

.content_alert.small span {
  font-weight: bold;
  text-transform: uppercase; 
}

.content_alert--error {
  background: #ffecec url("../img/error.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f5aca6; 
}

.content_alert--error:hover {
  opacity: 0.8; 
}

.content__alert--success {
  background: #e9ffd9 url("../img/success.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #a6ca8a; 
}

.content__alert--success:hover {
  opacity: 0.8; 
}

.content__alert--warning {
  background: #fff8c4 url("../img/warning.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #f2c779; 
}

.content__alert--warning:hover {
  opacity: 0.8; 
}

.content__alert--notice {
  background: #e3f7fc url("../img/info.png") no-repeat 0.625rem 50%;
  border: 0.0625rem solid #8ed9f6; 
}

.content__alert--notice:hover {
  opacity: 0.8; 
}

[davidtheclark]

Ok. And please repost what the real output is, and what the expected output is --- because those will have changed based on these new selectors. I will then try to reproduce when I get home tonight.

[alibby251]

No problem - here's the real output:

C:\wamp\www\postcss>gulp
[22:40:01] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[22:40:01] Starting 'default'...
[22:40:01] gulp-postcss: style.css
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:3:1: Invalid component sel
ector ".dlgBox"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:16:1: Invalid component se
lector ".content_alert.small span"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:21:1: Invalid component se
lector ".content_alert--error"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:26:1: Invalid component se
lector ".content_alert--error:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:30:1: Invalid component se
lector ".content__alert--success"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:35:1: Invalid component se
lector ".content__alert--success:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:39:1: Invalid component se
lector ".content__alert--warning"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:44:1: Invalid component se
lector ".content__alert--warning:hover"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:48:1: Invalid component se
lector ".content__alert--notice"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:53:1: Invalid component se
lector ".content__alert--notice:hover"
[22:40:01] Finished 'default' after 107 ms

C:\wamp\www\postcss>

...and the expected output would be to only show these errors:

postcss-bem-linter: C:\wamp\www\postcss\src\style.css:16:1: Invalid component se
lector ".content_alert.small span"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:21:1: Invalid component se
lector ".content_alert--error"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:26:1: Invalid component se
lector ".content_alert--error:hover"

...ideally with the yellow triangle / formatting as per one of your previous posts.

Thanks for taking a look at it - anything you can do to set me straight would be appreciated!

[davidtheclark]

OK ... here it is: you're not using the standard BEM syntax that the plugin is checking for: https://en.bem.info/tools/bem/bem-naming/. There's no -- in standard BEM, just a lot of underscores.

You can write your own pattern to match your needs. Also, if there's some rigorous documentation around the standard that you want to use, you could open a new issue to add that as a new preset.

Also if you want to use postcss-reporter (which gives the formatting you had before), just change your gulpfile to this:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var bemLinter = require('postcss-bem-linter');
var reporter = require('postcss-reporter');

gulp.task('default', function() {
  return gulp.src('src/style.css')
    .pipe(postcss([
      bemLinter({ preset: 'bem' }),
      reporter({ clearMessage: true })
    ]))
    .pipe(gulp.dest('dest/'));
});

[alibby251]

Hi davidtheclark, Many thanks for your help - I think we are finally getting somewhere! ;-)

I've changed the --'s to appropriate underscores - it is now producing results as I expect to see them. I suspect the cause of the problem is that I've also been looking at how BEM is implemented when using something like SASS, and that this has confused matters. I still want to see if I can improve on the formatting of the formatter (i.e. just show the nice formatted output, and not the raw data as well), but that is another story...!

[davidtheclark]

Did you use the clearMessages option in postcss-reporter? That should mean that you get the nice formatting from postcss-reporter without the more raw version from gulp-postcss.

On Wed, Oct 28, 2015 at 2:33 PM, alibby251 notifications@github.com wrote:

Hi davidtheclark, Many thanks for your help - I think we are finally getting somewhere! ;-)

I've changed the --'s to appropriate underscores - it is now producing results as I expect to see them. I suspect the cause of the problem is that I've also been looking at how BEM is implemented when using something like SASS, and that this has confused matters. I still want to see if I can improve on the formatting of the formatter (i.e. just show the nice formatted output, and not the raw data as well), but that is another story...!

— Reply to this email directly or view it on GitHub https://github.com/postcss/postcss-bem-linter/issues/70#issuecomment-151999371 .

[alibby251]

Hi, I used the gulpfile example you posted back in your last message (thankyou for that tip!) - unfortunately it was showing both the nice formatting and raw data:

C:\wamp\www\postcss>gulp
[22:08:14] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[22:08:14] Starting 'default'...

src\style.css
2:1     ‼  Invalid component selector ".dlgBox" [postcss-bem-linter]
51:1    ‼  Invalid component selector "span" [postcss-bem-linter]

[22:08:14] gulp-postcss: style.css
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:2:1: Invalid 
component selector ".dlgBox"
postcss-bem-linter: C:\wamp\www\postcss\src\style.css:51:1: Invalid 
component selector "span"
[22:08:14] Finished 'default' after 105 ms

C:\wamp\www\postcss>

Did I miss something, or is there something else I need to install to not show the raw data? It's nice to know about it being there, but it would be great if it wasn't displayed.

On 28/10/2015 22:00, David Clark wrote:

Did you use the clearMessages option in postcss-reporter? That should mean that you get the nice formatting from postcss-reporter without the more raw version from gulp-postcss.

On Wed, Oct 28, 2015 at 2:33 PM, alibby251 notifications@github.com wrote:

Hi davidtheclark, Many thanks for your help - I think we are finally getting somewhere! ;-)

I've changed the --'s to appropriate underscores - it is now producing results as I expect to see them. I suspect the cause of the problem is that I've also been looking at how BEM is implemented when using something like SASS, and that this has confused matters. I still want to see if I can improve on the formatting of the formatter (i.e. just show the nice formatted output, and not the raw data as well), but that is another story...!

— Reply to this email directly or view it on GitHub

https://github.com/postcss/postcss-bem-linter/issues/70#issuecomment-151999371 .

— Reply to this email directly or view it on GitHub https://github.com/postcss/postcss-bem-linter/issues/70#issuecomment-152009669.

[davidtheclark]

I'm sorry, I just had a typo: clearMessage should be clearMessages (plural). That should do it for you.

[alibby251]

No problem - thanks for the update! I will try it out and let you know what happens... ;-)

On 29/10/2015 03:03, David Clark wrote:

I'm sorry, I just had a typo: |clearMessage| should be |clearMessages| (plural). That should do it for you.

— Reply to this email directly or view it on GitHub https://github.com/postcss/postcss-bem-linter/issues/70#issuecomment-152060668.

[alibby251]

Happy to report that the change fixed it - the output displayed is perfect:

C:\wamp\www\postcss>gulp
[19:09:23] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[19:09:23] Starting 'default'...

src\style.css
2:1     ‼  Invalid component selector ".dlgBox" [postcss-bem-linter]
51:1    ‼  Invalid component selector "span" [postcss-bem-linter]

[19:09:23] Finished 'default' after 95 ms

C:\wamp\www\postcss>

Thanks for your help in getting things sorted!