0

I have an Angular project in which BEM CSS methodology is being used. I have stylelint set up to lint my CSS. I also have incorporated the stylelint-selector-bem-pattern plugin to lint my selectors to ensure they adhere to a custom BEM pattern. Note that stylelint-selector-bem-pattern is a wrapper around postcss-bem-linter, so it has all the same customisable options.

The problem I have is that I need to add a particular pattern to the ignoreSelectors list, but I can't get it work.

I need to ignore the use of *:last-child, as per below:

.example__selector *:last-child.

My config looks like this:

"plugin/selector-bem-pattern": {
  "implicitComponents": "projects/test/src/lib/**/*.scss",
  "componentSelectors": {
    "initial": "^.test-([-?a-z]|[\\-\\-?a-z])+"
  },
  "ignoreSelectors" : [
    "^.+:last-child"
  ]
  "ignoreCustomProperties": [
    "^\\-\\-[-?a-z]"
  ]
}

Using RexExr, I can see that the RegEx ^.+:last-child matches the text.

However, I still get this error when I run stylelint:

6:3  ✖  Invalid component selector ".example__selector *:last-child"  plugin/selector-bem-pattern
shrewdbeans
  • 11,971
  • 23
  • 69
  • 115
  • It would be good also to report a bug may to the source project here by opening a new issue https://github.com/postcss/postcss-bem-linter/issues – Alan M Jan 17 '20 at 14:29
  • Thanks, if it's not something I've got wrong in the config I'll report it as a bug. – shrewdbeans Jan 17 '20 at 15:18

0 Answers0