Extend kebab-case regex to also allow double underscore separator

The default regex used by Stylelint to check CSS class names is

^([a-z][a-z0-9]*)(-[a-z0-9]+)*$

This allows kebab-cased names such as foo-bar. I want to change this to also allow a double-underscore to be used as a separator within the name, e.g. all of the following should be considered valid

• foo-bar
• v-list-item__prepend
• v-list-item__spacer

In other words, a double-underscore separator is allowed but not required. I expected the following to work, but it doesn’t

^([a-z][a-z0-9]*)(__)?(-[a-z0-9]+)*$

>Solution :

The issue with your regex is that it only allows for a single optional double-underscore after the initial word. After that, only the kebab-case pattern is allowed.

This could work: ^([a-z][a-z0-9]*)(__[a-z0-9]+|-{1}[a-z0-9]+)*$