@zeix/stylelint-config

Zeix Stylelint config optimized for SCSS and Prettier.

• extends: stylelint-config-standard-scss, stylelint-config-prettier
• plugins: stylelint-order

To see the rules that this config uses, please read the config itself.

Installation

npm i @zeix/stylelint-config --save-dev

Usage

Create a stylelint.config.js file and add an extends key.

module.exports = {
  extends: ["@zeix/stylelint-config"],
};

Documentation for the extends option

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to turn off the scss/at-if-no-null rule:

module.exports = {
  extends: ["@zeix/stylelint-config"],
  rules: {
    "scss/at-if-no-null": null,
  },
};

BEM

Projects using the BEM methodology may add the following rule to check selectors accordingly:

module.exports = {
  extends: ["@zeix/stylelint-config"],
  rules: {
    "selector-class-pattern": [
      "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
      {
        resolveNestedSelectors: true,
      },
    ],
  },
};