feat: css language mode server integration for TailwindCSS

README.md

@@ -42,7 +42,9 @@ npx tailwindcss init
 
 - `tailwindCSS.enable`: Enable coc-tailwindcss3 extension, default: `true`
 - `tailwindCSS.trace.server`: Trace level of tailwindCSS language server, default: `off`
+- `tailwindCSS-css-mode.trace.server`: Trace level of tailwindCSS CSS Mode language server, default: `""`
 - `tailwindCSS.custom.serverPath`: Custom path to server module. If there is no setting, the built-in module will be used, default: `""`
+- `tailwindCSS.custom.cssModeServerPath`: Custom path to css mode server module, default: `""`
 - `tailwindCSS.emmetCompletions`: Enable class name completions when using Emmet-style syntax, for example `div.bg-red-500.uppercase`, default: `false`
 - `tailwindCSS.includeLanguages`: Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language. E.g.: `{"plaintext": "html"}`, default: `{ "eelixir": "html", "elixir": "html", "eruby": "html", "htmldjango": "html", "html.twig": "html" }`
 - `tailwindCSS.files.exclude`: Configure glob patterns to exclude from all IntelliSense features. Inherits all glob patterns from the `#files.exclude#` setting, default: ["**/.git/**", "**/node_modules/**", "**/.hg/**"]

package.json

@@ -77,11 +77,26 @@
           ],
           "description": "Trace level of tailwindCSS language server"
         },
+        "tailwindCSS-css-mode.trace.server": {
+          "type": "string",
+          "default": "off",
+          "enum": [
+            "off",
+            "messages",
+            "verbose"
+          ],
+          "description": "Trace level of tailwindCSS CSS Mode language server"
+        },
         "tailwindCSS.custom.serverPath": {
           "type": "string",
           "default": "",
           "description": "Custom path to server module. If there is no setting, the built-in module will be used"
         },
+        "tailwindCSS.custom.cssModeServerPath": {
+          "type": "string",
+          "default": "",
+          "description": "Custom path to css mode server module."
+        },
         "tailwindCSS.emmetCompletions": {
           "type": "boolean",
           "default": false,

src/config.ts

@@ -8,6 +8,10 @@ export function getConfigCustomServerPath() {
   return workspace.getConfiguration('tailwindCSS').get<string>('custom.serverPath', '');
 }
 
+export function getConfigCustomCssModeServerPath() {
+  return workspace.getConfiguration('tailwindCSS').get<string>('custom.cssModeServerPath', '');
+}
+
 export function getConfigExcludePatterns(): string[] {
   return workspace.getConfiguration('tailwindCSS').get<string[]>('files.exclude', []);
 }

src/index.ts

@@ -17,7 +17,12 @@ import {
 import fs from 'fs';
 import minimatch from 'minimatch';
 import path from 'path';
-import { getConfigCustomServerPath, getConfigExcludePatterns, getConfigTailwindCssEnable } from './config';
+import {
+  getConfigCustomCssModeServerPath,
+  getConfigCustomServerPath,
+  getConfigExcludePatterns,
+  getConfigTailwindCssEnable,
+} from './config';
 import { dedupe, equal } from './util/array';
 import isObject from './util/isObject';
 import { languages as defaultLanguages } from './util/languages';
@@ -148,6 +153,54 @@ export async function activate(context: ExtensionContext) {
     })
   );
 
+  let cssServerBooted = false;
+  async function bootCssServer() {
+    if (cssServerBooted) return;
+    cssServerBooted = true;
+
+    let module = getConfigCustomCssModeServerPath();
+    if (!module) return;
+    if (fs.existsSync(module)) {
+      module = module;
+    }
+
+    const client = new LanguageClient(
+      'tailwindCSS-css-mode',
+      'Tailwind CSS',
+      {
+        run: {
+          module,
+          transport: TransportKind.ipc,
+        },
+        debug: {
+          module,
+          transport: TransportKind.ipc,
+          options: {
+            execArgv: ['--nolazy', '--inspect=6051'],
+          },
+        },
+      },
+      {
+        documentSelector: [{ language: 'tailwindcss' }],
+        outputChannelName: 'Tailwind CSS Language Mode',
+        synchronize: { configurationSection: ['css'] },
+      }
+    );
+
+    context.subscriptions.push(client.start());
+  }
+
+  workspace.onDidOpenTextDocument(
+    async () => {
+      const { document } = await workspace.getCurrentState();
+      if (document.languageId === 'tailwindcss') {
+        bootCssServer();
+      }
+    },
+    null,
+    context.subscriptions
+  );
+
   function bootWorkspaceClient(folder: WorkspaceFolder) {
     if (clients.has(folder.uri.toString())) {
       return;

src/util/languages.ts

@@ -31,7 +31,7 @@ export const htmlLanguages = [
   'twig',
 ];
 
-export const cssLanguages = ['css', 'less', 'postcss', 'sass', 'scss', 'stylus', 'sugarss'];
+export const cssLanguages = ['css', 'less', 'postcss', 'sass', 'scss', 'stylus', 'sugarss', 'tailwindcss'];
 
 export const jsLanguages = ['javascript', 'javascriptreact', 'reason', 'rescript', 'typescript', 'typescriptreact'];