Adding another className regex (PureScript)

[andys8]

Hi there, I would like to give coc-tailwindcss3 a shot with PureScript (React).

I didn't get it to work yet. Once it's working I would like to open a pull request to add it to the list of class regexes (similar to reason and elm).

Debugging

Classes look like this:

element progress { className: "w-56 flex" }

The coc-config is this: Is the regex fine? Do I need to set a different value? Escaping okay?

  "tailwindCSS.headwind.classRegex": {
    "purescript": "\\bclassName\\s*:\\s*\\\"([_a-zA-Z0-9\\s\\-\\:\\/]+)\\\""
  },

What I tried so far

• Different regexes
• Using purs (the extension name) instead of purescript
• Made sure the project setup is working because in index.html the extension is working fine
• Made sure coc-settings.json is recognized because I can disable the language server (and html stops working)
• Ran CocCommand tailwindCSS.forceActivate in case the file wouldn't be recognized
• Check that regex works, but could still be an issue (escaping or other mistake)

Screenshots

HTML ✔️

PureScript 👎

Regex on regex101.com

[yaegassy]

I have never used purescript so I don't know. headwind feature was ported from heybourn/headwind. https://github.com/heybourn/headwind

You may want to debug the regex checks with this. https://github.com/heybourn/headwind#debugging-custom-regex

[andys8]

I'm not sure if I configure tailwindCSS.headwind.classRegex properly or if it's not working.

Let's say I want to test it by configuring html wrongly. It should not work for standard html syntax. But the change has no affect.

  "tailwindCSS.enable": true,
  "tailwindCSS.headwind.classRegex": {
    "html": "\\bwrong\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']"
  },

Is configuring tailwindCSS.headwind.classRegex working for you?

[yaegassy]

I checked the no matching setting in html. The setting itself is reflected correctly because it is not sorted.

DEMO (mp4):

1. I'm trying the default settings first.
   • underline text-3xl font-bold -> text-3xl font-bold underline
2. I am trying with a non matching setting in html.
   • underline text-3xl font-bold -> underline text-3xl font-bold

coc-tailwindcss3-headwind-class-regex.mp4

[andys8]

Thanks a lot for looking into it and providing the screencast. I'm not sure how to progress from here.

I don't want to waste your time, but if you feel the urge, you can try out to modidy className in this example project. I assume since the extension is regex based, no PureScript knowledge or setup is necessary.

But at this point I assume it's more likely that the issue would be related to setup or configuration on my end. So don't feel bother about this issue and free to close it.

[yaegassy]

I used your repository in my environment and tried it. It worked fine with your regex in my environment.

coc-tailwind3-purescript-headwind.mp4

[yaegassy]

Added headwind regex logs feature. #10

Here is a demo in your repository.

coc-tailwindcss3-andys8-repo-headwind-log.mp4

---

This issue is closed as it works fine in my environment. 🙇

[andys8]

Hey, thanks to your help I got it sorted out.

First I was wondering why you're testing with sorting classes (tailwindCSS.headwind.sortTailwindClasses) while I was hoping for linting errors for duplicates. With that I figured that headwind is supposed to be sorting.

Then I tried also configuring tailwindCSS.experimental.classRegex and change tailwindCSS.includeLanguages which I saw in your screencast. Not sure why I do have to set it to a value like javascriptreact (because it's not correct) but a value seems to be necessary.

Configuring all of these will then work nicely.

  "tailwindCSS.enable": true,
  "tailwindCSS.experimental.classRegex": [
    "\\bclassName\\s*:\\s*\\\"([_a-zA-Z0-9\\s\\-\\:\\/]+)\\\""
  ],
  "tailwindCSS.headwind.classRegex": {
    "purescript": "\\bclassName\\s*:\\s*\\\"([_a-zA-Z0-9\\s\\-\\:\\/]+)\\\""
  },
  "tailwindCSS.includeLanguages": {
    "purescript": "javascriptreact"
  }

Changing tailwindCSS.experimental.classRegex is not specific to a language. So I don't think the tailwind language server or coc-tailwindcss3 can be changed to work out of the box for PureScript. But with that configuration it's possible to have a working setup. Thank you, again :)