Merge pull request #25 from moliva/feat/support-dashes

Support LSP actions in classes with dashes

Author: antonk52

src/CompletionProvider.ts

@@ -83,7 +83,26 @@ export class CSSModulesCompletionProvider {
         const res = classNames.map(_class => {
             const name = this._classTransformer(_class);
 
-            return CompletionItem.create(name);
+            let completionItem: CompletionItem;
+
+            // in case of items with dashes, we need to replace the `.` and suggest the field using the subscript expression
+            if (name.includes('-')) {
+                const arrayAccessor = `['${name}']`;
+                const range = lsp.Range.create(
+                    lsp.Position.create(position.line, position.character - 1),
+                    position,
+                );
+
+                completionItem = CompletionItem.create(arrayAccessor);
+                completionItem.textEdit = lsp.InsertReplaceEdit.create(
+                    arrayAccessor,
+                    range,
+                    range,
+                );
+            } else {
+                completionItem = CompletionItem.create(name);
+            }
+            return completionItem;
         });
 
         return res.map((x, i) => ({

src/DefinitionProvider.ts

@@ -20,7 +20,7 @@ import {
     getTransformer,
     getWords,
     isImportLineMatch,
-    stringiyClassname,
+    stringifyClassname,
 } from './utils';
 
 export class CSSModulesDefinitionProvider {
@@ -66,11 +66,12 @@ export class CSSModulesDefinitionProvider {
         const currentDir = getCurrentDirFromUri(textdocument.uri);
 
         const words = getWords(currentLine, position);
-        if (words === '' || words.indexOf('.') === -1) {
+        if (words === null) {
             return null;
         }
 
-        const [obj, field] = words.split('.');
+        const [obj, field] = words;
+
         const importPath = findImportPath(fileContent, obj, currentDir);
         if (importPath === '') {
             return null;
@@ -88,7 +89,7 @@ export class CSSModulesDefinitionProvider {
         return {
             contents: {
                 language: 'css',
-                value: stringiyClassname(
+                value: stringifyClassname(
                     field,
                     node.declarations,
                     node.comments,
@@ -124,11 +125,12 @@ export class CSSModulesDefinitionProvider {
         }
 
         const words = getWords(currentLine, position);
-        if (words === '' || words.indexOf('.') === -1) {
+        if (words === null) {
             return null;
         }
 
-        const [obj, field] = words.split('.');
+        const [obj, field] = words;
+
         const importPath = findImportPath(fileContent, obj, currentDir);
         if (importPath === '') {
             return null;

src/spec/resolveAliasedFilepath.spec.ts

@@ -26,7 +26,7 @@ vi.mock('fs', async () => {
     };
 });
 
-describe('utils: resolveAliaedFilepath', () => {
+describe('utils: resolveAliasedFilepath', () => {
     it('returns null if config does not exist', () => {
         (lilconfigSync as Mock).mockReturnValueOnce({
             search: () => null,

src/spec/utils.spec.ts

@@ -1,9 +1,11 @@
 import * as path from 'path';
 import {describe, expect, it} from 'vitest';
+import {Position} from 'vscode-languageserver-protocol';
 import {
     filePathToClassnameDict,
     findImportPath,
     getTransformer,
+    getWords,
 } from '../utils';
 
 describe('filePathToClassnameDict', () => {
@@ -228,3 +230,33 @@ describe('getTransformer', () => {
         });
     });
 });
+describe('getWords', () => {
+    it('returns null for a line with no .', () => {
+        const line = 'nostyles';
+        const position = Position.create(0, 1);
+        const result = getWords(line, position);
+
+        expect(result).toEqual(null);
+    });
+    it('returns pair of obj and field for line with property accessor expression', () => {
+        const line = 'styles.myclass';
+        const position = Position.create(0, 'styles.'.length);
+        const result = getWords(line, position);
+
+        expect(result).toEqual(['styles', 'myclass']);
+    });
+    it('returns pair of obj and field for line with subscript accessor expression (single quoted)', () => {
+        const line = "styles['myclass']";
+        const position = Position.create(0, "styles['".length);
+        const result = getWords(line, position);
+
+        expect(result).toEqual(['styles', 'myclass']);
+    });
+    it('returns pair of obj and field for line with subscript accessor expression (double quoted)', () => {
+        const line = 'styles["myclass"]';
+        const position = Position.create(0, 'styles["'.length);
+        const result = getWords(line, position);
+
+        expect(result).toEqual(['styles', 'myclass']);
+    });
+});

src/utils.ts

@@ -128,20 +128,42 @@ export async function getPosition(
         : null;
 }
 
-export function getWords(line: string, position: Position): string {
+export function getWords(
+    line: string,
+    position: Position,
+): [string, string] | null {
     const headText = line.slice(0, position.character);
     const startIndex = headText.search(/[a-z0-9\._]*$/i);
     // not found or not clicking object field
     if (startIndex === -1 || headText.slice(startIndex).indexOf('.') === -1) {
-        return '';
+        // check if this is a subscript expression instead
+        const startIndex = headText.search(/[a-z0-9"'_\[\-]*$/i);
+        if (
+            startIndex === -1 ||
+            headText.slice(startIndex).indexOf('[') === -1
+        ) {
+            return null;
+        }
+
+        const match = /^([a-z0-9_\-\['"]*)/i.exec(line.slice(startIndex));
+        if (match === null) {
+            return null;
+        }
+
+        const [styles, className] = match[1].split('[');
+
+        // remove wrapping quotes around class name (both `'` or `"`)
+        const unwrappedName = className.substring(1, className.length - 1);
+
+        return [styles, unwrappedName] as [string, string];
     }
 
     const match = /^([a-z0-9\._]*)/i.exec(line.slice(startIndex));
     if (match === null) {
-        return '';
+        return null;
     }
 
-    return match[1];
+    return match[1].split('.') as [string, string];
 }
 
 type ClassnamePostion = {
@@ -401,7 +423,7 @@ export async function getAllClassNames(
         : classList;
 }
 
-export function stringiyClassname(
+export function stringifyClassname(
     classname: string,
     declarations: string[],
     comments: string[],