css - Stylelint - 确保类名称前缀与文件夹名称匹配

Question

我正在使用“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？

Answer 1

我还没有看到任何东西可以开箱即用

我见过的最相似的插件是 BEM 插件:

• > https://github.com/postcss/postcss-bem-linter
• > https://github.com/davidtheclark/stylelint-selector-bem-pattern

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