feat: support multi class

zitup · Feb 21, 2020 · ae3d825 · ae3d825
1 parent d48ac98
commit ae3d825
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 124 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,19 +1,32 @@
 # Change Log
 
+## [0.0.4] - 2020-02-22
+
+### Added
+
+- support multi classname, such as `class="name1 name2"`
+
 ## [0.0.3] - 2019-06-03
+
 ### Fixed
+
 - ensure work when only type dot
 - remove duplicate elements from the proposal
 - modify extension name from `className To Css` to `className Completion in CSS`
 
-## [0.0.2] - 2019-05-28 
+## [0.0.2] - 2019-05-28
+
 ### Added
-- support vue  
+
+- support vue
 
 ## [0.0.1] - 2019-05-21
+
 ### Init
+
 - support htm/html/jsx/tsx
-
+
+[0.0.4]: https://github.com/zytjs/classNameToCss/releases/tag/0.0.4
 [0.0.3]: https://github.com/zytjs/classNameToCss/releases/tag/0.0.3
 [0.0.2]: https://github.com/zytjs/classNameToCss/releases/tag/0.0.2
-[0.0.1]: https://github.com/zytjs/classNameToCss/releases/tag/0.0.1  
+[0.0.1]: https://github.com/zytjs/classNameToCss/releases/tag/0.0.1
diff --git a/README.md b/README.md
@@ -1,41 +1,41 @@
 # IntelliSense for HTML classNames in CSS
 
-在css/less/sass/stylus文件提供同一目录下，htm/html/jsx/tsx文件中className的智能提示。  
-在vue文件中，会提供本文件class的智能提示。
+在 css/less/sass/stylus 文件提供同一目录下，htm/html/jsx/tsx 文件中 className 的智能提示。
+在 vue 文件中，会提供本文件 class 的智能提示。（提示：vue 提示可能会出现.冗余的情况）
 
-A Visual Studio Code extension that provides HTML class name completion for the CSS  based on the definitions found in the same directory.  
+A Visual Studio Code extension that provides HTML class name completion for the CSS based on the definitions found in the same directory.
 It will provide class name of **current** file if in `.vue` file.
 
