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

feat: Add usage with Tailwind documentation #65

Merged
merged 3 commits into from Jan 18, 2023
Merged

Conversation

edgarlr
Copy link
Contributor

@edgarlr edgarlr commented Jan 18, 2023

Add documentation on how to enable Tailwind IntelliSense inside clsx functions

Fixes #64

Add documentation on how to enable Tailwind IntelliSense inside `clsx` functions

Fixes lukeed#64
readme.md Outdated Show resolved Hide resolved
Copy link
Owner

@lukeed lukeed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Can you move this section between Support and Related?

edgarlr and others added 2 commits January 18, 2023 16:51
Co-authored-by: Luke Edwards <luke.edwards05@gmail.com>
@edgarlr
Copy link
Contributor Author

edgarlr commented Jan 18, 2023

@lukeed Done!

@lukeed
Copy link
Owner

lukeed commented Jan 18, 2023

Thanks :)

@lukeed lukeed merged commit 496db1d into lukeed:master Jan 18, 2023
```json
{
"tailwindCSS.experimental.classRegex": [
["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
Copy link

@kachkaev kachkaev Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👋 @lukeed! Thanks for adding this regex! Can you please elaborate on your approach to building it? I was using https://github.com/shadcn/ui/blob/5e172fc34fdf015aa0d141f52cc8c082b8ae6613/.vscode/settings.json#L7-L8 before seeing your solution. There is a slight difference, so I'm curious if there are any edge cases not covered by any of the two regexps:

shadcn/ui
- ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+ ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
your regex

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@edgarlr contributed this section so perhaps they can offer an explanation.

By eyeballing it, the difference is that ([^']*) will match anything up to ', which means that if " or or backticks appear in the class value, then the regexp in our docs will include it as part of the value, whereas the other regexp stops there.

clsx doc's regexp
Screen Shot 2023-07-18 at 10 43 53 AM

shadcn/ui regexp
Screen Shot 2023-07-18 at 10 44 16 AM

Looks like they're both not ideal, tbh
I don't use this extension, but perhaps something like this is better? I don't know if the extn is looking for the first matching group only, though

Screen Shot 2023-07-18 at 10 53 57 AM

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

Successfully merging this pull request may close these issues.

Add documentation on usage with Tailwind CSS
3 participants