Feature: automate file-name definititions

This really perhaps really a feature-request for stylelint-selector-bem-pattern, but I’ll leave it here since that module mostly wraps this one.

I know explicit definitions are great, and they work for many people, but… I’m lazy. I would like to enforce our rules BEM rules.

Let’s say for an example project we standardize on SUIT, and mandate it into our component file-structure. File-structure looks something like:

components/DogCard/DogCard.js
components/DogCard/DogCard.css
components/DogList/DogList.js
components/DogList/DogList.css

So, we setup our config

"rules": {
  "plugin/selector-bem-pattern": {
    "preset": "suit"
  }
}

Now, we have something like 50 components to add a “define” block too to enforce our pattern and manually enforce new components include the define.

This is okay, but if we just implicit the define from the filename.

"rules": {
  "plugin/selector-bem-pattern": {
    "preset": "suit",
    "implyFilenameDefine": true
  }
}

Now, when components/DogCard/DogCard.css is passed to the linter we imply

/** @define DogCard */

If someone wants to add a utility lib, no problem, they’ll get a warning can use utilities to opt-out.

/** @define utilities */

I’m sure some work will need to be done to stylelint-selector-bem-pattern as well, but it probably starts here.

//cc @davidtheclark

[simonsmith]

I like this. I think opt-in is a nice route as it’s the least disruptive for existing users.

So with components we’d use the filename as the definition, and with utilities if the glob matched then we’d assume it wanted to be linted?

[simonsmith]

I think the goal here is just to use the filename for componentName as that is the part that is always required manually with a @define - https://github.com/postcss/postcss-bem-linter#componentname

The part after is componentSelectors and that would need to remain a regex. I presume on most projects people use the default SUIT or BEM presets for the part after componentName.