exclude tokens from completion entries

Author: mizdra

packages/ts-plugin/src/index.ts

@@ -46,6 +46,7 @@ const plugin = createLanguageServicePlugin((ts, info) => {
         info.project,
         resolver,
         matchesPattern,
+        config,
       );
     },
   };

packages/ts-plugin/src/language-service/feature/completion.ts

@@ -1,13 +1,16 @@
-import { getCssModuleFileName, isComponentFileName, STYLES_EXPORT_NAME } from '@css-modules-kit/core';
+import type { CMKConfig } from '@css-modules-kit/core';
+import { getCssModuleFileName, isComponentFileName, isCSSModuleFile, STYLES_EXPORT_NAME } from '@css-modules-kit/core';
 import ts from 'typescript';
 
 export function getCompletionsAtPosition(
   languageService: ts.LanguageService,
+  config: CMKConfig,
 ): ts.LanguageService['getCompletionsAtPosition'] {
   return (fileName, position, options, formattingSettings) => {
     const prior = languageService.getCompletionsAtPosition(fileName, position, options, formattingSettings);
+    if (!prior) return undefined;
 
-    if (isComponentFileName(fileName) && prior) {
+    if (isComponentFileName(fileName)) {
       const cssModuleFileName = getCssModuleFileName(fileName);
       for (const entry of prior.entries) {
         if (isStylesEntryForCSSModuleFile(entry, cssModuleFileName)) {
@@ -20,6 +23,20 @@ export function getCompletionsAtPosition(
         }
       }
     }
+    if (config.namedExports) {
+      // When namedExports is enabled, you can write code as follows:
+      // ```ts
+      // import { button } from './a.module.css';
+      // const Button = () => <button className={button}>Click me!</button>;
+      // ```
+      // However, it is more common to use namespace imports for styles.
+      // ```ts
+      // import * as styles from './a.module.css';
+      // const Button = () => <button className={styles.button}>Click me!</button>;
+      // ```
+      // Therefore, completion for tokens like `button` is disabled.
+      prior.entries = prior.entries.filter((entry) => !isTokenEntry(entry));
+    }
     return prior;
   };
 }
@@ -38,6 +55,10 @@ function isStylesEntryForCSSModuleFile(entry: ts.CompletionEntry, cssModuleFileN
   );
 }
 
+function isTokenEntry(entry: ts.CompletionEntry) {
+  return entry.source && isCSSModuleFile(entry.source);
+}
+
 function isClassNamePropEntry(entry: ts.CompletionEntry) {
   return (
     entry.name === 'className' &&

packages/ts-plugin/src/language-service/proxy.ts

@@ -1,3 +1,4 @@
+import type { CMKConfig } from '@css-modules-kit/core';
 import { createExportBuilder, type MatchesPattern, type Resolver } from '@css-modules-kit/core';
 import type { Language } from '@volar/language-core';
 import type ts from 'typescript';
@@ -8,12 +9,14 @@ import { getApplicableRefactors, getEditsForRefactor } from './feature/refactor.
 import { getSemanticDiagnostics } from './feature/semantic-diagnostic.js';
 import { getSyntacticDiagnostics } from './feature/syntactic-diagnostic.js';
 
+// eslint-disable-next-line max-params
 export function proxyLanguageService(
   language: Language<string>,
   languageService: ts.LanguageService,
   project: ts.server.Project,
   resolver: Resolver,
   matchesPattern: MatchesPattern,
+  config: CMKConfig,
 ): ts.LanguageService {
   const proxy: ts.LanguageService = Object.create(null);
 
@@ -44,7 +47,7 @@ export function proxyLanguageService(
   );
   proxy.getApplicableRefactors = getApplicableRefactors(languageService, project);
   proxy.getEditsForRefactor = getEditsForRefactor(languageService);
-  proxy.getCompletionsAtPosition = getCompletionsAtPosition(languageService);
+  proxy.getCompletionsAtPosition = getCompletionsAtPosition(languageService, config);
   proxy.getCodeFixesAtPosition = getCodeFixesAtPosition(language, languageService, project);
 
   return proxy;