Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 6 hours 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 (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T02:54:04.000Z (7 months ago)
- Last Synced: 2024-05-18T16:46:11.257Z (6 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).