Конфиг stylelint

.stylelintrc.js

Необходимые библиотеки:

npm i -D stylelint stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recess-order stylelint-config-css-modules stylelint-prettier stylelint-config-rational-order-fix stylelint-declaration-block-no-ignored-properties stylelint-order stylelint-config-rational-order-fix

Конфиг файл:

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss',
    'stylelint-config-recess-order', // Extends rules for enforcing a consistent ordering of CSS properties
    'stylelint-config-css-modules',
    'stylelint-prettier/recommended',
    'stylelint-config-rational-order-fix', // Extends rules for rational property order
  ],
  plugins: [
    'stylelint-declaration-block-no-ignored-properties',
    'stylelint-order',
    'stylelint-prettier',
    'stylelint-config-rational-order-fix/plugin',
  ],
  rules: {
    'prettier/prettier': true,
    'plugin/declaration-block-no-ignored-properties': true,
    'block-no-empty': null,
    'no-descending-specificity': null, // In complex projects or when using third-party libraries or frameworks, it's necessary to use selectors with descending specificity.
    'scss/at-extend-no-missing-placeholder': null,
    'selector-type-no-unknown': null,
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global'],
      },
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['input-placeholder'],
      },
    ],
    'order/properties-order': [],
    'plugin/rational-order': [
      true,
      {
        'border-in-box-model': false,
        'empty-line-between-groups': true,
      },
    ],
    'color-named': 'never',
    'declaration-empty-line-before': null,
    'selector-class-pattern': [
      '^[a-z^Mui][a-zA-Z0-9-]*(_{2})*[a-zA-Z0-9-]*$',
      {
        message: 'Expected class selector to be lower-camel-case',
      },
    ],
    'selector-id-pattern': [
      '^[a-z]*[a-zA-Z0-9-]*(_{2})*[a-zA-Z0-9-]*$',
      {
        message: 'Expected id selector to be lower-camel-case',
      },
    ],
    'max-nesting-depth': [4, { ignore: ['pseudo-classes'] }],
  },
};