@css-modules-kit/ts-plugin 0.0.1

package/src/language-service/feature/completion.ts

@@ -0,0 +1,48 @@
+import { getCssModuleFileName, isComponentFileName, STYLES_EXPORT_NAME } from '@css-modules-kit/core';
+import ts from 'typescript';
+
+export function getCompletionsAtPosition(
+  languageService: ts.LanguageService,
+): ts.LanguageService['getCompletionsAtPosition'] {
+  return (fileName, position, options, formattingSettings) => {
+    const prior = languageService.getCompletionsAtPosition(fileName, position, options, formattingSettings);
+
+    if (isComponentFileName(fileName) && prior) {
+      const cssModuleFileName = getCssModuleFileName(fileName);
+      for (const entry of prior.entries) {
+        if (isStylesEntryForCSSModuleFile(entry, cssModuleFileName)) {
+          // Prioritize the completion of the `styles' import for the current .ts file for usability.
+          // NOTE: This is a hack to make the completion item appear at the top
+          entry.sortText = '0';
+        } else if (isClassNamePropEntry(entry)) {
+          // Complete `className={...}` instead of `className="..."` for usability.
+          entry.insertText = 'className={$1}';
+        }
+      }
+    }
+    return prior;
+  };
+}
+
+/**
+ * Check if the completion entry is the `styles` entry for the CSS module file.
+ */
+function isStylesEntryForCSSModuleFile(entry: ts.CompletionEntry, cssModuleFileName: string) {
+  return (
+    entry.name === STYLES_EXPORT_NAME &&
+    entry.data &&
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+    entry.data.exportName === ts.InternalSymbolName.Default &&
+    entry.data.fileName &&
+    entry.data.fileName === cssModuleFileName
+  );
+}
+
+function isClassNamePropEntry(entry: ts.CompletionEntry) {
+  return (
+    entry.name === 'className' &&
+    entry.kind === ts.ScriptElementKind.memberVariableElement &&
+    entry.insertText === 'className="$1"' &&
+    entry.isSnippet
+  );
+}

package/src/language-service/feature/refactor.ts

@@ -0,0 +1,52 @@
+import { getCssModuleFileName, isComponentFileName } from '@css-modules-kit/core';
+import type ts from 'typescript';
+
+export const createCssModuleFileRefactor = {
+  name: 'Create CSS Module file',
+  description: 'Create CSS Module file',
+  actions: [{ name: 'Create CSS Module file', description: 'Create CSS Module file for current file' }],
+} as const satisfies ts.ApplicableRefactorInfo;
+
+export function getApplicableRefactors(
+  languageService: ts.LanguageService,
+  project: ts.server.Project,
+): ts.LanguageService['getApplicableRefactors'] {
+  return (fileName, positionOrRange, preferences) => {
+    const prior = languageService.getApplicableRefactors(fileName, positionOrRange, preferences) ?? [];
+    if (isComponentFileName(fileName)) {
+      // If the CSS Module file does not exist, provide a refactor to create it.
+      if (!project.fileExists(getCssModuleFileName(fileName))) {
+        prior.push(createCssModuleFileRefactor);
+      }
+    }
+    return prior;
+  };
+}
+
+export function getEditsForRefactor(languageService: ts.LanguageService): ts.LanguageService['getEditsForRefactor'] {
+  // eslint-disable-next-line max-params
+  return (fileName, formatOptions, positionOrRange, refactorName, actionName, preferences) => {
+    const prior = languageService.getEditsForRefactor(
+      fileName,
+      formatOptions,
+      positionOrRange,
+      refactorName,
+      actionName,
+      preferences,
+    ) ?? { edits: [] };
+    if (isComponentFileName(fileName)) {
+      if (refactorName === createCssModuleFileRefactor.name) {
+        prior.edits.push(createNewCssModuleFileChange(getCssModuleFileName(fileName)));
+      }
+    }
+    return prior;
+  };
+}
+
+function createNewCssModuleFileChange(cssFilename: string): ts.FileTextChanges {
+  return {
+    fileName: cssFilename,
+    textChanges: [{ span: { start: 0, length: 0 }, newText: '' }],
+    isNewFile: true,
+  };
+}

