Search code examples
regexsassatom-editorscss-lintsass-lint

Atom/Sass-lint: Regex for sass-lint.yml class-name

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.

Solution

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