stylelint-selector-bem-pattern

4.0.0 • Public • Published

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

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).

Package Sidebar

Install

npm i stylelint-selector-bem-pattern

Weekly Downloads

92,160

Version

4.0.0

License

MIT

Unpacked Size

6.69 kB

Total Files

4

Last publish

Collaborators

  • davidtheclark
  • alecrust
  • simonsmith