heybourn / headwind

An opinionated Tailwind CSS class sorter built for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
MIT License
1.38k stars 45 forks source link

Consider Adding support for `RSX` #198

Open alice-werefox opened 1 year ago

alice-werefox commented 1 year ago

Is your feature request related to a problem? Please describe. I've been using Dioxus a lot recently, and I was wondering if there was a possibility that this could support "RSX" style formatting. Syntactically, it's extremely similar to JSX, so I don't think adding the ability to support it would be that much of an ask.

RSX Example:

div {
    class: "mx-auto max-w-fit flex justify-center bg-black text-white",
    ...
}

Describe the solution you'd like From what I can tell, it's likely that Headwind just doesn't know to run when a .rs file is open. In the tailwindCSS extension for vscode, this is solved by changing the setting tailwindCSS.includeLanguages

"tailwindCSS.includeLanguages": {
  "rust": "html"
}

Perhaps Headwind could implement something similar? Then this would apply to future JSX-like language formats.

Describe alternatives you've considered I can't really think of anything other than trying to write everything in JSX or similar and then having my program do some hacky read from a file stuff.

Additional context For what it's worth, I have tried adding regex to the headwind.classRegex setting like so, but that seems to do nothing.

"headwind.classRegex": {
  ...
  "rust": "class: \"(.*)\""
}

I've also attempted an edited JSX regex from #85

"headwind.classRegex": {
  "rust": "(?:\\b(?:class)(?::(?:{\\s*)?)?[\\\"]([\\w\\s\\-\\:\\[\\]]+)[\\\"])"
}
Ameyanagi commented 10 months ago

@alice-werefox

I am also working with dioxus. Adding the following to setting.json fixed it for my situation. You have to make sure to kill all the vscode process and restart, so that regex will be effective.

  "headwind.classRegex": {
    "rust": "\\bclass\\s*:\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']"
  }