feat: support tailwindcss "v3" and use of server package

[yaegassy]

Description

The other day, version 3 of tailwindcss was officially released. https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0

The current coc-tailwindcss does not seem to be able to use v3 properly and comfortably. :(

I created a PR for v3 referenced on upstream code. 🙇 https://github.com/tailwindlabs/tailwindcss-intellisense/tree/master/packages/vscode-tailwindcss

As a side note, I have confirmed that tailwindcss v2 can also be used.

Summary

• Changed to use @tailwindcss/language-server
  • https://www.npmjs.com/package/@tailwindcss/language-server
• "lsp/tailwindcss-language-server" has been removed.
• Added "initializationOptions" and "settings" needed to start @tailwindcss/language-server
  • [EDIT] Some of the initializationOptions are no longer required in v0.0.7.
• Added tailwindCSS.showOutput command
  • This can be selected and displayed with workspace.showOutput, but as with "upstream", we have added a dedicated command.
• Removed tailwindCSS.cssLanguages, tailwindCSS.jsLanguages, tailwindCSS.htmlLanguages settings
  • New configuration, tailwindCSS.includeLanguages has been added.
• [EDIT] Changed "activationEvents" from * to workspaceContains:**/tailwind.config.js, etc...
• [EDIT] Added a custom setting called tailwindCSS.custom.serverPath.
• Other adjustments.

DEMO (mp4)

Before

https://user-images.githubusercontent.com/188642/147442099-8a15b87e-cb00-4ce0-9f4c-d7ee5b37135b.mp4

After

https://user-images.githubusercontent.com/188642/147442111-db10823f-8fc8-40fc-88e3-54766201c625.mp4

[yaegassy]

@iamcco ping

[onixus74]

This is working perfectly ! Thanks @yaegassy ! 🙏

[tomsvogel]

@yaegassy I also switched to your branch, is working perfect! thanks!

[thekaganugur]

How can I directly use this branch with coc?

[onixus74]

You need to install the extension with a Plugin Manager, for Plug:

Add to your .vimrc or init.vim

Plug 'yaegassy/coc-tailwindcss',  {'do': 'npm install && npm run build', 'branch': 'feat/support-v3-and-use-server-pkg'}

[yaegassy]

It seems that the latest version (v0.0.7) of the server package (@tailwindcss/language-server) has been released.

• https://www.npmjs.com/package/@tailwindcss/language-server/v/0.0.7

Committed the upgrade of the server package. I also adjusted and committed the relevant client-side (coc-tailwindcss) code.

v0.0.6 and later version, it seems that a fallback process has been added to use the tailwindcss module shipped with the server if the project's tailwindcss module cannot be detected correctly.

REF:

• vscode-tailwindcss's CHANGELOG
  • https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/vscode-tailwindcss/CHANGELOG.md

[yaegassy]

Added a custom setting called tailwindCSS.custom.serverPath.

• tailwindCSS.custom.serverPath: Custom path to server module. If there is no setting, the built-in module will be used, default: ""

This setting allows you to use the tailwind's language server module installed in any location.

Usage Example 1 (vsix)

prepare:

mkdir -p /tmp/tailwindcss-language-server
cd /tmp/tailwindcss-language-server
curl -LO https://github.com/tailwindlabs/tailwindcss-intellisense/releases/download/v0.7.6/vscode-tailwindcss-0.7.6.vsix
unzip vscode-tailwindcss-0.7.6.vsix

setting:

{
  "tailwindCSS.custom.serverPath": "/tmp/tailwindcss-language-server/extension/dist/server/tailwindServer.js"
}

Usage Example 2 (npm)

prepare:

npm i -g @tailwindcss/[email protected]

setting:

{
  "tailwindCSS.custom.serverPath": "/Users/yaegassy/.nvm/versions/node/v16.13.1/bin/tailwindcss-language-server"
}

[yaegassy]

@iamcco ping

[Yofou]

Not sure if I did anything wrong, but It appears the coc-tailwind language server isn't turning on for .svelte files, this may be out of the scope of this PR as I have never used the previous coc-tailwind to know if it previously support it, but looking at the source code it seems to be a previous feature

I can manually toggle it on for svelte files, but it get's little tedious

[yaegassy]

@Yofou Try running :CocCommand tailwindCSS.showOutput.

// ...snip

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/yaegassy/sandbox/svelte-check/tailwind.config.js from /Users/yaegassy/_Dev/vim/coc-tailwindcss/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server not supported.
tailwind.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename tailwind.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/yaegassy/sandbox/svelte-check/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

// ...snip

Rename tailwind.config.js to tailwind.config.cjs and try it.

In my environment, it worked with svelte.

Capture:

[adinvadim]

How to install this before merge?

[yaegassy]

Hi @adinvadim, Here is an example of vim-plug, with yarn.

Plug 'yaegassy/coc-tailwindcss', {'do': 'yarn install --frozen-lockfile', 'branch': 'feat/support-v3-and-use-server-pkg'}

[msbatarce]

This works awesome!! nice job

[AnishDe12020]

Not working for `for me.

The coc log shows this error -

This is how I am setting up Coc and this plugin (note that I am using packer and not vim-plug) -

    use {'neoclide/coc.nvim', branch = 'release',
      config = function()
        vim.g.coc_global_extensions = {
         "coc-emmet",
         "coc-css",
         "coc-html",
         "coc-json",
         "coc-prettier",
         "coc-tsserver"
        }
      end
    }
    use {"yaegassy/coc-tailwindcss", run = "yarn install --frozen-lockfile && yarn build", branch = "feat/support-v3-and-use-server-pkg"}

Also, :CocCommand tailwindCSS.showOutput command is not found.

Am I going wrong somewhere?

[yaegassy]

@AnishDe12020 I don't use packer, so I don't know the cause.

Skipped load vim plugin from "...snip.../coc-tailwindcss" in your screenshot, so I guess it's not available.

~First, try updating coc.nvim to the latest version. There has been a lot of refactoring going on lately, so maybe this is related to that.~

You may also want to check if it works without using the plugin manager.

e.g.:

.vimrc/init.vim

set runtimepath^=/path/to/coc-tailwindcss

---

EDIT:

Ah, The log says "already global extension", so I figured out why.

Uninstall coc-tailwindcss that you previously installed with :CocInstall and try again!

:CocUninstall coc-tailwindcss

[AnishDe12020]

@AnishDe12020 I don't use packer, so I don't know the cause.

Skipped load vim plugin from "...snip.../coc-tailwindcss" in your screenshot, so I guess it's not available.

~First, try updating coc.nvim to the latest version. There has been a lot of refactoring going on lately, so maybe this is related to that.~

You may also want to check if it works without using the plugin manager.

e.g.:

.vimrc/init.vim

set runtimepath^=/path/to/coc-tailwindcss

EDIT:

Ah, The log says "already global extension", so I figured out why.

Uninstall coc-tailwindcss that you previously installed with :CocInstall and try again!

:CocUninstall coc-tailwindcss

Thanks a lot, reinstalling worked!

[Knapptr]

This is great. Got everything working nicely. Also enabled Twin.Macro intellisense by edting the tailwindCSS.experimental.classRegex to:

tailwindCSS.experimental.classRegex": {
                         "type": "array",
                         "scope": "language-overridable",
                         "default": [
                            "tw`([^`]*)",
                             "tw=\"([^\"]*)",
                             "tw={\"([^\"}]*)",
                            "tw\\.\\w+`([^`]*)",
                            "tw\\(.*?\\)`([^`]*)"
                        ]
                    }, ```

[piotryordanov]

@yaegassy Just wanted to say that your fork works wonderfully. @iamcco please do merge it! Thx for both🙏

[benjypng]

@yaegassy You are amazing. Just wanted to say that your PR works beautifully as well!

[rynam0]

Please, please, please merge this :) Lifesaver!

[yaegassy]

I just published @yaegassy/coc-tailwindcss3, with this PR tailwindcss v3 support. :CocInstall @yaegassy/coc-tailwindcss3.

• https://github.com/yaegassy/coc-tailwindcss3
• https://www.npmjs.com/package/@yaegassy/coc-tailwindcss3

As a supplement, Headwind-related feature have been removed.

Note that: after iamcco came back and merge this PR, the you should use back coc-tailwindcss.