Feature: automate file-name definititions

[robcolburn]

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

[davidtheclark]

What if user wants to almost always implyFilenameDefine but exempt some files?

[robcolburn]

@davidtheclark,
As I'm re-reading the spec, I realized that I completely misunderstood the way utilities works ☺️ . I though utilities was a general opt-out, but it looks like utilities must conform the a pre-defined regex - makes sense! We'll definitely want an opt-out mechanism for things like variables, mixins, fonts, and normalizers… Perhaps we can support opt-in or opt-out glob? Or, maybe both?

1. Opt-in glob

preset: "suit",
implicitComponents: "components/**/*.css"
implicitUtilities: "css/util/*.css"

Means: Capture everything under "components" folder as define name. And, capture everything under "css/util" as "utilities".

1. Opt-out

preset: "suit",
implicitComponents: true,
explicitComponents: "css/**/*.css,vendor/**/*.css"

Means: capture everything as define name. Except thing in "css" or "vendor" folders.

[davidtheclark]

Good idea. I like the simple option names and the glob idea.

I'd suggest arrays of globs instead of globs with commas in them: ["css/**/*.css", "vendor/**/*.css"] instead of "css/**/*.css,vendor/**/*.css".

Open to a PR implementing this!

[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?

[robcolburn]

@simonsmith,
I'll amend my request because utilities have their own special behavior - their selector need to match a predefined regex.

[timkraut]

This would be an awesome feature!

[simonsmith]

I'd be happy to start looking at this.

Components make sense but I'm still unsure on utilities:

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

Can you expand on that @robcolburn?

I suppose we could:

• Still require the /** @define utilities */ for utility files
• Check each globbed file first to see if it is a utility (based on the regex) and if so treat it as such. If not then assume it is component and use the file name to check the selectors

Thoughts?

[timkraut]

@simonsmith Sounds good but I'm not sure if using the file name to check the selectors covers all cases. Let's say, I want to enforce a dash-separated naming-pattern (my-component instead of myComponent). If I got this right, using the file name to check the selector doesn't cover subcomponents/modifiers.

Example (file name: _notification-box.scss):

.notificationBox { // Would be covered (and throw an exception)
  &--errorMessage { // Should throw an exception
    ...
  }

  &__closeButton { // Should throw an exception
    ...
  }
}

The corrected example would be:

.notification-box {
  &--error-message {
    ...
  }

  &__close-button {
    ...
  }
}

I hope I'm not missing something!

[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.

[simonsmith]

Thoughts on weak mode?

I was thinking a single /** weak */ could be added to the top of the file.

[seamusleahy]

I created a pull request for adding the first half of the functionality defined here: Add implicitComponents and implicitUtilities option #93.

[simonsmith]

@seamusleahy Nice one!

[robcolburn]

👍 Changed teams, and haven't touched CSS in a while. Awesome to see someone take this on. Nice job!