Fix className completion entry to support single quotes (#175)

* Refactor tests

* Add test for className completion

* Fix className completion entry to support single quotes

Author: mizdra

.changeset/social-hoops-flash.md

@@ -0,0 +1,5 @@
+---
+'@css-modules-kit/ts-plugin': patch
+---
+
+Fix className completion entry to support single quotes

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

@@ -25,6 +25,10 @@ describe('Completion', async () => {
       styles;
       const jsx = <div className />;
     `,
+    'b.tsx': dedent`
+      import styles from './b.module.css';
+      const jsx = <div className />;
+    `,
     'a.module.css': '',
     'b.module.css': '',
     'tsconfig.json': dedent`
@@ -48,11 +52,13 @@ describe('Completion', async () => {
       includeCompletionsWithSnippetText: true,
       includeCompletionsWithInsertText: true,
       jsxAttributeCompletionStyle: 'auto',
+      quotePreference: 'single',
     },
   });
   test.each([
     {
       name: 'styles',
+      entryName: 'styles',
       file: iff.paths['a.tsx'],
       line: 1,
       offset: 7,
@@ -62,18 +68,43 @@ describe('Completion', async () => {
       ],
     },
     {
-      name: 'className',
+      name: "className with `quotePreference: 'double'`",
+      entryName: 'className',
+      quotePreference: 'double' as const,
       file: iff.paths['a.tsx'],
       line: 2,
       offset: 27,
       expected: [{ name: 'className', insertText: 'className={$1}', sortText: expect.anything() }],
     },
-  ])('Completions for $name', async ({ name, file, line, offset, expected }) => {
+    {
+      name: "className with `quotePreference: 'single'`",
+      entryName: 'className',
+      quotePreference: 'single' as const,
+      file: iff.paths['b.tsx'],
+      line: 2,
+      offset: 27,
+      expected: [{ name: 'className', insertText: 'className={$1}', sortText: expect.anything() }],
+    },
+  ])('Completions for $name', async ({ entryName, quotePreference, file, line, offset, expected }) => {
+    await tsserver.sendConfigure({
+      preferences: {
+        quotePreference: quotePreference ?? 'auto',
+      },
+    });
     const res = await tsserver.sendCompletionInfo({
       file,
       line,
       offset,
     });
-    expect(simplifyEntry(res.body?.entries.filter((entry) => entry.name === name) ?? [])).toStrictEqual(expected);
+    expect(
+      simplifyEntry(res.body?.entries.filter((entry) => entry.name === entryName) ?? []).sort(compareEntries),
+    ).toStrictEqual(expected.sort(compareEntries));
   });
 });
+
+function compareEntries(
+  a: Partial<ts.server.protocol.CompletionEntry>,
+  b: Partial<ts.server.protocol.CompletionEntry>,
+) {
+  return a.sortText?.localeCompare(b.sortText ?? '') || 0;
+}

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

@@ -42,7 +42,7 @@ function isClassNamePropEntry(entry: ts.CompletionEntry) {
   return (
     entry.name === 'className' &&
     entry.kind === ts.ScriptElementKind.memberVariableElement &&
-    entry.insertText === 'className="$1"' &&
+    (entry.insertText === 'className="$1"' || entry.insertText === "className='$1'") &&
     entry.isSnippet
   );
 }