Add support for twin.macro

[lightyen]

According to tailwindlabs/tailwindcss#7553 I try to add some code for twin.macro.

[puneetv05]

Hey @lightyen thanks for the PR ✌ Any updates on this?

[dotomaz]

@lightyen 🙌 Any idea when will this be merged?

[locona]

@lightyen 🙌 Any idea when will this be merged?

[cheapsteak]

@puneetverma05 @locona @dotomaz y'all are pinging the wrong person, lightyen doesn't have the ability to merge into this repo

Based on the maintainer @bradlc 's message in tailwindlabs/tailwindcss#7553

I am reluctant to hard-code each of these cases into the extension because none of them are "official" methods of using Tailwind, and it may become a maintenance burden.

However, I am open to the idea of adding a user setting which would allow the definition of custom regular expressions. For example for tailwind-rn your regular expression might be something like: /\btailwind([^)]+/ig

This leads me to believe that this PR might be unlikely to be merged as-is since it's hard-coding support for twins

[cheapsteak]

To solve this for twin users until tailwindlabs/tailwindcss#7553 is resolved, might anyone want to package this branch into a separate vscode plugin and publish that? already 12k weekly downloads and a strong momentum, would do a lot of good

[Everspace]

@cheapsteak I have attached a packaged vsix built at 28814af
vscode-tailwindcss-0.4.4-0.zip
Simply rename the extension from zip to vsix and in the command palette (ctrl+shift+p) find Extensions: Install from VSIX...

If you don't trust strangers on the internet, you may assemble and install the package yourself with the following:

git clone https://github.com/lightyen/tailwindcss-intellisense cd tailwindcss-intellisense git fetch origin feature/twin.macro git checkout feature/twin.macro npm install npm run package code --install vscode-tailwindcss-0.4.4-0.vsix

[ben-rogerson]

I had some issues with that list of commands but here's what worked for me:

git clone https://github.com/lightyen/tailwindcss-intellisense twin-intellisense && cd $_ git fetch origin feature/twin.macro && git checkout feature/twin.macro npm install npx vsce package

Then in vscode:

1. Open the command palette and run: Extensions: Install from VSIX...
2. Select the .vsix package that vsce created

The suggestions work for every class except for unique features like twins additional variants and variant groups.
You'll also need to turn off the css conflict linting if you're using variant groups - add this to your vscode config: "tailwindCSS.lint.cssConflict": "ignore"

[Everspace]

@ben-rogerson that is because I forgot npm requires run to do a script

[rvion]

for those trying to follow above instruction to make a release, please note that lightyen renamed the repository to https://github.com/lightyen/vscode-tailwindcss-twin . Also note that this fork seems to be actively maintained.

EDIT: It seems that lightyen instead deleted the fork, and created a new project from scratch. https://github.com/lightyen/vscode-tailwindcss-twin does not seem to be a fork, and seem to be twin-macro related.

I personally think this is a better approach, as twin.macro differences are many. (context: I was about to also start my own extension as I figured out that I wanted to replace most of the code in this extension.)

ping @lightyen in case I said something wrong again.