https://github.com/simonsmith/stylelint-selector-bem-pattern

Stylelint plugin that incorporates postcss-bem-linter
https://github.com/simonsmith/stylelint-selector-bem-pattern

Last synced: about 2 months ago
JSON representation

Stylelint plugin that incorporates postcss-bem-linter

• Host: GitHub
• URL: https://github.com/simonsmith/stylelint-selector-bem-pattern
• Owner: simonsmith
• License: mit
• Created: 2015-10-31T22:49:00.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T02:54:04.000Z (5 months ago)
• Last Synced: 2024-05-18T16:46:11.257Z (4 months ago)
• Language: JavaScript
• Size: 634 KB
• Stars: 241
• Watchers: 6
• Forks: 13
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stylelint-selector-bem-pattern

[![NPM version](http://img.shields.io/npm/v/stylelint-selector-bem-pattern.svg)](https://www.npmjs.com/package/stylelint-selector-bem-pattern) [![Build Status](https://github.com/simonsmith/stylelint-selector-bem-pattern/actions/workflows/ci.yml/badge.svg)](https://github.com/simonsmith/stylelint-selector-bem-pattern/actions/workflows/ci.yml)

A [stylelint](https://github.com/stylelint/stylelint) plugin that incorporates [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter).

To learn more about postcss-bem-linter, please read [that module's documentation](https://github.com/postcss/postcss-bem-linter).

## 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:

```js

// .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](https://github.com/postcss/postcss-bem-linter).

Keep in mind that if your stylelint config is JSON you will have to use strings to

specify your selector patterns (as above).