How to make SCSS linter accept both snake lowercase and hyphenated lowercase as selectors naming convention

Question

My SCSS linter (.scss-lint.yml) is currently set to accept hyphenated_lowercase CSS selectors.

SelectorFormat:
  enabled: true
  convention: hyphenated_lowercase

Recently I've added couple of external widgets which are using snake_case. I need to target them within my SCSS files as well. The best solution would probably be to accept both snake case and hyphenated, both in lowercase. How can I achieve that?

I know I could also exclude the file containing those non-compliant rules, but I'm trying to avoid it for now.

Answer 1

I found in the official documentation that you can use a regular expression for selectors matching, therefore here's the solution:

SelectorFormat:
  enabled: true
  convention: ^[a-z\d_-]+$

Hope it will help others too.