Support for Svelte Sass tags.

[braebo]

Is your feature request related to a problem? Please describe. Headwind cannot detect Tailwind classes in <style lang="sass"> tags in Svelte components.

Describe the solution you'd like It would be awesome if I could use Headwind in Svelte components using Sass.

Describe alternatives you've considered Getting better at Regex to add my own fix / reaching out to Svelte-Preprocess or Svelte-VSCode devs for a fix.

Additional context Not detected by headwind:

Let me know the best route for me to take in order to get this working (reaching out to the other projects mentioned / implementing my own fix).

[heybourn]

I've never used Svelte, nor did I handle a lot of the regex stuff this extension uses so I can't help you here unfortunately. If you figure something out feel free to share so I can add support.

[dummdidumm]

The problem is that Svelte does single file components, so css and html are in one place (that's possible for html, too, btw). So what would be needed is some kind of advanced regex which in addition to the html class regex also checks if we are in a style tag, and if yes, apply the css regex.

[tshemeng]

@FractalHQ

add following lines in .vscode/settings.json

    "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\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "svelte": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+)",
        "typescript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "typescriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
    },

this works for me.

[heybourn]

@tshemeng would you happen to have a REGEX I could use for Pug?

[tshemeng]

@tshemeng would you happen to have a REGEX I could use for Pug?

what do you mean Pug ?

[tshemeng]

@heybourn I think Pug's syntax prevented solving it with simple REGEX, I'm no idea for this.

[pikeas]

The regex works but only when triggered manually. Is there a way to apply it on save?