'@typescript-eslint/naming-convention ignore object inside a classname

tl:dr, why is this REGEX incorrect : classNames.*(.*{(?:.|\n)*?}) although it work in regex101 ?

I am using typescript with eslint. I setup some naming convention to variables type using @typescript-eslint/naming-convention. One of them is for object types, I would like the key of object to always be camelCase.

For this I simply use the rule

{
            "selector": "objectLiteralProperty",
            "format": ["camelCase"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow"
          },

With the above rule

this object is OK, because it is a plain object

  const test = {
    'myName': "Bob"
  };

this object is NOT OK

  const test = {
    'my-name': "Bob"
  };

Now, I am trying to make an exception for this rule. Since I am using react, sometimes I need to create dynamic class name, and I need to pass object that use a different convention for the classnames : 'w-full py-1'

I would like to allow this and ignore the camelCase only if the object is wrapped around a method classNames

this object is still NOT OK

  const test = {
    'my-name': "Bob"
  };

But this object is ok, because wrapped around classNames({ })

 className={classNames({
     'w-full py-1': true,
     'bg-blue-1/10': open,
 })}

I tried to setup my eslint config like this to allow any format for anything matching regex pattern like this : classNames.*(.*{(?:.|\n)*?})

          {
            "selector": "objectLiteralProperty",
            "format": ["camelCase"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow"
          },{
            "selector": "objectLiteralProperty",
            "format": null,
            "filter": {
              "regex": "classNames.*(.*{(?:.|\n)*?})",
              "match": true
            }
          },

But even thos this regex work on Regex 101 I get an error in eslint with

Invalid regular expression: /classNames.(.{(?:.| )*?})/: Lone quantifier brackets

What is wrong with it ?

EDIT

I escaped the { and } like this : classNames.*(.*\{(?:.|\n)*?\}) but when added to Eslint I get

Invalid escape character in string.

so I moved to classNames.*(.*\\{(?:.|\n)*?\\}) and now it still the same problem where it matches everything

regexeslint


Solution 1:[1]

Problem might be that you didn't escape the parenthesis () that are part of the string and not the regex pattern

Try this: classNames.*\(.*\{(?:.|\n)*?\}\) if eslint doesn't like the single \ then

try this:classNames.*\\(.*\\{(?:.|\n)*?\\}\\)

Edit:More attempts

Demo /(?<=\{classNames.*\(\{(?:.|\n)*').*(?=')/g

or /(?<=\{classNames.*\(\{(?:.|\\n)*').*(?=')/g

This regex matches the object names that are surrounded by 'classNames'.

Solution 2:[2]

I believe the problem is the \n. As you can see in the error message, it's been removed from the regex. I think if you escape it, it should work fine:

"classNames.*(.*{(?:.|\\n)*?})"

I hope that does it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 isaactfa

Related Questions