fix: fix rename bug

Author: apple-yagi

packages/core/src/dts-generator.ts

@@ -38,6 +38,8 @@ interface GenerateDtsResult {
   text: string;
   mapping: CodeMapping;
   linkedCodeMapping: LinkedCodeMapping;
+  /** Additional mappings used by ts-plugin (e.g. quoted string literal keys). */
+  extraMappings?: CodeMapping[];
 }
 
 /**
@@ -113,7 +115,7 @@ function generateNamedExportsDts(
   localTokens: Token[],
   tokenImporters: TokenImporter[],
   options: GenerateDtsOptions,
-): { text: string; mapping: CodeMapping; linkedCodeMapping: LinkedCodeMapping } {
+): GenerateDtsResult {
   const mapping: CodeMapping = { sourceOffsets: [], lengths: [], generatedOffsets: [] };
   const linkedCodeMapping: LinkedCodeMapping = {
     sourceOffsets: [],
@@ -263,11 +265,10 @@ function generateNamedExportsDts(
 }
 
 /** Generate a d.ts file with a default export. */
-function generateDefaultExportDts(
-  localTokens: Token[],
-  tokenImporters: TokenImporter[],
-): { text: string; mapping: CodeMapping; linkedCodeMapping: LinkedCodeMapping } {
+function generateDefaultExportDts(localTokens: Token[], tokenImporters: TokenImporter[]): GenerateDtsResult {
   const mapping: CodeMapping = { sourceOffsets: [], lengths: [], generatedOffsets: [], generatedLengths: [] };
+  //
+  const quotedMapping: CodeMapping = { sourceOffsets: [], lengths: [], generatedOffsets: [], generatedLengths: [] };
   const linkedCodeMapping: LinkedCodeMapping = {
     sourceOffsets: [],
     lengths: [],
@@ -326,16 +327,31 @@ function generateDefaultExportDts(
      */
 
     text += `  `;
-    mapping.sourceOffsets.push(token.loc.start.offset);
-    mapping.generatedOffsets.push(text.length);
-    mapping.lengths.push(token.name.length);
     if (isValidAsJSIdentifier(token.name)) {
+      mapping.sourceOffsets.push(token.loc.start.offset);
+      mapping.lengths.push(token.name.length);
+      mapping.generatedOffsets.push(text.length);
       mapping.generatedLengths!.push(token.name.length);
       text += `${token.name}: '' as readonly string,\n`;
     } else {
-      // Include quotes in the mapping for invalid JS identifiers
-      mapping.generatedLengths!.push(token.name.length + 2);
-      text += `'${token.name}': '' as readonly string,\n`;
+      const quoteStart = text.length;
+      text += `'`;
+      const keyStart = text.length;
+      // Map unquoted range in the primary mapping.
+      // This mapping is necessary when renaming.
+      // When performing a rename, the textSpan does not include quotes,
+      // but for "go to definition," the textSpan includes quotes, which necessitates a dual mapping.
+      mapping.sourceOffsets.push(token.loc.start.offset);
+      mapping.lengths.push(token.name.length);
+      mapping.generatedOffsets.push(keyStart);
+      mapping.generatedLengths!.push(token.name.length);
+      // Map quoted range separately to avoid overlapping ranges in a single mapping.
+      // This mapping is necessary for features like "go to definition".
+      quotedMapping.sourceOffsets.push(token.loc.start.offset);
+      quotedMapping.lengths.push(token.name.length);
+      quotedMapping.generatedOffsets.push(quoteStart);
+      quotedMapping.generatedLengths!.push(token.name.length + 2);
+      text += `${token.name}': '' as readonly string,\n`;
     }
   }
   for (const tokenImporter of tokenImporters) {
@@ -438,6 +454,9 @@ function generateDefaultExportDts(
     }
   }
   text += `};\nexport default ${STYLES_EXPORT_NAME};\n`;
+  if (quotedMapping.sourceOffsets.length) {
+    return { text, mapping, linkedCodeMapping, extraMappings: [quotedMapping] };
+  }
   return { text, mapping, linkedCodeMapping };
 }
 

packages/ts-plugin/e2e-test/feature/rename-symbol.test.ts

@@ -387,23 +387,22 @@ describe('Rename Symbol', async () => {
         },
       ],
     },
-    // TODO
-    // {
-    //   name: 'e-1 in index.ts',
-    //   file: iff.paths['index.ts'],
-    //   line: 9,
-    //   offset: 9,
-    //   expected: [
-    //     {
-    //       file: formatPath(iff.paths['index.ts']),
-    //       locs: [{ start: { line: 9, offset: 9 }, end: { line: 9, offset: 12 } }],
-    //     },
-    //     {
-    //       file: formatPath(iff.paths['a.module.css']),
-    //       locs: [{ start: { line: 6, offset: 2 }, end: { line: 6, offset: 5 } }],
-    //     },
-    //   ],
-    // },
+    {
+      name: 'e-1 in index.ts',
+      file: iff.paths['index.ts'],
+      line: 9,
+      offset: 9,
+      expected: [
+        {
+          file: formatPath(iff.paths['index.ts']),
+          locs: [{ start: { line: 9, offset: 9 }, end: { line: 9, offset: 12 } }],
+        },
+        {
+          file: formatPath(iff.paths['a.module.css']),
+          locs: [{ start: { line: 6, offset: 2 }, end: { line: 6, offset: 5 } }],
+        },
+      ],
+    },
   ])('Rename Symbol for $name', async ({ file, line, offset, expected }) => {
     const res = await tsserver.sendRename({
       file,

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

@@ -52,7 +52,10 @@ export function createCSSLanguagePlugin(
         keyframes: config.keyframes,
       });
       // eslint-disable-next-line prefer-const
-      let { text, mapping, linkedCodeMapping } = generateDts(cssModule, { ...config, forTsPlugin: true });
+      let { text, mapping, linkedCodeMapping, extraMappings } = generateDts(cssModule, {
+        ...config,
+        forTsPlugin: true,
+      });
       return {
         id: 'main',
         languageId: 'typescript',
@@ -62,7 +65,10 @@ export function createCSSLanguagePlugin(
           getChangeRange: () => undefined,
         },
         // `mappings` are required to support "Go to Definition" and renaming
-        mappings: [{ ...mapping, data: { navigation: true } }],
+        mappings: [
+          { ...mapping, data: { navigation: true } },
+          ...(extraMappings?.map((m) => ({ ...m, data: { navigation: true } })) ?? []),
+        ],
         // `linkedCodeMappings` are required to support "Go to Definition" and renaming for the imported tokens
         linkedCodeMappings: [{ ...linkedCodeMapping, data: undefined }],
         [CMK_DATA_KEY]: cssModule,