Implement "Request Forwarding to tsserver" (#207)

mizdra · web-flow · commit 93cf8d165b31 · 2025-06-23T21:45:57.000+09:00
* export types from ts-plugin

* implement "Request Forwarding to tsserver"

* add changelog

* update limitation description in README
diff --git a/.changeset/bright-hounds-cheat.md b/.changeset/bright-hounds-cheat.md
@@ -0,0 +1,6 @@
+---
+'@css-modules-kit/ts-plugin': patch
+'css-modules-kit-vscode': patch
+---
+
+fix: fix the issue that renaming classes from .css does not work in VS Code
diff --git a/.changeset/thirty-masks-push.md b/.changeset/thirty-masks-push.md
@@ -0,0 +1,6 @@
+---
+'@css-modules-kit/ts-plugin': patch
+'css-modules-kit-vscode': patch
+---
+
+fix: fix the issue that Go to Definition for specifiers fails using import alias in VS Code
diff --git a/README.md b/README.md
@@ -199,8 +199,6 @@ When this option is `true`, `import { button } from '...'` will be added. When t
 - Sass/Less are not supported to simplify the implementation
 - `:local .foo {...}` (without any arguments) is not supported to simplify the implementation
 - `:global .foo {...}` (without any arguments) is not supported to simplify the implementation
-- Some editors do not allow rename from `*.module.css`
-  - See [#121](https://github.com/mizdra/css-modules-kit/issues/121) for more details.
 - css-modules-kit does not work on VS Code for Web
   - This is to simplify implementation.
 
diff --git a/packages/ts-plugin/package.json b/packages/ts-plugin/package.json
@@ -23,6 +23,16 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./type": {
+      "types": "./dist/type.d.ts",
+      "default": "./dist/type.js"
+    }
+  },
   "keywords": [
     "css-modules",
     "typescript",
diff --git a/packages/ts-plugin/src/index.ts b/packages/ts-plugin/src/index.ts
@@ -1,9 +1,16 @@
 import type { CMKConfig } from '@css-modules-kit/core';
 import { createMatchesPattern, createResolver, readConfigFile } from '@css-modules-kit/core';
 import { TsConfigFileNotFoundError } from '@css-modules-kit/core';
+import type { Language } from '@volar/language-core';
 import { createLanguageServicePlugin } from '@volar/typescript/lib/quickstart/createLanguageServicePlugin.js';
+import type ts from 'typescript';
 import { createCSSLanguagePlugin } from './language-plugin.js';
 import { proxyLanguageService } from './language-service/proxy.js';
+import { createDocumentLinkHandler } from './protocol-handler/documentLink.js';
+import { createRenameHandler } from './protocol-handler/rename.js';
+import { createRenameInfoHandler } from './protocol-handler/renameInfo.js';
+
+const projectToLanguage = new WeakMap<ts.server.Project, Language<string>>();
 
 const plugin = createLanguageServicePlugin((ts, info) => {
   if (info.project.projectKind !== ts.server.ProjectKind.Configured) {
@@ -53,6 +60,7 @@ const plugin = createLanguageServicePlugin((ts, info) => {
   return {
     languagePlugins: [createCSSLanguagePlugin(resolver, matchesPattern, config)],
     setup: (language) => {
+      projectToLanguage.set(info.project, language);
       info.languageService = proxyLanguageService(
         language,
         info.languageService,
@@ -61,6 +69,42 @@ const plugin = createLanguageServicePlugin((ts, info) => {
         matchesPattern,
         config,
       );
+      if (info.session) {
+        // Register protocol handlers for "Request Forwarding to tsserver".
+        // See https://github.com/mizdra/css-modules-kit/pull/207 for more details.
+
+        // `info.session.addProtocolHandler` cannot register multiple handlers with the same command name.
+        // Attempting to do so will result in an error.
+        //
+        // By the way, tsserver creates one ConfiguredProject for each tsconfig.json file. Then, tsserver
+        // initializes each plugin for each ConfiguredProject. This means that if there are multiple
+        // tsconfig.json files, the handler will be registered multiple times.
+        //
+        // Therefore, we will do the following:
+        // - Implement the handler to handle files from different projects
+        // - Skip registration if the handler is already registered
+        try {
+          info.session.addProtocolHandler('_css-modules-kit:rename', createRenameHandler(info.project.projectService));
+          info.session.addProtocolHandler(
+            '_css-modules-kit:renameInfo',
+            createRenameInfoHandler(info.project.projectService),
+          );
+          info.session.addProtocolHandler(
+            '_css-modules-kit:documentLink',
+            createDocumentLinkHandler(info.project.projectService, projectToLanguage, resolver),
+          );
+        } catch {
+          info.project.projectService.logger.info(
+            `[@css-modules-kit/ts-plugin] Skipping protocol handler registration because the handlers are already registered.`,
+          );
+        }
+      } else {
+        // When a plugin is used via tsserver from the editor, the session is always available.
+        // However, when a plugin is used via the TypeScript Compiler API, the session may not be available.
+        info.project.projectService.logger.info(
+          '[@css-modules-kit/ts-plugin] info: Skipping protocol handler registration because session is not available.',
+        );
+      }
     },
   };
 });
diff --git a/packages/ts-plugin/src/protocol-handler/documentLink.ts b/packages/ts-plugin/src/protocol-handler/documentLink.ts
@@ -0,0 +1,38 @@
+import type { Resolver } from '@css-modules-kit/core';
+import type { Language } from '@volar/language-core';
+import type ts from 'typescript';
+import { CMK_DATA_KEY, isCSSModuleScript } from '../language-plugin.js';
+import type {
+  CSSModulesKitDocumentLinkHandlerResponse,
+  CSSModulesKitDocumentLinkRequest,
+  DocumentLink,
+} from '../type.js';
+import { getConfiguredProjectForFile } from '../util.js';
+
+export function createDocumentLinkHandler(
+  projectService: ts.server.ProjectService,
+  projectToLanguage: WeakMap<ts.server.Project, Language<string>>,
+  resolver: Resolver,
+) {
+  return (request: CSSModulesKitDocumentLinkRequest): CSSModulesKitDocumentLinkHandlerResponse => {
+    const { fileName } = request.arguments;
+    const project = getConfiguredProjectForFile(projectService, fileName);
+    if (!project) return {};
+    const language = projectToLanguage.get(project);
+    if (!language) return {};
+    const script = language.scripts.get(fileName);
+    const links: DocumentLink[] = [];
+    if (isCSSModuleScript(script)) {
+      const { tokenImporters } = script.generated.root[CMK_DATA_KEY].cssModule;
+      for (const { from, fromLoc } of tokenImporters) {
+        const resolved = resolver(from, { request: fileName });
+        if (!resolved) continue;
+        links.push({
+          fileName: resolved,
+          textSpan: { start: fromLoc.start.offset, length: fromLoc.end.offset - fromLoc.start.offset },
+        });
+      }
+    }
+    return { response: { result: links } };
+  };
+}
diff --git a/packages/ts-plugin/src/protocol-handler/rename.ts b/packages/ts-plugin/src/protocol-handler/rename.ts
@@ -0,0 +1,15 @@
+import ts from 'typescript';
+import type { CSSModulesKitRenameHandlerResponse, CSSModulesKitRenameRequest } from '../type.js';
+import { getConfiguredProjectForFile } from '../util.js';
+
+export function createRenameHandler(projectService: ts.server.ProjectService) {
+  return (request: CSSModulesKitRenameRequest): CSSModulesKitRenameHandlerResponse => {
+    const { fileName, position } = request.arguments;
+    const project = getConfiguredProjectForFile(projectService, fileName);
+    if (!project) return {};
+    const languageService = project.getLanguageService();
+    const preference = project.projectService.getPreferences(ts.server.toNormalizedPath(fileName));
+    const result = languageService.findRenameLocations(fileName, position, false, false, preference);
+    return { response: { result } };
+  };
+}
diff --git a/packages/ts-plugin/src/protocol-handler/renameInfo.ts b/packages/ts-plugin/src/protocol-handler/renameInfo.ts
@@ -0,0 +1,15 @@
+import ts from 'typescript';
+import type { CSSModulesKitRenameInfoHandlerResponse, CSSModulesKitRenameInfoRequest } from '../type.js';
+import { getConfiguredProjectForFile } from '../util.js';
+
+export function createRenameInfoHandler(projectService: ts.server.ProjectService) {
+  return (request: CSSModulesKitRenameInfoRequest): CSSModulesKitRenameInfoHandlerResponse => {
+    const { fileName, position } = request.arguments;
+    const project = getConfiguredProjectForFile(projectService, fileName);
+    if (!project) return {};
+    const languageService = project.getLanguageService();
+    const preference = project.projectService.getPreferences(ts.server.toNormalizedPath(fileName));
+    const result = languageService.getRenameInfo(fileName, position, preference);
+    return { response: { result } };
+  };
+}
diff --git a/packages/ts-plugin/src/type.ts b/packages/ts-plugin/src/type.ts
@@ -0,0 +1,61 @@
+import type ts from 'typescript';
+
+export interface CSSModulesKitRenameRequest extends ts.server.protocol.Request {
+  command: '_css-modules-kit:rename';
+  arguments: { fileName: string; position: number };
+}
+export interface CSSModulesKitRenameHandlerResponse extends ts.server.HandlerResponse {
+  response?: { result: ReturnType<ts.LanguageService['findRenameLocations']> };
+}
+export interface CSSModulesKitRenameResponse extends ts.server.protocol.Response {
+  command: '_css-modules-kit:rename';
+  readonly body: CSSModulesKitRenameHandlerResponse['response'];
+}
+
+export interface CSSModulesKitRenameInfoRequest extends ts.server.protocol.Request {
+  command: '_css-modules-kit:renameInfo';
+  arguments: { fileName: string; position: number };
+}
+export interface CSSModulesKitRenameInfoHandlerResponse extends ts.server.HandlerResponse {
+  response?: { result: ReturnType<ts.LanguageService['getRenameInfo']> };
+}
+export interface CSSModulesKitRenameInfoResponse extends ts.server.protocol.Response {
+  command: '_css-modules-kit:renameInfo';
+  readonly body: CSSModulesKitRenameInfoHandlerResponse['response'];
+}
+
+export interface DocumentLink {
+  fileName: string;
+  textSpan: ts.TextSpan;
+}
+export interface CSSModulesKitDocumentLinkRequest extends ts.server.protocol.Request {
+  command: '_css-modules-kit:documentLink';
+  arguments: { fileName: string };
+}
+export interface CSSModulesKitDocumentLinkHandlerResponse extends ts.server.HandlerResponse {
+  response?: { result: DocumentLink[] };
+}
+export interface CSSModulesKitDocumentLinkResponse extends ts.server.protocol.Response {
+  command: '_css-modules-kit:documentLink';
+  readonly body: CSSModulesKitDocumentLinkHandlerResponse['response'];
+}
+
+declare module 'typescript' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace server {
+    export interface Session {
+      addProtocolHandler(
+        command: '_css-modules-kit:rename',
+        handler: (request: CSSModulesKitRenameRequest) => CSSModulesKitRenameHandlerResponse,
+      ): void;
+      addProtocolHandler(
+        command: '_css-modules-kit:renameInfo',
+        handler: (request: CSSModulesKitRenameInfoRequest) => CSSModulesKitRenameInfoHandlerResponse,
+      ): void;
+      addProtocolHandler(
+        command: '_css-modules-kit:documentLink',
+        handler: (request: CSSModulesKitDocumentLinkRequest) => CSSModulesKitDocumentLinkHandlerResponse,
+      ): void;
+    }
+  }
+}
diff --git a/packages/ts-plugin/src/util.ts b/packages/ts-plugin/src/util.ts
@@ -56,3 +56,12 @@ export function convertDefaultImportsToNamespaceImports(
     }
   }
 }
+
+export function getConfiguredProjectForFile(
+  projectService: ts.server.ProjectService,
+  fileName: string,
+): ts.server.ConfiguredProject | undefined {
+  const project = projectService.getDefaultProjectForFile(ts.server.toNormalizedPath(fileName), false);
+  if (!project || project.projectKind !== ts.server.ProjectKind.Configured) return;
+  return project as ts.server.ConfiguredProject;
+}
diff --git a/packages/vscode/src/index.ts b/packages/vscode/src/index.ts
@@ -1,15 +1,96 @@
 /* eslint-disable no-console */
 
+import type {
+  CSSModulesKitDocumentLinkRequest,
+  CSSModulesKitDocumentLinkResponse,
+  CSSModulesKitRenameInfoRequest,
+  CSSModulesKitRenameInfoResponse,
+  CSSModulesKitRenameRequest,
+  CSSModulesKitRenameResponse,
+} from '@css-modules-kit/ts-plugin/type';
 import * as vscode from 'vscode';
 
-export function activate(_context: vscode.ExtensionContext) {
+export function activate(context: vscode.ExtensionContext) {
   console.log('[css-modules-kit-vscode] Activated');
 
   // By default, `vscode.typescript-language-features` is not activated when a user opens *.css in VS Code.
   // So, activate it manually.
   const tsExtension = vscode.extensions.getExtension('vscode.typescript-language-features');
-  if (tsExtension) {
+  if (tsExtension && !tsExtension.isActive) {
     console.log('[css-modules-kit-vscode] Activating `vscode.typescript-language-features`');
     tsExtension.activate();
   }
+
+  context.subscriptions.push(
+    // In VS Code, tsserver typically conflicts with the standard CSS Language Server, causing some language features to malfunction.
+    // Therefore, an approach called "Request Forwarding to tsserver" is used to avoid this conflict.
+    // See https://github.com/mizdra/css-modules-kit/pull/207 for more details.
+    vscode.languages.registerRenameProvider(
+      { scheme: 'file', language: 'css' },
+      {
+        async provideRenameEdits(document, position, newName, _token) {
+          const res = await vscode.commands.executeCommand<CSSModulesKitRenameResponse>(
+            'typescript.tsserverRequest',
+            '_css-modules-kit:rename',
+            {
+              fileName: document.fileName,
+              position: document.offsetAt(position),
+            } satisfies CSSModulesKitRenameRequest['arguments'],
+          );
+          // If the response does not contain any results, return undefined to fall back to standard CSS Language Server.
+          if (!res.success || !res.body || !res.body.result || res.body.result.length === 0) return;
+          const edit = new vscode.WorkspaceEdit();
+          for (const location of res.body.result) {
+            // eslint-disable-next-line no-await-in-loop
+            const document = await vscode.workspace.openTextDocument(location.fileName);
+            const start = document.positionAt(location.textSpan.start);
+            const end = document.positionAt(location.textSpan.start + location.textSpan.length);
+            edit.replace(vscode.Uri.file(location.fileName), new vscode.Range(start, end), newName);
+          }
+          return edit;
+        },
+        async prepareRename(document, position, _token) {
+          const res = await vscode.commands.executeCommand<CSSModulesKitRenameInfoResponse>(
+            'typescript.tsserverRequest',
+            '_css-modules-kit:renameInfo',
+            {
+              fileName: document.fileName,
+              position: document.offsetAt(position),
+            } satisfies CSSModulesKitRenameInfoRequest['arguments'],
+          );
+          // If the response does not contain any results, return undefined to fall back to standard CSS Language Server.
+          if (!res.success || !res.body || !res.body.result.canRename) return;
+          return new vscode.Range(
+            document.positionAt(res.body.result.triggerSpan.start),
+            document.positionAt(res.body.result.triggerSpan.start + res.body.result.triggerSpan.length),
+          );
+        },
+      },
+    ),
+    vscode.languages.registerDocumentLinkProvider(
+      { scheme: 'file', language: 'css' },
+      {
+        async provideDocumentLinks(document, _token) {
+          const res = await vscode.commands.executeCommand<CSSModulesKitDocumentLinkResponse>(
+            'typescript.tsserverRequest',
+            '_css-modules-kit:documentLink',
+            {
+              fileName: document.fileName,
+            } satisfies CSSModulesKitDocumentLinkRequest['arguments'],
+          );
+          // If the response does not contain any results, return undefined to fall back to standard CSS Language Server.
+          if (!res.success || !res.body || res.body.result.length === 0) return;
+          return res.body.result.map((link) => {
+            return new vscode.DocumentLink(
+              new vscode.Range(
+                document.positionAt(link.textSpan.start),
+                document.positionAt(link.textSpan.start + link.textSpan.length),
+              ),
+              vscode.Uri.file(link.fileName),
+            );
+          });
+        },
+      },
+    ),
+  );
 }

Original file line number	Diff line number	Diff line change
`@@ -56,3 +56,12 @@ export function convertDefaultImportsToNamespaceImports(`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`	`}`
	`59`	`+`
	`60`	`+export function getConfiguredProjectForFile(`
	`61`	`+ projectService: ts.server.ProjectService,`
	`62`	`+ fileName: string,`
	`63`	`+): ts.server.ConfiguredProject \| undefined {`
	`64`	`+ const project = projectService.getDefaultProjectForFile(ts.server.toNormalizedPath(fileName), false);`
	`65`	`+ if (!project \|\| project.projectKind !== ts.server.ProjectKind.Configured) return;`
	`66`	`+ return project as ts.server.ConfiguredProject;`
	`67`	`+}`