1

I have a sass-lint.yml file with the following rule:

class-name-format:
    - 1
    - convention: '^([a-zA-Z]*)(__[a-z]+)?(-[a-z]*)*(--[a-z]+)?$'

The regex can be checked here: https://regex101.com/r/SsVde6/2

Unfortunately I can't get it to work properly.

In the regex tester you see what kind of things I want to include. The first part of the Class name can be PascalCase from then on BEMified (BEM) kebabcase (e.g.: this-is-kebab-case – all lowercase with dashes in between)

A very common pattern would look like: ComponentName__element-name--modifier-name

Quite a few things work already, but I would like to evaluate nested BEM selectors in my scss files as well:

&__burgerCross {…} or &__burger_cross or &__burger__cross for example should be evaluated as false. This would have to be &__burger-cross

But I don't really know how to handle the nested rules.

Any help on sass-lint and regex is very welcome.

Merc
  • 4,241
  • 8
  • 52
  • 81
  • 1
    Do you assume everybody knows what "BEMified kebab-case" is? A link reference here and there could not hurt. – wp78de Apr 19 '18 at 07:45
  • 1
    [`^([a-zA-Z]+|__[a-z]+)((?:__|-|--|)[a-zA-Z]+)*(__|--)?`](https://regex101.com/r/SsVde6/3) is this what you want? – wp78de Apr 19 '18 at 07:45
  • @wp78de you are right! – Merc Apr 20 '18 at 02:28
  • @wp78de I tried your suggestion, but I don't want all the PascalCase after the first word: In the meantime I came up with this: https://regex101.com/r/PBNJvx/3 It works in almost all cases, unfortunately it also includes some which we don't want to allow. Anyway thanks for your help – Merc Apr 20 '18 at 02:34

1 Answers1

0

The thing I wanted was

I would like to evaluate nested BEM selectors in my scss files as well:

My regex was actually already highlighting all the wanted cases and the not wanted were not matched. The problem was, that the linter cannot lint nested BEM selectors. :(. Read about it here: https://github.com/brigade/scss-lint/issues/339#issuecomment-72404341

So not much we can do here.

Merc
  • 4,241
  • 8
  • 52
  • 81