sort JSX with when using bracket

[aeonthread]

case that work :

className="flex justify-center items-center w-full border h-16 hover:border-pink-900 hover:text-pink-900"

case-1 that doesn't work :

className={"flex justify-center items-center w-full border h-16 hover:border-pink-900 hover:text-pink-900"}

case-2 that doesn't work :

className={"flex justify-center items-center w-full border h-16 hover:border-pink-900 hover:text-pink-900" + REACT_STATE}

is it there any custom REGEX to fix this ? it's the best extension on VSCODE btw :+1:

[praveenperera]

(?:\bclassName\s*=\s*{?[\"\']([_a-zA-Z0-9\s\-\:\/]+)[\"\'])|(?:\btw\s*([_a-zA-Z0-9\s\-\:\/]*))

@aeonthread https://regex101.com/r/VaarqJ/1

[aeonthread]

thatnk you for reply so i added this to vscode config file but still doenst work

   "headwind.classRegex": {
        "typescriptreact": "(?:\bclassName\\s*=\\s*{?[\"\\']([_a-zA-Z0-9\\s\\-\\:\/]+)[\"\\'])|(?:\btw\\s*([_a-zA-Z0-9\\s\\-\\:\/]*))"
    },

Invalid escape character in string.jsonc(261) btw i scaped characters again because vscode was complaining about wrong scape so i changed your regex from : (?:\bclassName\s*=\s*{?[\"\']([_a-zA-Z0-9\s\-\:\/]+)[\"\'])|(?:\btw\s*([_a-zA-Z0-9\s\-\:\/]*)) to this : "(?:\bclassName\\s*=\\s*{?[\"\\']([_a-zA-Z0-9\\s\\-\\:\/]+)[\"\\'])|(?:\btw\\s*([_a-zA-Z0-9\\s\\-\\:\/]*))" but still doesnt't sort

[GavinRay97]

@aeonthread This should work from #85 :+1: (The only difference was a closing bracket I think, and on yours you just needed to double-escape the backslashes as well)

"headwind.classRegex": {
  "typescriptreact": "(?:\\b(?:class|className)?\\s*=\\s*{?[\\\"\\']([_a-zA-Z0-9\\s\\-\\:/]+)[\\\"\\']}?)"
}

[aeonthread]

@aeonthread This should work from #85 (The only difference was a closing bracket I think, and on yours you just needed to double-escape the backslashes as well)

"headwind.classRegex": {
  "typescriptreact": "(?:\\b(?:class|className)?\\s*=\\s*{?[\\\"\\']([_a-zA-Z0-9\\s\\-\\:/]+)[\\\"\\']}?)"
}

i just copy and paste your answer into the setting doesn't work, as soon as i remove curly brackets it get sort perfectly again so i think problem is still with these { } (curly brackets).

this doesnt work:

<div className={"bg-white flex w-full max-h-screen relative flex-col"} >

this works:

<div className="bg-white flex w-full max-h-screen relative flex-col" >

Update:

after closing and opening VSCODE the above Regex started to work, thank you; :+1:

[heybourn]

Closing as this has been solved