Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Quick way to override preset settings for block and modifiers?

See original GitHub issue

I tend to use a modified version of BEM, where the modifier is defined with -- rather than _. What’s the easiest way for me to add this change to my config?

I’m using PostCSS, and the stylelint plugin, so i’d need to override it via a settings object, but i’m finding the docs a little overwhelming when using a config object like below:

  var stylelintConfig = {
    "plugins": [
      "stylelint-selector-bem-pattern"
    ],
    "rules": {
      "block-no-empty": true,
      "color-no-invalid-hex": true,

      "selector-bem-pattern": {
        "preset": 'bem',
        "componentName": "[a-z]+"
      }
    }
  };

Issue Analytics

State:
Created 8 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

KingScootycommented, Jan 6, 2016

Ah, it didn’t occur to me that i could pass a function to componentSelectors! Completely overlooked that. I was trying with regex from the sample examples for initial and combined, which had me rather confused.

For anyone that comes across this thread:

  var stylelintConfig = {
    "plugins": [
      "stylelint-selector-bem-pattern"
    ],
    "rules": {
      "block-no-empty": true,
      "color-no-invalid-hex": true,

      "selector-bem-pattern": {
        "preset": 'bem',
        "componentName": "[a-z]+",
        componentSelectors: function(componentName) {
          var WORD = '[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*';
          var element = '(?:__' + WORD + ')?';
          var modifier = '(?:--' + WORD + '){0,2}';
          var attribute = '(?:\\[.+\\])?';
          return new RegExp('^\\.' + componentName + element + modifier + attribute + '$');
        }
      }
    }
  };

0reactions

handonamcommented, Dec 30, 2016

Sorry to dig this back up, but I tried this and kept getting Cannot read property 'length' of undefined when using mixin as a function.

/** @define some */
.some__rule {
  .mixinFunction()
}

using

module.exports = {
  "plugins": [
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    "plugin/selector-bem-pattern": {
      "preset": 'bem',
      "componentName": "[a-z]+",
      componentSelectors: function(componentName) {
        var WORD = '[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*';
        var element = '(?:__' + WORD + ')?';
        var modifier = '(?:--' + WORD + '){0,2}';
        var attribute = '(?:\\[.+\\])?';
        return new RegExp('^\\.' + componentName + element + modifier + attribute + '$');
      }
    },
 //...

any thoughts?