fix(ts-plugin): omit default export from namespace member completion (#410)

* fix(ts-plugin): omit default export from namespace member completion

When `namedExports` is enabled and `prioritizeNamedImports` is disabled, the
generated d.ts adds `export default styles` so the `styles` binding shows up as
an auto-import suggestion. As a side effect, the default export leaked into
namespace member completions (`import * as styles from './a.module.css'; styles.`)
as a `default` member that the CSS module does not export.

Filter out the `default` member when the completion accesses a namespace import
of a CSS module. The CSS module is detected by resolving the accessed binding to
its source file via `getDefinitionAtPosition`, sharing the property access lookup
with `code-fix.ts` through the new `language-service/ast.ts`.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* test(ts-plugin): trigger completion exactly at `styles.` in namespace test

Change the fixture from `styles.a_1` to `styles.` and send the completion
request immediately after the dot, so the test directly covers the
`styles.|` regression scenario described in the PR.

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: mizdra

.changeset/namespace-default-completion.md

@@ -0,0 +1,7 @@
+---
+'@css-modules-kit/ts-plugin': patch
+---
+
+fix(ts-plugin): omit the `default` member from namespace member completion
+
+When `namedExports` is enabled and `prioritizeNamedImports` is disabled, completing members of a namespace import (`import * as styles from './a.module.css'; styles.`) no longer suggests a `default` member that the CSS module does not export.

packages/ts-plugin/e2e-test/completion.test.ts

@@ -189,9 +189,9 @@ describe.each([{ namedExports: false }, { namedExports: true }])('namedExports:
   });
 });
 
