From 1f589fb4b1112b22aca1c16aefc6b6c4018d186e Mon Sep 17 00:00:00 2001
From: pqcqaq <905739777@qq.com>
Date: Fri, 1 Nov 2024 13:59:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A6=82=E6=9E=9CclassName=E5=8F=AA=E6=9C=89?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=EF=BC=8C=E9=82=A3=E7=9B=B4=E6=8E=A5=E6=98=AF?=
 =?UTF-8?q?Styles.xx=E7=9A=84=E5=BD=A2=E5=BC=8F=EF=BC=8C=E4=B8=8D=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E6=A8=A1=E6=9D=BF=E5=AD=97=E7=AC=A6=E4=B8=B2=20?=
 =?UTF-8?q?=E5=A6=82=E6=9E=9C=E5=B7=B2=E7=BB=8F=E6=98=AFclassName=3D{Style?=
 =?UTF-8?q?s.xx}=E7=9A=84=E5=BD=A2=E5=BC=8F=EF=BC=8C=E6=8F=90=E4=BE=9B?=
 =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E4=B8=BA=E6=A8=A1=E6=9D=BF=E5=AD=97=E7=AC=A6?=
 =?UTF-8?q?=E4=B8=B2=E7=9A=84=E5=BF=AB=E9=80=9F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/styleConvert.ts | 108 +++++++++++++++++++++++++++++-------
 1 file changed, 88 insertions(+), 20 deletions(-)

diff --git a/src/plugins/styleConvert.ts b/src/plugins/styleConvert.ts
index 9a33590..5b15e2e 100644
--- a/src/plugins/styleConvert.ts
+++ b/src/plugins/styleConvert.ts
@@ -12,36 +12,104 @@ class ClassNameConversionProvider implements vscode.CodeActionProvider {
             return;
         }
 
-        const fix = new vscode.CodeAction('转换为ModuleLess写法', vscode.CodeActionKind.QuickFix);
-        fix.edit = new vscode.WorkspaceEdit();
-        fix.edit.replace(
-            document.uri,
-            classNameAttr.range,
-            this.convertToModuleStyle(classNameAttr.text)
-        );
+        const actions: vscode.CodeAction[] = [];
 
-        return [fix];
+        if (classNameAttr.type === 'string') {
+            const fix = new vscode.CodeAction(
+                '转换为ModuleLess写法',
+                vscode.CodeActionKind.QuickFix
+            );
+            fix.edit = new vscode.WorkspaceEdit();
+            fix.edit.replace(
+                document.uri,
+                classNameAttr.range,
+                this.convertToModuleStyle(classNameAttr.text)
+            );
+            actions.push(fix);
+        } else if (classNameAttr.type === 'module') {
+            const fix = new vscode.CodeAction(
+                '转换为模板字符串',
+                vscode.CodeActionKind.QuickFix
+            );
+            fix.edit = new vscode.WorkspaceEdit();
+            fix.edit.replace(
+                document.uri,
+                classNameAttr.range,
+                this.convertToTemplateString(classNameAttr.text)
+            );
+            actions.push(fix);
+        }
+
+        return actions;
     }
 
-    private getClassNameAttr(document: vscode.TextDocument, range: vscode.Range): { text: string, range: vscode.Range } | undefined {
+    private getClassNameAttr(
+        document: vscode.TextDocument,
+        range: vscode.Range
+    ):
+        | { text: string; range: vscode.Range; type: 'string' | 'module' }
+        | undefined {
         const line = document.lineAt(range.start.line);
-        const classNameMatch = line.text.match(/className\s*=\s*(['"])([^'"]+)(['"])/);
-        if (classNameMatch) {
-            const start = line.text.indexOf(classNameMatch[0]);
-            const end = start + classNameMatch[0].length;
+        const stringClassNameMatch = line.text.match(
+            /className\s*=\s*(['"])([^'"]+)(['"])/
+        );
+        if (stringClassNameMatch) {
+            const start = line.text.indexOf(stringClassNameMatch[0]);
+            const end = start + stringClassNameMatch[0].length;
             return {
-                text: classNameMatch[0],
-                range: new vscode.Range(range.start.line, start, range.start.line, end)
+                text: stringClassNameMatch[0],
+                range: new vscode.Range(
+                    range.start.line,
+                    start,
+                    range.start.line,
+                    end
+                ),
+                type: 'string',
+            };
+        }
+
+        const moduleClassNameMatch = line.text.match(
+            /className\s*=\s*\{Styles\.([^}]+)\}/
+        );
+        if (moduleClassNameMatch) {
+            const start = line.text.indexOf(moduleClassNameMatch[0]);
+            const end = start + moduleClassNameMatch[0].length;
+            return {
+                text: moduleClassNameMatch[0],
+                range: new vscode.Range(
+                    range.start.line,
+                    start,
+                    range.start.line,
+                    end
+                ),
+                type: 'module',
             };
         }
     }
 
     private convertToModuleStyle(classNameAttr: string): string {
         const classes = classNameAttr.match(/(['"])([^'"]+)(['"])/)?.[2];
-        const convertedClasses = classes?.split(' ')
-            .map(cls => `\${Styles.${cls}}`)
-            .join(' ');
-        return `className={\`${convertedClasses}\`}`;
+        if (!classes) {
+            return classNameAttr;
+        }
+
+        const classArray = classes.split(' ');
+        if (classArray.length === 1) {
+            return `className={Styles.${classArray[0]}}`;
+        } else {
+            const convertedClasses = classArray
+                .map((cls) => `\${Styles.${cls}}`)
+                .join(' ');
+            return `className={\`${convertedClasses}\`}`;
+        }
+    }
+
+    private convertToTemplateString(classNameAttr: string): string {
+        const className = classNameAttr.match(/Styles\.([^}]+)/)?.[1];
+        if (!className) {
+            return classNameAttr;
+        }
+        return `className={\`\${Styles.${className}}\`}`;
     }
 }
 
@@ -49,7 +117,7 @@ const provider = vscode.languages.registerCodeActionsProvider(
     { scheme: 'file', language: 'typescriptreact' },
     new ClassNameConversionProvider(),
     {
-        providedCodeActionKinds: [vscode.CodeActionKind.QuickFix]
+        providedCodeActionKinds: [vscode.CodeActionKind.QuickFix],
     }
 );