Stylelint - 确保类名前缀与文件夹名匹配答案

【问题标题】：Stylelint - Ensure class name prefix matches folder nameStylelint - 确保类名前缀与文件夹名匹配
【发布时间】：2017-09-05 16:29:46
【问题描述】：

我正在使用“selector-class-pattern”stylelint 规则。我使用的模式是强制执行ECSS 命名标准。规则如下所示：

"selector-class-pattern": ["^[a-z]([a-z0-9]){1,3}-[A-Z][a-zA-Z0-9]+(_[A-Z][a-zA-Z0-9]+)?(-([a-z0-9-]+)?[a-z0-9])?$", { "resolveNestedSelectors": true }]

ECSS 类名由 3 个部分组成（模块名、组件名、元素名），类似于.mod-Component_Element {}，其中mod 是模块名的缩写。

我的 SCSS 文件保存在组件文件夹中，因此文件夹结构如下所示，其中 app 是模块的名称。

app
-- component-name
  -- component-name.component.js
  -- component-name.component.scss

我想要一个 stylelint 规则来确保模块和类名的组件部分与它们所在的文件夹匹配。因此示例中保留的类名 component-name.component.scss文件将被限制为.app-ComponentName_ElementName {}，其中ElementName 是可选的，可以是任何东西。

我正在使用 Gulp 运行 stylelint：

gulp.task('css', () => {
  let processors = [
    // add postcss processors here
  ];
  return gulp.src([
    path.join(gconfig.rootDir, 'vars.style.scss'),
    path.join(gconfig.rootDir, 'style.scss'),
    path.join(gconfig.rootDir, gconfig.rootModule, '**/*.scss'),
  ])
    .pipe(stylelint({
      failAfterError: false,
      reporters: [ {formatter: 'string', console: true} ]
    }))
    .pipe(gif( debug, sourcemaps.init() ))
    .pipe(cssimport())
    .pipe(concat(`${gconfig.projectName}.style.css`))
    .pipe(scss().on('error', scss.logError))
    .pipe(postcss(processors))
    .pipe(gif( debug, sourcemaps.write() ))
    .pipe(gulp.dest(path.join(gconfig.outDir, 'css')))
});

我知道我可能需要为此编写一个插件，但想知道是否已经有类似这样的插件，或者是否有任何方法可以通过将文件名/文件夹传递给 stylelint来自 Gulp？

【问题讨论】：

标签： css stylelint

【解决方案1】：

我没有看到任何东西可以满足您的要求开箱即用

我见过的最接近的类似插件是 BEM 插件：

这些可以作为为您的 ECSS 用例编写一些插件的基本指南

【讨论】：