-describe('named token completion (namedExports: true)', () => {
+describe('prioritizeNamedImports (namedExports: true)', () => {
   describe('prioritizeNamedImports: false', () => {
-    test('omits named tokens from suggestions', async () => {
+    test('omits named token auto-imports', async () => {
       const { iff, getRange } = await setupFixture({
         'tsconfig.json': buildTSConfigJSON({
           cmkOptions: { namedExports: true, prioritizeNamedImports: false },
@@ -213,10 +213,36 @@ describe('named token completion (namedExports: true)', () => {
         [],
       );
     });
+
+    test('omits the default export from namespace member completion', async () => {
+      const { iff, getRange } = await setupFixture({
+        'tsconfig.json': buildTSConfigJSON({
+          cmkOptions: { namedExports: true, prioritizeNamedImports: false },
+        }),
+        'index.ts': dedent`
+          import * as styles from './a.module.css';
+          styles.
+        `,
+        'a.module.css': `.a_1 { color: red; }`,
+      });
+      await tsserver.sendUpdateOpen({ openFiles: [{ file: iff.paths['index.ts'] }] });
+      await tsserver.sendConfigure({
+        preferences: { includeCompletionsForModuleExports: true },
+      });
+
+      const res = await tsserver.sendCompletionInfo({
+        file: iff.paths['index.ts'],
+        ...getRange('index.ts', 'styles.').end,
+      });
+
+      const names = res.body?.entries.map((entry) => entry.name) ?? [];
+      expect(names).toContain('a_1');
+      expect(names).not.toContain('default');
+    });
   });
 
   describe('prioritizeNamedImports: true', () => {
-    test('omits the default styles binding from suggestions', async () => {
+    test('omits the styles binding auto-import', async () => {
       const { iff, getRange } = await setupFixture({
         'tsconfig.json': buildTSConfigJSON({
           cmkOptions: { namedExports: true, prioritizeNamedImports: true },
@@ -239,7 +265,7 @@ describe('named token completion (namedExports: true)', () => {
       ).toStrictEqual([]);
     });
 
-    test('suggests named token bindings', async () => {
+    test('suggests named token auto-imports', async () => {
       const { iff, getRange } = await setupFixture({
         'tsconfig.json': buildTSConfigJSON({
           cmkOptions: { namedExports: true, prioritizeNamedImports: true },

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

@@ -0,0 +1,15 @@
+import ts from 'typescript';
+
+/** Get the property access expression at the specified position. (e.g. `obj.foo`, `styles.foo`) */
+export function getPropertyAccessExpressionAtPosition(
+  sourceFile: ts.SourceFile,
+  position: number,
+): ts.PropertyAccessExpression | undefined {
+  function find(node: ts.Node): ts.PropertyAccessExpression | undefined {
+    if (node.pos <= position && position <= node.end && ts.isPropertyAccessExpression(node)) {
+      return node;
+    }
+    return ts.forEachChild(node, find);
+  }
+  return find(sourceFile);
+}

packages/ts-plugin/src/language-service/feature/code-fix.ts

@@ -1,8 +1,9 @@
 import type { CMKConfig, Resolver } from '@css-modules-kit/core';
 import { isCSSModuleFile } from '@css-modules-kit/core';
 import type { Language } from '@volar/language-core';
-import ts from 'typescript';
+import type ts from 'typescript';
 import { convertDefaultImportsToNamespaceImports, createPreferencesForCompletion } from '../../util.js';
+import { getPropertyAccessExpressionAtPosition } from '../ast.js';
 
 // ref: https://github.com/microsoft/TypeScript/blob/220706eb0320ff46fad8bf80a5e99db624ee7dfb/src/compiler/diagnosticMessages.json
 export const CANNOT_FIND_NAME_ERROR_CODE = 2304;
@@ -115,20 +116,6 @@ function getTokenConsumerAtPosition(
   return undefined;
 }
 
-/** Get the property access expression at the specified position. (e.g. `obj.foo`, `styles.foo`) */
-function getPropertyAccessExpressionAtPosition(
-  sourceFile: ts.SourceFile,
-  position: number,
-): ts.PropertyAccessExpression | undefined {
-  function getPropertyAccessExpressionImpl(node: ts.Node): ts.PropertyAccessExpression | undefined {
-    if (node.pos <= position && position <= node.end && ts.isPropertyAccessExpression(node)) {
-      return node;
-    }
-    return ts.forEachChild(node, getPropertyAccessExpressionImpl);
-  }
-  return getPropertyAccessExpressionImpl(sourceFile);
-}
-
 function createInsertRuleFileChange(
   cssModuleFileName: string,
   className: string,

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

@@ -2,6 +2,9 @@ import type { CMKConfig, Resolver } from '@css-modules-kit/core';
 import { getCssModuleFileName, isComponentFileName, isCSSModuleFile, STYLES_EXPORT_NAME } from '@css-modules-kit/core';
 import ts from 'typescript';
 import { convertDefaultImportsToNamespaceImports, createPreferencesForCompletion } from '../../util.js';
+import { getPropertyAccessExpressionAtPosition } from '../ast.js';
+
+const DEFAULT_EXPORT_NAME = 'default';
 
 export function getCompletionsAtPosition(
   languageService: ts.LanguageService,
@@ -44,11 +47,43 @@ export function getCompletionsAtPosition(
       // ```
       // Therefore, completion for tokens like `button` is disabled.
       prior.entries = prior.entries.filter((entry) => !isNamedExportedTokenEntry(entry));
+
+      // The d.ts adds `export default styles` so that the `styles` binding appears as an auto-import
+      // suggestion. As a side effect, the default export leaks into namespace member completions
+      // (`import * as styles from './a.module.css'; styles.|`) as a `default` member. The `default`
+      // member is not a token of the CSS module, so it is removed.
+      if (
+        prior.isMemberCompletion &&
+        prior.entries.some((entry) => entry.name === DEFAULT_EXPORT_NAME) &&
+        isCSSModuleNamespaceAccess(languageService, fileName, position)
+      ) {
+        prior.entries = prior.entries.filter((entry) => entry.name !== DEFAULT_EXPORT_NAME);
+      }
     }
     return prior;
   };
 }
 
+/**
+ * Check if the completion position accesses a member of a namespace import of a CSS module
+ * (e.g. the `styles.|` position in `import * as styles from './a.module.css'; styles.|`).
+ */
+function isCSSModuleNamespaceAccess(languageService: ts.LanguageService, fileName: string, position: number): boolean {
+  const sourceFile = languageService.getProgram()?.getSourceFile(fileName);
+  if (!sourceFile) return false;
+
+  const propertyAccess = getPropertyAccessExpressionAtPosition(sourceFile, position);
+  if (!propertyAccess) return false;
+
+  // Resolve the accessed expression (e.g. `styles` in `styles.foo`) to its CSS module file.
+  // The first definition points to the `styles` binding of `import * as styles from './a.module.css'`
+  // in this file, and the second resolves that binding to the CSS module file.
+  const [binding] = languageService.getDefinitionAtPosition(fileName, propertyAccess.expression.getStart()) ?? [];
+  if (!binding) return false;
+  const [moduleDefinition] = languageService.getDefinitionAtPosition(binding.fileName, binding.textSpan.start) ?? [];
+  return moduleDefinition !== undefined && isCSSModuleFile(moduleDefinition.fileName);
+}
+
 type DefaultExportedStylesEntry = ts.CompletionEntry & {
   data: ts.CompletionEntryData;
 };