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

我想要一个样式规则来确保模块和类名称的组成部分与它们所在的文件夹匹配。所以类名保存在示例中 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插件：

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

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

1 个答案: