The classRegex doesn't seem to work

[bitabs]

Describe the bug I'm trying to modify the regex so that the sorting works outside of className=.... For example, I want to modify the following regex:

"headwind.classRegex": {
    "css": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
    "html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
    "javascript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
    "javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
    "typescript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
    "typescriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
}

so that the sorting can work for situations like this:

import c from 'clsx'

const container = c(`w-5 flex`) // should then change to `flex w-5`

<div className={container} />

However, it's unable to sort it

[phacks]

Hey @TheCapedBaldi! The version currently available on the VSCode Marketplace is a few versions behind what’s on this repo, and classRegex doesn’t seem to work on that one. v2.0.0 is available in alpha in #122 and might solve your issue!

[bitabs]

Thank you @phacks. I will give it a go at it shortly, and close this ticket once it works 🙏🏻

[homerjam]

I've tested 2.0.0 and it appears classRegex isn't working, though there isn't really a clear example of how to set this up so it could be I've done it wrong

[phacks]

@homerjam In case it helps, here is the classRegex we use for HAML files (the syntax is similar to Pug’s):

"headwind.classRegex": {
  "haml": [
        {
            "regex": "\\.([\\._:a-zA-Z0-9\\-]+)",
            "separator": "\\.",
            "replacement": "."
        },
        "\\bclass\\s*:\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']"
    ],
},

[homerjam]

@homerjam In case it helps, here is the classRegex we use for HAML files (the syntax is similar to Pug’s):

"headwind.classRegex": {
  "haml": [
        {
            "regex": "\\.([\\._:a-zA-Z0-9\\-]+)",
            "separator": "\\.",
            "replacement": "."
        },
        "\\bclass\\s*:\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']"
    ],
},

Thanks, perhaps I'm using it wrong. Is this inside package.json?

[phacks]

Oh—it’s inside VSCode’s settings, not your package.json. Here’s how to change those: in VSCode, open the Command Panel (⌘⇧P on macOS) then search for Preferences: Open Settings (JSON). You can then edit that JSON file to add the classRegex, save and restart VSCode for it to take effect.