1. stylelint-selector-bem-pattern
A stylelint plugin that harnesses the power of postcss-bem-linter
stylelint-selector-bem-pattern
Package: stylelint-selector-bem-pattern
Created by: simonsmith
Last modified: Tue, 27 Feb 2024 21:10:58 GMT
Version: 4.0.0
License: MIT
Downloads: 401,698
Repository: https://github.com/simonsmith/stylelint-selector-bem-pattern

Install

npm install stylelint-selector-bem-pattern
yarn add stylelint-selector-bem-pattern

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

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code