0

I have this Regex for detecting hyphenatedBEM in CSS files

^([\.\%]?[a-z]*[-]?[a-z0-9\-]*)(\.[a-z0-9\-]*)?(__[a-z0-9]*[-]?[a-z0-9\-]*)?(--[a-z0-9]*[-]?[a-z0-9\-]*)?(\:[a-z]*)*$

but I would also like it to detect CamelCase as well...

I need to do this because we are transitioning from hyphenatedBEM to camelCase

In short, how do I write a regex that checks for 

^([\.\%]?[a-z]*[-]?[a-z0-9\-]*)(\.[a-z0-9\-]*)?(__[a-z0-9]*[-]?[a-z0-9\-]*)?(--[a-z0-9]*[-]?[a-z0-9\-]*)?(\:[a-z]*)*$

or

\.[a-z][a-z0-9]*[A-Z][a-z0-9]*[A-Z][A-Z0-9]*[a-z][A-Za-z0-9]*

If neither validate then it errors/returns false

I would be validating against CSS like below and both should validate as fine...

.error__404 { ...SOME CSS CODE... }   --> this is correct
.error__404--red { ...SOME CSS CODE... }   --> this is correct
.userImage { ...SOME CSS CODE...}   --> this is correct
.this-is-not-correct { ...SOME CSS CODE...}   --> this is not correct

Any help would be greatly appreciated...

Takuhii
  • 819
  • 2
  • 8
  • 26
  • im no expert in regex, but can't you just combine both regexes in a `[]`? – Brian H. May 11 '17 at 10:29
  • Input and expected output...? – SamWhan May 11 '17 at 10:32
  • input would be a SCSS file containing **.block__element--modifier** and another SCSS file containing **.camelCase** and BOTH files validating – Takuhii May 11 '17 at 10:36
  • I tried to combine in square brackets, but I get Invalid regular expression: Unmatched ')'... Which is odd as all the brackets match up :/ – Takuhii May 11 '17 at 10:39
  • @Takuhii can you add some example strings to be matched and some others not to be matched? – Naveed S May 11 '17 at 10:58
  • The two strings I want to use are above. But I would validate against this; `.error__404 { ...SOME CSS CODE... }` `.error__404--red { ...SOME CSS CODE... }` `.userImage { ...SOME CSS CODE...}` – Takuhii May 11 '17 at 11:17
  • My thoughts are that I can combine them like this? `^([\.\%]?[a-z]*[-]?[a-z0-9\-]*)(\.[a-z0-9\-]*)?(__[a-z0-9]*[-]?[a-z0-9\-]*)?(--[a-z0-9]*[-]?[a-z0-9\-]*)?(\:[a-z]*)|([\.\%]?[a-z][a-z0-9]*[A-Z][a-z0-9]*[A-Z][A-Z0-9]*[a-z][A-Za-z0-9])$` But this doesn't appear to be the case... – Takuhii May 11 '17 at 12:42
  • Your regex seems to ignore `id` css elements, which start with `#`. Also the version of hyphenatedBEM i know permits `-` in class names, It seems you don't want to allow it at all? Could you give more negative examples. Also your camel case detection- provide positive and negative examples – Xyzk May 11 '17 at 14:57
  • @Takuhii why is the last one not correct? on a quick look your regex seems to accept `.this-is-not-correct` as well. – Naveed S May 12 '17 at 05:32
  • @NaveedS becuase .this-is-not-correct is wrong. I need it to only accept BEM... .BLOCK__ELEMENT--MODIFIER or .camelCase – Takuhii May 12 '17 at 10:56

0 Answers0