UPDATE: I've come to the conclusion that RegExp is not a viable option for this particular problem.

Thanks for your help.

The problem

TLDR: I want to create a RegExp that can scan all nested SCSS selectors, and match everything that is not kebab-case (with the exception of pseudo selectors first-child, last-child, etc).

I am looking for a RegExp to use in combination with the selected-nested-patterns from stylelint.

I want to forbid any kebab case nested selectors in our SCSS Modules.

Unfortunately I could not manage to get a negative lookahead working.

Requirements:

• everything that is (&:> ~*\w)
• not followed by one or more hyphens (?!-)
• not followed by one or more underscore (?!_)
• followed by 0 or more white space or character (?:([\w\s])*)
• accept CSS pseudo selectors in kebab case (first-child, last-child)

class // YES
class-class // NO
class--class // NO
somethingSomething // YES
&Class // YES
&-class // NO
&--class // NO
&.class // YES
&__class // NO
input > input // YES
& > & // YES
~ class // YES
> div // YES
a,      c // YES
&.disabled:disabled:hover // YES
& > div:first-child // YES
&:last-child // YES

CodePudding user response：

I'm not really sure to understand what you're looking for but it seems that the only chars you don't want is the hyphens and underscores. So we could actually use a regex as simple as ^[^_-] $ to say you want to macht strings only containing "not underscores or hyphens".

But we could also do it the other way, by listing only the chars you want to match with ^[&.a-zA-Z>: ~,\h] $.

You can test it here: https://regex101.com/r/LSiVju/1

• ^ asserts position at start of a line.

• Match a single character present in the list: [&.a-zA-Z>: ~,\h]

  -\h is a horizontal space. You could replace it by \s which also includes new lines.

  • a-z and A-Z are the ranges of alphabetical chars.

• is to say we want the char one and several times.

• $ asserts position at the end of the string.

• g modifier: global. All matches (don't return after first match)

• m modifier: multi line. Causes ^ and $ to match the begin/end of each line instead of begin/end of string. This is just for the example with your list of cases. You won't use the m modifier.

But I don't think it's as simple as that because we can also have digits (which are not mentionned in your question).

What about these?

h1
&.class2
> one4you

If you want to match digits too then it would become ^[&.a-zA-Z0-9>: ~,\h] $

And we also know that the class .2lines isn't a valid class since you cannot start with a digit. So the regex might get much more complex because .col-2 or .col-4 are typicall valid Bootstrap CSS classes where the digits are not at the beginning. We ideally should not match &.4you but match &.col3 or &.col-3 if you accept hyphens in CSS classes like almost all the big CSS frameworks.