Thanks for your help.
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.
(&:>+~*\w)+
(?!-)+
(?!_)+
(?:([\w\s])*)
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
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.