postcss / postcss-bem-linter

A BEM linter for postcss
MIT License
572 stars 35 forks source link

Add support for different types of components #129

Open OriR opened 6 years ago

OriR commented 6 years ago

If I understand the docs correctly then componentName may refer to either (I'm using BEM terminology here) block, element or modifier. What I have is kind of a different style than the classic BEM where we write MultiNamedBlock__contained-element--with-modifier.

This means that I can't really differentiate between blocks, elements or modifiers. Event if I supply something like this (?:block_pattern|element_pattern|modifier_pattern) it might be able to match invalid-block-name__WithElement--AndModifier in initial or combined even though we consider it invalid.

I'm proposing a way to supply different patterns that can be interpolated in initial and combined. Something like this:

{
  componentName: {
    block: "block-pattern",
    element: "element-pattern",
    modifier: "modifier-pattern"
  },
  componentSelectors: {
    initial: "{componentName.block}__{componentName.element}--{componentName.modifier}"
  }
}

The structure of componentName can be dynamic to support for SUIT terminology, unless there's a way to categorize both of them in a way that makes sense to everyone 😃

Again, if there's a way to achieve this right now and I'm missing something I'd be happy to know!