sass - 如何使用 stylelint 来检查 Harry Robert 的 BEM 约定？

Question

PostCSS BEM Linter插件需求component definition对于每个 block ，这在遗留项目中是一件耗时的事情。

有没有办法使用 stylelint检查类模式并在项目的所有样式表(在我的例子中为 .scss)中显示错误，而不需要在每个文件/ block 中定义组件？

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

.block {}
.block__element {}
.block--modifier {}

Answer 1

我有一个来自 @jeddy3 答案的工作示例。
这是我的 stylelint.config.js

的副本

我们重写取自 https://github.com/postcss/postcss-bem-linter/blob/master/lib/preset-patterns.js 的 bemSelector() 函数。

我们通过更改 const 修饰符 来匹配，使用两个破折号样式而不是默认的 BEM https://en.bem.info/methodology/naming-convention/#two-dashes-style

/**
 * @param {String} block
 * @param {Object} [presetOptions]
 * @param {String} [presetOptions.namespace]
 * @returns {RegExp}
 */
const bemSelector = (block, presetOptions) => {
  const ns = (presetOptions && presetOptions.namespace) ? `${presetOptions.namespace}-` : '';
  const WORD = '[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*';
  const element = `(?:__${WORD})?`;
  const modifier = `(?:--${WORD}){0,2}`;
  const attribute = '(?:\\[.+\\])?';
  return new RegExp(`^\\.${ns}${block}${element}${modifier}${attribute}$`);
}

module.exports = {
  extends: 'stylelint-config-recommended-scss',
  plugins: [
    'stylelint-selector-bem-pattern'
  ],
  rules: {
    'plugin/selector-bem-pattern': {
      preset: 'bem',
      componentSelectors: bemSelector
    }
  }
}