merrickluo/lsp-tailwindcss

Support for react-native?

Closed this issue · 8 comments

How would one get support for this lsp to work with packages such as tailwind-react-native-classnames and others?
Where the tailwind classes are not within a class but backticks within style?

So it seems that you can specify a custom regex for tailwind ls

Reference
tailwindlabs/tailwindcss#7553

But im trying to figure out how to set this for emacs (im pretty new to emacs)

I found this gist:
https://github.com/emacs-lsp/lsp-mode/pull/2438/files

So i should be able to set the lsp-register-custom-settings and tailwindCSS.experimental.classRegex

sounds great, did you get it to work? If do, maybe I should add a custom variable for easier customization in projects.

Kinda, its a hack.

(lsp-register-custom-settings '(("tailwindCSS.experimental.classRegex" ["['`]([^'`]*)['`]"])))

Im new to emacs and my regex isn't the best. But this works, but of course will show tailwind inside any quotes - not ideal.
But for some reason sending multiple regex expressions in an array doesn't work as expected for me, it will only use the first entry.
Also it seems that the regex expressions that work with vscode don't work when i try it with the above.

For example: this should work?:

[
  "tw`([^`]*)",
  "tw\\.style\\(([^)]*)\\)",
]

But it doesn't, not quite sure what's happening though.

the regex should be passed to the server as a string, maybe some escape sequence issue. I'll add a new custom variable lsp-tailwindcss-experimental-class-regex for easier customization.

Kinda, its a hack.

(lsp-register-custom-settings '(("tailwindCSS.experimental.classRegex" ["['`]([^'`]*)['`]"])))

Im new to emacs and my regex isn't the best. But this works, but of course will show tailwind inside any quotes - not ideal. But for some reason sending multiple regex expressions in an array doesn't work as expected for me, it will only use the first entry. Also it seems that the regex expressions that work with vscode don't work when i try it with the above.

For example: this should work?:

[
  "tw`([^`]*)",
  "tw\\.style\\(([^)]*)\\)",
]

But it doesn't, not quite sure what's happening though.

I'm new to emacs too and maybe it will help somebody.
The elisp doesn't require a comma when you list an array. So if you rid of the comma, everything will work.

Below is the way how you can fully set up twin.macro in the emacs:
(use-package! lsp-tailwindcss :init (setq! lsp-tailwindcss-experimental-class-regex ["tw([^]*)" "tw=\"([^\"]*)" "tw={\"([^\"}]*)" "tw\\.\\w+([^]*)" "tw\\(.*?\\)([^]*)"]))

@merrickluo
If you find it useful I can create PR with the description of how to set up twin.macro.

thanks, sounds great, please do. it also seems I got this option type wrong, maybe we should also fix that.

thanks, sounds great, please do. it also seems I got this option type wrong, maybe we should also fix that.

Please have a look at the PR.

What do you mean by "got this option type wrong"? The name looks consistent with others. Or do you mean something else?