feat: css language mode server integration for TailwindCSS

[yaegassy]

Description

To edit css-related files, it is convenient to use coc-css. A language server with vscode-css-languageservice feature is started.

However, this language server has some minor problems, such as issuing warnings for TailwindCSS-specific syntax, etc. e.g. @tailwind, @apply, @screen, @layer and more.

To solve these problems, tailwindcss-intellisense seems to provide a dedicated css language server for TailwindCSS.

REF:

• https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/vscode-tailwindcss/src/cssServer.ts

Usage

Prepare

1:

the language server module for this css requires v0.8.0 or later of vscode-tailwindcss. Please check here for an example of using the server module installed with vsix.

• https://github.com/yaegassy/coc-tailwindcss3#usage-example-1-vsix
• https://github.com/yaegassy/coc-tailwindcss3#usage-example-2-use-extensions-installed-in-vscode

The npm package @tailwindcss/language-server does not yet include this server module.

Note: To be published in npm in the near future. tailwindlabs/tailwindcss-intellisense#536

2:

Add the g:coc_filetype_map setting to your ".vimrc/init.vim". Add a configuration entry mapping the file type named *.tailwindcss to tailwindcss.

This is an example of the css.tailwindcss filetype. Of course, you can also use another css-related filetype, such as scss.tailwindcss.

let g:coc_filetype_map = {
 \ 'css.tailwindcss': 'tailwindcss',
 \ }

3:

Add tailwindCSS.custom.cssModeServerPath to coc-settings.json. The file path of the css server module must be set correctly for your environment.

{
  "tailwindCSS.custom.cssModeServerPath": "/path/to/tailwindcss-language-server/extension/dist/tailwindModeServer.js",
}

Edit

1. Open the css-related file.
2. Change the filetype to css.tailwindcss.
   • :set filetype=css.tailwindcss
   • The css mode server provided by tailwindcss-intellisense starts up.