fix failure to add missing rule for named exports

Author: mizdra

packages/ts-plugin/e2e/named-exports.test.ts

@@ -2,6 +2,7 @@
 import dedent from 'dedent';
 import ts from 'typescript';
 import { describe, expect, test } from 'vitest';
+import { PROPERTY_DOES_NOT_EXIST_ERROR_CODES } from '../src/language-service/feature/code-fix.js';
 import { createIFF } from './test-util/fixture.js';
 import {
   formatPath,
@@ -442,4 +443,51 @@ describe('supports code fixes', async () => {
       expect(normalizeCodeFixActions(res.body!)).toStrictEqual(normalizeCodeFixActions(expected));
     });
   });
+  test('supports adding missing CSS rules', async () => {
+    const iff = await createIFF({
+      'a.tsx': dedent`
+        import * as styles from './a.module.css';
+        styles.a_1;
+      `,
+      'a.module.css': '',
+      'tsconfig.json': dedent`
+        {
+          "cmkOptions": {
+            "namedExports": true
+          }
+        }
+    `,
+    });
+    const tsserver = launchTsserver();
+    await tsserver.sendUpdateOpen({
+      openFiles: [{ file: iff.paths['tsconfig.json'] }],
+    });
+    const res = await tsserver.sendGetCodeFixes({
+      errorCodes: [PROPERTY_DOES_NOT_EXIST_ERROR_CODES[0]],
+      file: iff.paths['a.tsx'],
+      startLine: 2,
+      startOffset: 8,
+      endLine: 2,
+      endOffset: 11,
+    });
+    expect(normalizeCodeFixActions(res.body!)).toStrictEqual(
+      normalizeCodeFixActions([
+        {
+          fixName: 'fixMissingCSSRule',
+          changes: [
+            {
+              fileName: formatPath(iff.paths['a.module.css']),
+              textChanges: [
+                {
+                  start: { line: 1, offset: 1 },
+                  end: { line: 1, offset: 1 },
+                  newText: '\n.a_1 {\n  \n}',
+                },
+              ],
+            },
+          ],
+        },
+      ]),
+    );
+  });
 });

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

@@ -2,7 +2,6 @@ import type { CMKConfig, Resolver } from '@css-modules-kit/core';
 import { isComponentFileName, isCSSModuleFile } from '@css-modules-kit/core';
 import type { Language } from '@volar/language-core';
 import ts from 'typescript';
-import { isCSSModuleScript } from '../../language-plugin.js';
 import { convertDefaultImportsToNamespaceImports, createPreferencesForCompletion } from '../../util.js';
 
 // ref: https://github.com/microsoft/TypeScript/blob/220706eb0320ff46fad8bf80a5e99db624ee7dfb/src/compiler/diagnosticMessages.json
@@ -37,7 +36,7 @@ export function getCodeFixesAtPosition(
     if (isComponentFileName(fileName)) {
       // If a user is trying to use a non-existent token (e.g. `styles.nonExistToken`), provide a code fix to add the token.
       if (errorCodes.some((errorCode) => PROPERTY_DOES_NOT_EXIST_ERROR_CODES.includes(errorCode))) {
-        const tokenConsumer = getTokenConsumerAtPosition(fileName, start, language, languageService, project);
+        const tokenConsumer = getTokenConsumerAtPosition(fileName, start, languageService, project, config);
         if (tokenConsumer) {
           prior.push({
             fixName: 'fixMissingCSSRule',
@@ -85,9 +84,9 @@ interface TokenConsumer {
 function getTokenConsumerAtPosition(
   fileName: string,
   position: number,
-  language: Language<string>,
   languageService: ts.LanguageService,
   project: ts.server.Project,
+  config: CMKConfig,
 ): TokenConsumer | undefined {
   const sourceFile = project.getSourceFile(project.projectService.toPath(fileName));
   if (!sourceFile) return undefined;
@@ -99,11 +98,19 @@ function getTokenConsumerAtPosition(
   // `expression` is the expression of the property access expression (e.g. `styles` in `styles.foo`).
   const expression = propertyAccessExpression.expression;
 
-  const definitions = languageService.getDefinitionAtPosition(fileName, expression.getStart());
-  if (definitions && definitions[0]) {
-    const script = language.scripts.get(definitions[0].fileName);
-    if (isCSSModuleScript(script)) {
-      return { tokenName: propertyAccessExpression.name.text, from: definitions[0].fileName };
+  let [definition] = languageService.getDefinitionAtPosition(fileName, expression.getStart()) ?? [];
+  if (!definition) return undefined;
+
+  // `definition` is may be `styles` definition in CSS Modules file.
+  if (isCSSModuleFile(definition.fileName)) {
+    return { tokenName: propertyAccessExpression.name.text, from: definition.fileName };
+  } else if (config.namedExports) {
+    // If namespaced import is used, it may be a definition in a component file
+    // (e.g. the `styles` of `import * as styles from './a.module.css'`).
+    // In that case, we need to call `getDefinitionAtPosition` again to get the definition in CSS module file.
+    [definition] = languageService.getDefinitionAtPosition(definition.fileName, definition.textSpan.start) ?? [];
+    if (definition && isCSSModuleFile(definition.fileName)) {
+      return { tokenName: propertyAccessExpression.name.text, from: definition.fileName };
     }
   }
   return undefined;