Help with formatting in JavaScript files

[Alonski]

Is your feature request related to a problem? Please describe. Hello, I am trying to set up Headwind for use in Javascript files.

I have getters where I use a switch-case to choose the classNames for a component in Ember. Headwind works in templates but I can't seem to get it to work in Javascript.

This is my code:

  get buttonClass() {
        const classNames = "border-0 rounded-sm min-w-24 min-h-8"; // Want this to be headwinded
        switch (this.variant) {
            case "primary":
                return `${classNames} button-primary`;
            default:
                return "";
        }
    }

I tried setting this regex but it might be wrong :)

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

[heybourn]

I'm pretty horrible with REGEX so couldn't help you here - maybe @praveenperera has some ideas?

[praveenperera]

@Alonski here is the regex that works: https://regex101.com/r/ewrRFX/1

Try:

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

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

It will watch one both className = ... and classNames = ...

[Alonski]

@praveenperera Sorry for the late followup. So I tried what you suggested and Headwind still isn't sorting the classes :)

[petertriho]

Fixed in https://github.com/heybourn/headwind/pull/109