Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for react-native? #27

Closed
CurralesDragon opened this issue Nov 3, 2021 · 8 comments
Closed

Support for react-native? #27

CurralesDragon opened this issue Nov 3, 2021 · 8 comments

Comments

@CurralesDragon
Copy link

CurralesDragon commented Nov 3, 2021

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
Copy link
Author

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
Copy link
Owner

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

@CurralesDragon
Copy link
Author

CurralesDragon commented Nov 11, 2021

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
Copy link
Owner

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
Copy link
Contributor

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
Copy link
Contributor

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

@merrickluo
Copy link
Owner

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

@aburtsev
Copy link
Contributor

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants