Skip to content

simonsmith/stylelint-selector-bem-pattern

Repository files navigation

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

About

Stylelint plugin that incorporates postcss-bem-linter

Resources

License

Stars

Watchers

Forks

Packages

No packages published