Implement "Request Forwarding to tsserver"

[mizdra]

close: #121
close: #206

Background

The tsserver loaded with ts-plugin will respond to LSP requests for .css. Meanwhile, the standard CSS Language Server also responds to LSP requests for .css.

Which Language Server processes a request depends on the request type. "completions" and "references" requests are sent to both Language Servers, and the merged responses are used. "rename" requests are sent only to the highest-priority Language Server, and its response is used.

The priority of Language Servers depends on the editor and its user settings. Zed allows users to control this with the languages.CSS.language_servers option. In VS Code, the standard CSS Language Server has the highest priority and cannot be controlled by the user.

In VS Code, "rename" and "documentLink" requests are sent only to the standard CSS Language Server, not to tsserver. As a result, there are some bugs in VS Code.

• Renaming classes from .css does not work in VS Code #121
• Go to Definition for specifiers fails using import alias in VS Code #206

Proposed changes

Use the VS Code Extension API to pseudo-change the priority of the Language Server used for "rename" and "documentLink" requests. I call this approach "Request Forwarding to tsserver".

First, register the provider that receives ‘rename’ and “documentLink” requests in the VS Code Extension. Use the following API to do this.

• https://code.visualstudio.com/api/language-extensions/programmatic-language-features#language-features-listing

Next, send "rename" and "documentLink" requests from the provider to tsserver. Use vscode.commands.executeCommand('typescript.tsserverRequest', '_xxx', request) and info.session.addProtocolHandler('_xxx', (request) => {...}) to do this.

• https://x.com/mizdra/status/1936379667633910027

Finally, convert the response from tsserver into the format expected by the provider. This ensures that "rename" and "documentLink" requests are sent to tsserver.

The following code demonstrates the concept:

// packages/vscode/index.ts

// ...
export function activate(context: vscode.ExtensionContext) {
  // ...
  context.subscriptions.push(
    // ...
    vscode.languages.registerRenameProvider(
      { scheme: 'file', language: 'css' },
      {
        async provideRenameEdits(document, position, newName, _token) {
          const res = await vscode.commands.executeCommand(
            'typescript.tsserverRequest',
            '_css-modules-kit:rename',
            {
              fileName: document.fileName,
              position: document.offsetAt(position),
            },
          );
          // 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) {
            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;
        },
        // ...
      },
    ),
  );
}

// packages/ts-plugin/index.ts

// ...
const plugin = createLanguageServicePlugin((ts, info) => {
  // ...
  info.session?.addProtocolHandler('_css-modules-kit:rename', () => {
    const project = getConfiguredProjectForFile(ts, info.project, request.arguments.fileName);
    if (!project) return {};
    const languageService = project.getLanguageService();
    const { fileName, position } = request.arguments;
    const result = languageService.findRenameLocations(fileName, position, false, false, {});
    return { response: { result } };
  });
  // ...
});
export = plugin;

Video

2025-06-23.0.59.05.mov

2025-06-23.1.00.37.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: d00ba1c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@css-modules-kit/ts-plugin	Patch
css-modules-kit-vscode	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mizdra]

TODO:

• Add comments
• Organize commits
• Add changelog
• Add tests?
  • I will add it later.

[mizdra]

A long-standing problem has been resolved! 🎉