diff --git a/extensions/style-helper/CHANGELOG.md b/extensions/style-helper/CHANGELOG.md
index 234518bd9..de74f5b32 100644
--- a/extensions/style-helper/CHANGELOG.md
+++ b/extensions/style-helper/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 1.1.1
+- feat: change cursors position when auto complete the css class name [#1019](https://github.com/apptools-lab/AppWorks/issues/1019)
+- fix: use square brackets when class name has special key [#1020](https://github.com/apptools-lab/AppWorks/issues/1020)
+
 ## 1.1.1
 
 - chore: update taobao npm registry from `https://registry.npm.taobao.org` to `https://registry.npmmirror.com`
diff --git a/extensions/style-helper/package.json b/extensions/style-helper/package.json
index 82cd4acb9..cf2c98c65 100644
--- a/extensions/style-helper/package.json
+++ b/extensions/style-helper/package.json
@@ -3,7 +3,7 @@
   "displayName": "React Style Helper",
   "description": "Easily write styles(CSS/LESS/SASS).",
   "publisher": "iceworks-team",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "engines": {
     "vscode": "^1.41.0"
   },
diff --git a/extensions/style-helper/src/cssClassAutoCompete/index.ts b/extensions/style-helper/src/cssClassAutoCompete/index.ts
index 57106296c..375f1106a 100644
--- a/extensions/style-helper/src/cssClassAutoCompete/index.ts
+++ b/extensions/style-helper/src/cssClassAutoCompete/index.ts
@@ -32,7 +32,7 @@ function provideCompletionItems(document: vscode.TextDocument, position: vscode.
   return unique(classNames).map((className) => {
     const completionItem = new vscode.CompletionItem(`.${className}`, vscode.CompletionItemKind.Text);
     completionItem.detail = 'AppWorks';
-    completionItem.insertText = `.${className} {\n  \n}`;
+    completionItem.insertText = new vscode.SnippetString(`.${className} {\n  $1\n}`);
     completionItem.command = { command: 'style-helper.recordCompletionItemSelect', title: '' };
     return completionItem;
   });
diff --git a/extensions/style-helper/src/styleInfoViewer/index.ts b/extensions/style-helper/src/styleInfoViewer/index.ts
index 5ce9131c7..835677058 100644
--- a/extensions/style-helper/src/styleInfoViewer/index.ts
+++ b/extensions/style-helper/src/styleInfoViewer/index.ts
@@ -60,9 +60,17 @@ function provideCompletionItems(document: vscode.TextDocument, position: vscode.
     ) {
       return findStyleSelectors(directory, styleDependencies).map((selector: string) => {
         // Remove class selector `.`, When use styles.xxx.
-        const completionItem = new vscode.CompletionItem(selector.replace('.', ''), vscode.CompletionItemKind.Variable);
+        const item = selector.replace('.', '');
+        const completionItem = new vscode.CompletionItem(item, vscode.CompletionItemKind.Variable);
         completionItem.detail = 'AppWorks';
         completionItem.command = { command: 'style-helper.recordCompletionItemSelect', title: '' };
+        // stlye.xxx-xxx to stlye['xxx-xxx']
+        if (!/^[a-zA-Z]+$/.test(item)) {
+          completionItem.insertText = `['${item}']`;
+          completionItem.additionalTextEdits = [
+            vscode.TextEdit.delete(new vscode.Range(position.line, position.character - 1, position.line, position.character)),
+          ];
+        }
         return completionItem;
       });
     }