package/src/language-service/feature/semantic-diagnostic.ts

@@ -0,0 +1,49 @@
+import type { CSSModule, ExportBuilder, MatchesPattern, Resolver, SemanticDiagnostic } from '@css-modules-kit/core';
+import { checkCSSModule } from '@css-modules-kit/core';
+import type { Language } from '@volar/language-core';
+import ts from 'typescript';
+import { CMK_DATA_KEY, isCSSModuleScript } from '../../language-plugin.js';
+import { convertErrorCategory, TS_ERROR_CODE_FOR_CMK_ERROR } from '../../util.js';
+
+// eslint-disable-next-line max-params
+export function getSemanticDiagnostics(
+  language: Language<string>,
+  languageService: ts.LanguageService,
+  exportBuilder: ExportBuilder,
+  resolver: Resolver,
+  matchesPattern: MatchesPattern,
+  getCSSModule: (path: string) => CSSModule | undefined,
+): ts.LanguageService['getSemanticDiagnostics'] {
+  return (fileName: string) => {
+    const prior = languageService.getSemanticDiagnostics(fileName);
+    const script = language.scripts.get(fileName);
+    if (isCSSModuleScript(script)) {
+      const virtualCode = script.generated.root;
+      const cssModule = virtualCode[CMK_DATA_KEY].cssModule;
+      const diagnostics = checkCSSModule(cssModule, exportBuilder, matchesPattern, resolver, getCSSModule);
+      const sourceFile = languageService.getProgram()!.getSourceFile(fileName)!;
+      const tsDiagnostics = diagnostics.map((diagnostic) => convertDiagnostic(diagnostic, sourceFile));
+      prior.push(...tsDiagnostics);
+    }
+    return prior;
+  };
+}
+
+function convertDiagnostic(diagnostic: SemanticDiagnostic, sourceFile: ts.SourceFile): ts.Diagnostic {
+  const start =
+    diagnostic.start ?
+      ts.getPositionOfLineAndCharacter(sourceFile, diagnostic.start.line - 1, diagnostic.start.column - 1)
+    : undefined;
+  const length =
+    start !== undefined && diagnostic.end ?
+      ts.getPositionOfLineAndCharacter(sourceFile, diagnostic.end.line - 1, diagnostic.end.column - 1) - start
+    : undefined;
+  return {
+    file: sourceFile,
+    start,
+    category: convertErrorCategory(diagnostic.category),
+    length,
+    messageText: diagnostic.text,
+    code: TS_ERROR_CODE_FOR_CMK_ERROR,
+  };
+}

package/src/language-service/feature/syntactic-diagnostic.ts

@@ -0,0 +1,39 @@
+import type { SyntacticDiagnostic } from '@css-modules-kit/core';
+import type { Language } from '@volar/language-core';
+import ts from 'typescript';
+import { CMK_DATA_KEY, isCSSModuleScript } from '../../language-plugin.js';
+import { convertErrorCategory, TS_ERROR_CODE_FOR_CMK_ERROR } from '../../util.js';
+
+export function getSyntacticDiagnostics(
+  language: Language<string>,
+  languageService: ts.LanguageService,
+): ts.LanguageService['getSyntacticDiagnostics'] {
+  return (fileName: string) => {
+    const prior = languageService.getSyntacticDiagnostics(fileName);
+    const script = language.scripts.get(fileName);
+    if (isCSSModuleScript(script)) {
+      const virtualCode = script.generated.root;
+      const diagnostics = virtualCode[CMK_DATA_KEY].diagnostics;
+      const sourceFile = languageService.getProgram()!.getSourceFile(fileName)!;
+      const tsDiagnostics = diagnostics.map((diagnostic) => convertDiagnostic(diagnostic, sourceFile));
+      prior.push(...tsDiagnostics);
+    }
+    return prior;
+  };
+}
+
+function convertDiagnostic(diagnostic: SyntacticDiagnostic, sourceFile: ts.SourceFile): ts.DiagnosticWithLocation {
+  const start = ts.getPositionOfLineAndCharacter(sourceFile, diagnostic.start.line - 1, diagnostic.start.column - 1);
+  const length =
+    diagnostic.end ?
+      ts.getPositionOfLineAndCharacter(sourceFile, diagnostic.end.line - 1, diagnostic.end.column - 1) - start
+    : 1;
+  return {
+    file: sourceFile,
+    start,
+    category: convertErrorCategory(diagnostic.category),
+    length,
+    messageText: diagnostic.text,
+    code: TS_ERROR_CODE_FOR_CMK_ERROR,
+  };
+}

