'Hyphenated BEM' regex not behaving as expected

[davidpmccormick]

I'm trying to emulate the 'hyphenated BEM' selector format from scss-lint, but the regex I've got doesn't work in the context of the plugin (I'm fairly sure the regex itself is sound – it behaves as expected if I run it through e.g. regexper

Here's my componentSelectors property:

"componentSelectors": {
  "initial": "^\\.{componentName}(((__|--)(([a-z0-9]+(?!-$)-?)+))+)?"
}

If I've defined a article-intro, then I would expect e.g. article-intro__heading or article-intro--primary to be good matches, and article-intro-_ to be an error, but the linter isn't currently complaining at all about .article-intro-_. Any ideas?

[davidpmccormick]

Ignore me – not only did I intent to post this on the Atom plugin issues, it appears my problems are solved by adding a $ to the end of my regex.

[karmasalad]

@davidpmccormick Can you share your configuration setup for hyphenated BEM selector format? I'm having trouble getting it to work the same as it does in scss-lint.

[davidpmccormick]

@karmasalad I've written up what I'm currently going with, here: http://www.sumnoise.com/2016/05/26/stylelint-hyphenated-bem-config/

[coreybruyere]

@karmasalad @davidpmccormick - I'm getting 'Selector should be written in lowercase with hyphens' when using the same config.

Using this style of Scss (prefixed namespace, hyphenated BEM):

//* @define l-flag; weak */
.l-flag {
  display: table;
  width: 100%;
}

.l-flag__image,
.l-flag__body {
  display: table-cell;
  vertical-align: middle;

  .l-flag--top & {
    vertical-align: top;
  }

  .l-flag--bottom & {
    vertical-align: bottom;
  }
}

.l-flag__image {
  padding-right: u(rem(10));

  > * {
    display: block;
    max-width: none;
  }

  .l-flag--rev & {
    padding-right: 0;
    padding-left: u(rem(10));
  }
}

What do I need to edit using this config in stylelintrc.json?

    "plugin/selector-bem-pattern": {
      "preset": "bem",
      "presetOptions": {
        "namespace": "[clmo]"
      },
      "componentName": "(([a-z0-9]+(?!-$)-?)+)",
      "componentSelectors": {
        "initial": "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$"
      },
      "ignoreSelectors": [
        ".*\\.no-js.*",
        ".*\\.js-.*",
        ".*\\.lt-ie.*",
        ".*\\.is-.*"
      ],
      "utilitySelectors": "^\\.u-[a-z]+$"
    },

[coreybruyere]

Ok, ignore my last comment. It wasn't bem-linter giving me that error. I'm extending another config with a rule assigned to "selector-class-pattern". I used this to override that rule: "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"