Как использовать ворс для соглашения BEM Гарри Роберта с помощью stylelint?

Для плагина PostCSS BEM Linter требуется определение компонента для каждого блока, что требует много времени в устаревшем проекте.

Есть ли способ использовать stylelint для проверки шаблона классов и отображения ошибок во всех таблицах стилей (в моем случае .scss) проекта без необходимости определения компонента в каждом файле/блоке?

https://csswizardry.com/2013/01/ Синтаксис синтаксиса ума

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

sass postcss stylelint bem
person Jitendra Vyas    schedule 07.04.2017    source источник
comment
Пробовали ли вы github.com/davidtheclark/stylelint-selector-bem-pattern ?   -  person jwfrench    schedule 27.05.2017

Ответы (2)


arrow_upward
2
arrow_downward

У меня есть рабочий пример, следующий из ответа @jeddy3.
Это копия моего stylelint.config.js

Мы переопределяем функцию bemSelector(), взятую из https://github.com/postcss/postcss-bem-linter/blob/master/lib/preset-patterns.js

Мы используем стиль с двумя тире вместо БЭМ по умолчанию, изменив const modifier на соответствие 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
    }
  }
}
person minlare    schedule 12.11.2018

arrow_upward
1
arrow_downward

Вы можете использовать правило stylelint selector-class-pattern, чтобы применить шаблон для селекторов классов. используя регулярное выражение.

Однако, если вы пишете CSS, похожий на БЭМ, тогда stylelint-selector-bem-pattern, который обертывает PostCSS BEM Linter более мощный, поскольку понимает концепцию компонентов, элементов и модификаторов. и полезные классы.

Существует опция для неявного определения компонентов на основе их имен файлов, устраняя необходимость в определениях компонентов внутри каждого файла.

person jeddy3    schedule 12.06.2017