Stylelint - Ensure class name prefix matches folder name

Question

I am using the "selector-class-pattern" stylelint rule. The pattern I am using is to enforce the ECSS naming standard. The rule looks like this:

"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 }]

An ECSS class name uses 3 parts (module name, component name, element name) and looks something like .mod-Component_Element {} where mod is an abbreviation of the module name.

My SCSS files are kept in component folders, so the folder structure looks like the below, where app is the name of the module.

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

I would like a stylelint rule to ensure that the module and the component part of class names match the folder they are in. So the class names kept in the example component-name.component.scss file would be restricted to .app-ComponentName_ElementName {} where ElementName is optional and can be anything.

I am using Gulp to run 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')))
});

I understand I will probably need to write a plugin for this, but wondered if there is already a plugin for something like this out there, or if there are any ways to do it maybe by passing the file name/folder to stylelint from Gulp?

Answer 1

I've not seen anything that does what you're asking out of the box

The closest similar plugins I've seen would be the BEM plugins:

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

These might work as a base guide on writing some plugins for your ECSS use case