Currently, I am utilizing the "selector-class-pattern" rule from stylelint. My chosen pattern enforces the ECSS naming convention. The specific rule configuration is outlined below:
"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 typically consists of 3 parts (module name, component name, element name) and follows a structure like .mod-Component_Element {}, with mod being an abbreviation for the module name.
Within my project, SCSS files are organized within component folders, as depicted in the directory structure below where app represents the module name.
app
-- component-name
-- component-name.component.js
-- component-name.component.scss
I intend to configure a stylelint rule that ensures both the module and component names within class declarations match the respective folder they reside in. This means that class names found in the component-name.component.scss file should adhere to the format
.app-ComponentName_ElementName {}ElementName.
For executing stylelint, I have implemented Gulp as part of my workflow:
gulp.task('css', () => {
let processors = [
// insert 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')))
});
While I anticipate the need to create a custom plugin for this specific requirement, I am curious if there exists a plugin already available or alternative solutions such as passing the file name/folder information to stylelint from Gulp.