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

yaegassy · 2021-12-27T06:39:24Z

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

01_before-coc-tailwindcss.mp4

After

02_after_coc-tailwind-css.mp4

This can be selected and displayed with workspace.showOutput, but as with upstream, we have added a dedicated command.

Old setting items have been deleted. - tailwindCSS.htmlLanguages - tailwindCSS.jsLanguages - tailwindCSS.cssLanguages Also, various Vim-specific filetype (e.g. htmldjango) have been added to the default settings in `tailwindCSS.includeLanguages`.

yaegassy · 2021-12-29T04:15:14Z

@iamcco ping

onixus74 · 2021-12-31T20:22:52Z

This is working perfectly !
Thanks @yaegassy ! 🙏

tomsvogel · 2022-01-01T17:37:51Z

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

thekaganugur · 2022-01-09T20:04:32Z

How can I directly use this branch with coc?

onixus74 · 2022-01-09T21:10:18Z

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'}

InitializationOptions are no longer required on the Language Server side.

yaegassy · 2022-01-18T03:16:10Z

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 · 2022-01-18T04:18:49Z

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/language-server@0.0.7

setting:

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

yaegassy · 2022-01-18T04:20:48Z

@iamcco ping

Yofou · 2022-01-20T15:59:49Z

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 · 2022-01-20T22:11:44Z

@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 · 2022-01-27T17:21:12Z

How to install this before merge?

yaegassy · 2022-01-31T10:49:36Z

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 · 2022-02-02T15:50:43Z

This works awesome!! nice job

AnishDe12020 · 2022-02-05T12:43:58Z

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 · 2022-02-05T13:15:38Z

@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 · 2022-02-05T13:45:17Z

@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!

fixed an error that occurred when setting a non-existent file path.

Knapptr · 2022-02-16T15:02:17Z

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 · 2022-03-04T18:07:34Z

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

benjypng · 2022-03-20T13:41:43Z

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

rynam0 · 2022-04-13T20:48:44Z

Please, please, please merge this :) Lifesaver!

yaegassy · 2022-04-13T21:43:03Z

I just published @yaegassy/coc-tailwindcss3, with this PR tailwindcss v3 support. :CocInstall @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.

yaegassy added 9 commits December 27, 2021 14:37

chore(deps): add @tailwindcss/language-server package

a04e08c

chore: add config required to successfully start server

3fad4f1

feat: use "@tailwindcss/language-server" package

cf50419

refactor: delete lsp/tailwindcss-language-server

10347d1

feat: "tailwindCSS.showOutput" command

3ee6f43

This can be selected and displayed with workspace.showOutput, but as with upstream, we have added a dedicated command.

chore: add .cjs extensions to CONFIG_GLOB.

96d4706

feat: inspectPort settings

3267c1b

chore: adjusting README

19fcdc7

yaegassy added 4 commits January 18, 2022 11:55

chore(setting): add "tailwindCSS.files.exclude" configration

85bdd01

chore: change "activationEvents"

3696c35

chore(deps): bump @tailwindcss/language-server to v0.0.7

5f6add4

refactor: remove initializationOptions

64b98b3

InitializationOptions are no longer required on the Language Server side.

feat: add "tailwindCSS.custom.serverPath" configration

df91769

yaegassy mentioned this pull request Jan 18, 2022

Not working with Tailwindcss 3.0.1 rodrigore/coc-tailwind-intellisense#29

Open

fix: custom server path

49b12c1

fixed an error that occurred when setting a non-existent file path.

Knapptr mentioned this pull request Feb 16, 2022

Getting tw`` to autocomplete #34

Open

rynam0 mentioned this pull request Apr 13, 2022

Tailwind 3.0 Support? #75

Open

nocturnalmc mentioned this pull request May 10, 2022

update tailwindcss intellisense rodrigore/coc-tailwind-intellisense#34

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

yaegassy commented Dec 27, 2021 •

edited

Loading

yaegassy commented Dec 29, 2021

onixus74 commented Dec 31, 2021

tomsvogel commented Jan 1, 2022

thekaganugur commented Jan 9, 2022

onixus74 commented Jan 9, 2022 •

edited

Loading

yaegassy commented Jan 18, 2022

yaegassy commented Jan 18, 2022 •

edited

Loading

yaegassy commented Jan 18, 2022

Yofou commented Jan 20, 2022 •

edited

Loading

yaegassy commented Jan 20, 2022

adinvadim commented Jan 27, 2022

yaegassy commented Jan 31, 2022

msbatarce commented Feb 2, 2022

AnishDe12020 commented Feb 5, 2022

yaegassy commented Feb 5, 2022 •

edited

Loading

AnishDe12020 commented Feb 5, 2022

Knapptr commented Feb 16, 2022

piotryordanov commented Mar 4, 2022

benjypng commented Mar 20, 2022

rynam0 commented Apr 13, 2022

yaegassy commented Apr 13, 2022 •

edited

Loading

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

Are you sure you want to change the base?

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

Conversation

yaegassy commented Dec 27, 2021 • edited Loading

Description

Summary

DEMO (mp4)

Before

After

yaegassy commented Dec 29, 2021

onixus74 commented Dec 31, 2021

tomsvogel commented Jan 1, 2022

thekaganugur commented Jan 9, 2022

onixus74 commented Jan 9, 2022 • edited Loading

yaegassy commented Jan 18, 2022

yaegassy commented Jan 18, 2022 • edited Loading

Usage Example 1 (vsix)

Usage Example 2 (npm)

yaegassy commented Jan 18, 2022

Yofou commented Jan 20, 2022 • edited Loading

yaegassy commented Jan 20, 2022

adinvadim commented Jan 27, 2022

yaegassy commented Jan 31, 2022

msbatarce commented Feb 2, 2022

AnishDe12020 commented Feb 5, 2022

yaegassy commented Feb 5, 2022 • edited Loading

AnishDe12020 commented Feb 5, 2022

Knapptr commented Feb 16, 2022

piotryordanov commented Mar 4, 2022

benjypng commented Mar 20, 2022

rynam0 commented Apr 13, 2022

yaegassy commented Apr 13, 2022 • edited Loading

yaegassy commented Dec 27, 2021 •

edited

Loading

onixus74 commented Jan 9, 2022 •

edited

Loading

yaegassy commented Jan 18, 2022 •

edited

Loading

Yofou commented Jan 20, 2022 •

edited

Loading

yaegassy commented Feb 5, 2022 •

edited

Loading

yaegassy commented Apr 13, 2022 •

edited

Loading