package/src/language-service/proxy.ts

@@ -0,0 +1,51 @@
+import { createExportBuilder, type MatchesPattern, 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 { getCodeFixesAtPosition } from './feature/code-fix.js';
+import { getCompletionsAtPosition } from './feature/completion.js';
+import { getApplicableRefactors, getEditsForRefactor } from './feature/refactor.js';
+import { getSemanticDiagnostics } from './feature/semantic-diagnostic.js';
+import { getSyntacticDiagnostics } from './feature/syntactic-diagnostic.js';
+
+export function proxyLanguageService(
+  language: Language<string>,
+  languageService: ts.LanguageService,
+  project: ts.server.Project,
+  resolver: Resolver,
+  matchesPattern: MatchesPattern,
+): ts.LanguageService {
+  const proxy: ts.LanguageService = Object.create(null);
+
+  for (const k of Object.keys(languageService) as (keyof ts.LanguageService)[]) {
+    const x = languageService[k]!;
+    // @ts-expect-error - JS runtime trickery which is tricky to type tersely
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+    proxy[k] = (...args: {}[]) => x.apply(languageService, args);
+  }
+
+  const getCSSModule = (path: string) => {
+    const script = language.scripts.get(path);
+    if (isCSSModuleScript(script)) {
+      return script.generated.root[CMK_DATA_KEY].cssModule;
+    }
+    return undefined;
+  };
+  const exportBuilder = createExportBuilder({ getCSSModule, resolver, matchesPattern });
+
+  proxy.getSyntacticDiagnostics = getSyntacticDiagnostics(language, languageService);
+  proxy.getSemanticDiagnostics = getSemanticDiagnostics(
+    language,
+    languageService,
+    exportBuilder,
+    resolver,
+    matchesPattern,
+    getCSSModule,
+  );
+  proxy.getApplicableRefactors = getApplicableRefactors(languageService, project);
+  proxy.getEditsForRefactor = getEditsForRefactor(languageService);
+  proxy.getCompletionsAtPosition = getCompletionsAtPosition(languageService);
+  proxy.getCodeFixesAtPosition = getCodeFixesAtPosition(language, languageService, project);
+
+  return proxy;
+}

package/src/util.ts

@@ -0,0 +1,19 @@
+import ts from 'typescript';
+
+/** The error code used by tsserver to display the css-modules-kit error in the editor. */
+// NOTE: Use any other number than 1002 or later, as they are reserved by TypeScript's built-in errors.
+// ref: https://github.com/microsoft/TypeScript/blob/220706eb0320ff46fad8bf80a5e99db624ee7dfb/src/compiler/diagnosticMessages.json
+export const TS_ERROR_CODE_FOR_CMK_ERROR = 0;
+
+export function convertErrorCategory(category: 'error' | 'warning' | 'suggestion'): ts.DiagnosticCategory {
+  switch (category) {
+    case 'error':
+      return ts.DiagnosticCategory.Error;
+    case 'warning':
+      return ts.DiagnosticCategory.Warning;
+    case 'suggestion':
+      return ts.DiagnosticCategory.Suggestion;
+    default:
+      throw new Error(`Unknown category: ${String(category)}`);
+  }
+}