ssb

stylelint-selector-bem-pattern

Stylelint plugin that incorporates postcss-bem-linter

Showing:

Popularity

Downloads/wk

52.1K

GitHub Stars

200

Maintenance

Last Commit

2mos ago

Contributors

9

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

stylelint-selector-bem-pattern

NPM version Build Status

A stylelint plugin that incorporates postcss-bem-linter.

To learn more about postcss-bem-linter, please read that module's documentation.

Installation

npm install stylelint-selector-bem-pattern

Be warned: v0.2.0+ is only compatible with stylelint v3+. For earlier version of stylelint, use earlier versions of this.

Usage

Add it to your stylelint config plugins array, then add "plugin/selector-bem-pattern" to your rules, specifying your postcss-bem-linter settings as the primary option.

Even though postcss-bem-linter has the default setting of { preset: 'suit' }, this plugin has no default setting: if you want to use the SUIT preset, you must pass { preset: 'suit' }, and the rule will not work if you do not pass a primary option object.

Like so:

// .stylelintrc
{
  "plugins": [
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    // ...
    "plugin/selector-bem-pattern": {
      "componentName": "[A-Z]+",
      "componentSelectors": {
        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
        "combined": "^\\.combined-{componentName}-[a-z]+$"
      },
      "utilitySelectors": "^\\.util-[a-z]+$"
    },
    // ...
  }
}

For more examples of postcss-bem-linter configuration possibilities, please read that module's documentation. Keep in mind that if your stylelint config is JSON you will have to use strings to specify your selector patterns (as above).

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100