-![](https://raw.githubusercontent.com/zytjs/classNameToCss/master/classtocss.gif)  
+![](https://raw.githubusercontent.com/zytjs/classNameToCss/master/classtocss.gif)
 
 # Feature
 
-* 在css中提供className的自动补全提示
-  
-* Gives you autocompletion in css for html class names in the same directory or current file
+- 在 css 中提供 className 的自动补全提示
+
+- Gives you autocompletion in css for html class names in the same directory or current file
 
 # Supported File Extension
 
-* HTML/HTM 
-* JSX/TSX
-* Vue
-* CSS
-* Less
-* Sass
-* Stylus
+- HTML/HTM
+- JSX/TSX
+- Vue
+- CSS
+- Less
+- Sass
+- Stylus
 
 # Usage
 
 使用非常非常简单，提升你的开发效率只需要一步：
 
 This extension is very very easy to use, there just one step to improve your development efficiency：
 
-* 搜索、安装、输入点，然后与你的同事分享
-  
-* Search, Install, Type dot and Share with your colleague
+- 搜索、安装、输入点，然后与你的同事分享
+
+- Search, Install, Type dot and Share with your colleague
 
-# Contributing  
+# Contributing
 
-如果你想体验`CSS Modules`写法的智能提示，欢迎探讨和PR。  
+如果你想体验`CSS Modules`写法的智能提示，欢迎探讨和 PR。
 
-If you want the completion for `CSS Modules`, any type of contribution and discussion is welcome.
+If you want the completion for `CSS Modules`, any type of contribution and discussion is welcome.
diff --git a/package.json b/package.json
@@ -1,84 +1,84 @@
 {
-	"name": "classnametocss",
-	"displayName": "className Completion in CSS",
-	"description": "css/less/scss className IntelliSense from html/jsx/tsx",
-	"publisher": "zitup",
-	"version": "0.0.3",
-	"icon": "icon.jpg",
-	"engines": {
-		"vscode": "^1.33.0"
-	},
-	"repository": {
-		"url": "https://github.com/zytjs/classNameToCss"
-	},
-	"categories": [
-		"Programming Languages",
-		"Other"
-	],
-	"keywords": [
-		"IntelliSense",
-		"completion",
-		"autocomplete",
-		"class",
-		"css",
-		"less",
-		"sass",
-		"scss",
-		"stylus",
-		"html",
-		"jsx",
-		"tsx",
-		"vue",
-		"classtocss",
-		"class to css",
-		"classnametocss",
-		"classname to css"
-	],
-	"activationEvents": [
-		"onLanguage:css",
-		"onLanguage:less",
-		"onLanguage:scss",
-		"onLanguage:sass",
-		"onLanguage:stylus",
-		"onLanguage:vue"
-	],
-	"main": "./out/extension.js",
-	"contributes": {
-		"languages": [
-			{
-				"id": "vue",
-				"aliases": [
-					"Vue",
-					"vue"
-				],
-				"extensions": [
-					".vue"
-				]
-			},
-			{
-				"id": "stylus",
-				"aliases": [
-					"styl",
-					"stylus"
-				],
-				"extensions": [
-					".styl"
-				]
-			}
-		]
-	},
-	"scripts": {
-		"vscode:prepublish": "yarn run compile",
-		"compile": "tsc -p ./",
-		"watch": "tsc -watch -p ./",
-		"postinstall": "node ./node_modules/vscode/bin/install",
-		"test": "yarn run compile && node ./node_modules/vscode/bin/test"
-	},
-	"devDependencies": {
-		"typescript": "^3.3.1",
-		"vscode": "^1.1.28",
-		"tslint": "^5.12.1",
-		"@types/node": "^10.12.21",
-		"@types/mocha": "^2.2.42"
-	}
-}
+  "name": "classnametocss",
+  "displayName": "className Completion in CSS",
+  "description": "css/less/scss className IntelliSense from html/jsx/tsx",
+  "publisher": "zitup",
+  "version": "0.0.4",
+  "icon": "icon.jpg",
+  "engines": {
+    "vscode": "^1.42.0"
+  },
+  "repository": {
+    "url": "https://github.com/zytjs/classNameToCss"
+  },
+  "categories": [
+    "Programming Languages",
+    "Other"
+  ],
+  "keywords": [
+    "IntelliSense",
+    "completion",
+    "autocomplete",
+    "class",
+    "css",
+    "less",
+    "sass",
+    "scss",
+    "stylus",
+    "html",
+    "jsx",
+    "tsx",
+    "vue",
+    "classtocss",
+    "class to css",
+    "classnametocss",
+    "classname to css"
+  ],
+  "activationEvents": [
+    "onLanguage:css",
+    "onLanguage:less",
+    "onLanguage:scss",
+    "onLanguage:sass",
+    "onLanguage:stylus",
+    "onLanguage:vue"
+  ],
+  "main": "./out/extension.js",
+  "contributes": {
+    "languages": [
+      {
+        "id": "vue",
+        "aliases": [
+          "Vue",
+          "vue"
+        ],
+        "extensions": [
+          ".vue"
+        ]
+      },
+      {
+        "id": "stylus",
+        "aliases": [
+          "styl",
+          "stylus"
+        ],
+        "extensions": [
+          ".styl"
+        ]
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "yarn run compile",
+    "compile": "tsc -p ./",
+    "watch": "tsc -watch -p ./",
+    "postinstall": "node ./node_modules/vscode/bin/install",
+    "test": "yarn run compile && node ./node_modules/vscode/bin/test"
+  },
+  "devDependencies": {
+    "typescript": "^3.3.1",
+    "vscode": "^1.1.28",
+    "tslint": "^5.12.1",
+    "@types/node": "^10.12.21",
+    "@types/mocha": "^2.2.42"
+  }
+}
diff --git a/src/completion.ts b/src/completion.ts
@@ -2,8 +2,8 @@ import * as fs from "fs";
 import * as vscode from "vscode";
 
 const extensionArray: string[] = ["htm", "html", "jsx", "tsx"];
-const htmMatchRegex: RegExp = /class="[\w-]+"/g;
-const sxMatchRegex: RegExp = /className="[\w-]+"/g;
+const htmMatchRegex: RegExp = /class="[\w- ]+"/g;
+const sxMatchRegex: RegExp = /className="[\w- ]+"/g;
 
 /**
  * @param {*} document
@@ -30,10 +30,7 @@ function provideCompletionItems(
   // 在vue文件触发
   if (document.languageId === "vue") {
     // 读取当前文件
-    const result = getClass(filePath);
-    if (result) {
-      classNames = result;
-    }
+    classNames = getClass(filePath);
   }
   // 在css类文件触发
   else {
@@ -48,23 +45,28 @@ function provideCompletionItems(
     // 读取目标文件，获取class
     target.forEach((item: string) => {
       const filePath: string = `${dir}/${item}`;
-      const result = getClass(filePath);
-      if (result) {
-        classNames = classNames.concat(result);
-      }
+      classNames = getClass(filePath);
     });
-    // 去重
-    classNames = [...new Set(classNames)];
   }
 
-  return classNames.map((item: string) => {
-    const className: string = item.split("=")[1];
+  classNames = classNames.reduce((arr, ele) => {
+    const className: string = ele.split("=")[1];
     // 去掉引号
     const field: string = className.slice(1, className.length - 1);
+    // 处理多class情况
+    if (ele.includes(" ")) {
+      return arr.concat(field.split(" "));
+    } else {
+      arr.push(field);
+      return arr;
+    }
+  }, [] as string[]);
+
+  return classNames.map((ele: string) => {
     return new vscode.CompletionItem(
       // 提示内容要带上触发字符，https://github.com/Microsoft/vscode/issues/71662
-      `.${field}`,
-      vscode.CompletionItemKind.Field
+      `.${ele}`,
+      vscode.CompletionItemKind.Text
     );
   });
 }
@@ -84,7 +86,7 @@ function getClass(path: string) {
   if (path.includes("sx")) {
     result = data.match(sxMatchRegex);
   }
-  return result;
+  return result || [];
 }
 
 /**