Support for react-native?

CurralesDragon commented 2 years ago

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?

CurralesDragon commented 2 years ago

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

merrickluo commented 2 years ago

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

CurralesDragon commented 2 years ago

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.

merrickluo commented 2 years ago

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.

aburtsev commented 2 years ago

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\\(.*?\\)([^]*)"]))

aburtsev commented 2 years ago

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

merrickluo commented 2 years ago

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

aburtsev commented 2 years ago

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?

merrickluo / lsp-tailwindcss

Support for react-native? #27