Adds support for typescript and postcss

.gitignore

@@ -1,2 +1,3 @@
-out
-node_modules
+dist
+node_modules
+*.vsix

package.json

@@ -2,7 +2,7 @@
   "name": "html-css-class-completion",
   "displayName": "IntelliSense for CSS class names in HTML",
   "description": "CSS class name completion for the HTML class attribute based on the definitions found in your workspace.",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "publisher": "Zignd",
   "engines": {
     "vscode": "^1.19.0"
@@ -30,7 +30,7 @@
     ],
     "configuration": [
       {
-        "title": "CSS Class Completion",
+        "title": "IntelliSense for CSS class names in HTML",
         "properties": {
           "html-css-class-completion.includeGlobPattern": {
             "type": "string",
@@ -59,7 +59,9 @@
   "scripts": {
     "vscode:prepublish": "tsc -p ./",
     "compile": "tsc -watch -p ./",
-    "postinstall": "node ./node_modules/vscode/bin/install"
+    "postinstall": "node ./node_modules/vscode/bin/install",
+    "vsce:package": "vsce package",
+    "vsce:publish": "vsce publish"
   },
   "devDependencies": {
     "@types/bluebird": "^3.5.19",
@@ -71,19 +73,20 @@
     "@types/request": "^2.0.11",
     "@types/request-promise": "^4.1.39",
     "@types/verror": "^1.10.3",
-    "tslint": "^5.9.1"
+    "mocha": "^4.0.1",
+    "tslint": "^5.9.1",
+    "vsce": "^1.61.0",
+    "typescript": "^2.6.2",
+    "vscode": "^1.1.26"
   },
   "dependencies": {
     "bluebird": "^3.5.1",
     "css": "^2.2.4",
     "htmlparser2": "^3.9.2",
     "lodash": "^4.17.11",
-    "mocha": "^4.0.1",
     "request": "^2.88.0",
     "request-promise": "^4.2.1",
     "source-map-support": "^0.5.3",
-    "typescript": "^2.6.2",
-    "verror": "^1.10.0",
-    "vscode": "^1.1.26"
+    "verror": "^1.10.0"
   }
 }

src/extension.ts

@@ -79,7 +79,7 @@ async function cache(): Promise<void> {
 }
 
 function provideCompletionItemsGenerator(languageSelector: string, classMatchRegex: RegExp,
-                                         classPrefix: string = "", splitChar: string = " ") {
+    classPrefix: string = "", splitChar: string = " ") {
     return languages.registerCompletionItemProvider(languageSelector, {
         provideCompletionItems(document: TextDocument, position: Position): CompletionItem[] {
             const start: Position = new Position(position.line, 0);
@@ -123,7 +123,7 @@ function provideCompletionItemsGenerator(languageSelector: string, classMatchReg
 function enableEmmetSupport(disposables: Disposable[]) {
     const emmetRegex = /(?=\.)([\w-\. ]*$)/;
     const languageModes = ["html", "django-html", "razor", "php", "blade", "vue", "twig", "markdown", "erb",
-        "handlebars", "ejs", "typescriptreact", "javascript", "javascriptreact"];
+        "handlebars", "ejs", "typescript", "typescriptreact", "javascript", "javascriptreact"];
     languageModes.forEach((language) => {
         emmetDisposables.push(provideCompletionItemsGenerator(language, emmetRegex, "", "."));
     });
@@ -147,7 +147,7 @@ export async function activate(context: ExtensionContext): Promise<void> {
             if (e.affectsConfiguration("html-css-class-completion.enableEmmetSupport")) {
                 const isEnabled = workspace.getConfiguration()
                     .get<boolean>("html-css-class-completion.enableEmmetSupport");
-                isEnabled ? enableEmmetSupport(emmetDisposables) :  disableEmmetSupport(emmetDisposables);
+                isEnabled ? enableEmmetSupport(emmetDisposables) : disableEmmetSupport(emmetDisposables);
             }
         } catch (err) {
             err = new VError(err, "Failed to automatically reload the extension after the configuration change");
@@ -174,19 +174,26 @@ export async function activate(context: ExtensionContext): Promise<void> {
         }
     }));
 
+    // Enable Emmet Completion on startup if param is set to true
+    if (workspace.getConfiguration().get<boolean>("html-css-class-completion.enableEmmetSupport")) {
+        enableEmmetSupport(emmetDisposables);
+    }
+
     // Javascript based extensions
     ["typescriptreact", "javascript", "javascriptreact"].forEach((extension) => {
         context.subscriptions.push(provideCompletionItemsGenerator(extension, /className=["|']([\w- ]*$)/));
         context.subscriptions.push(provideCompletionItemsGenerator(extension, /class=["|']([\w- ]*$)/));
     });
 
     // HTML based extensions
-    ["html", "django-html", "razor", "php", "blade", "vue", "twig", "markdown", "erb", "handlebars", "ejs"].forEach((extension) => {
+    ["html", "django-html", "razor", "php", "blade", "vue",
+        "twig", "markdown", "erb", "handlebars", "ejs",
+    ].forEach((extension) => {
         context.subscriptions.push(provideCompletionItemsGenerator(extension, /class=["|']([\w- ]*$)/));
     });
 
     // CSS based extensions
-    ["css", "sass", "scss"].forEach((extension) => {
+    ["css", "sass", "scss", "postcss"].forEach((extension) => {
         // Support for Tailwind CSS
         context.subscriptions.push(provideCompletionItemsGenerator(extension, /@apply ([\.\w- ]*$)/, "."));
     });

test/extension.test.ts

@@ -4,12 +4,12 @@
 //
 
 // The module 'assert' provides assertion methods from node
-import * as assert from 'assert';
+import * as assert from "assert";
 
 // You can import and use all API from the 'vscode' module
 // as well as import your extension to test it
-import * as vscode from 'vscode';
-import * as myExtension from '../src/extension';
+import * as vscode from "vscode";
+import * as myExtension from "../src/extension";
 
 // Defines a Mocha test suite to group tests of similar kind together
 suite("Extension Tests", () => {
@@ -19,4 +19,4 @@ suite("Extension Tests", () => {
         assert.equal(-1, [1, 2, 3].indexOf(5));
         assert.equal(-1, [1, 2, 3].indexOf(0));
     });
-});
+});

test/index.ts

@@ -10,13 +10,13 @@
 // to report the results back to the caller. When the tests are finished, return
 // a possible error to the callback or null if none.
 
-var testRunner = require('vscode/lib/testrunner');
+let testRunner = require("vscode/lib/testrunner");
 
 // You can directly control Mocha options by uncommenting the following lines
 // See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options for more info
 testRunner.configure({
-    ui: 'tdd', 		// the TDD UI is being used in extension.test.ts (suite, test, etc.)
-    useColors: true // colored output from test results
+    ui: "tdd", 		// the TDD UI is being used in extension.test.ts (suite, test, etc.)
+    useColors: true, // colored output from test results
 });
 
-module.exports = testRunner;
+module.exports = testRunner;

tslint.json

@@ -5,7 +5,8 @@
     ],
     "jsRules": {},
     "rules": {
-        "no-console": false
+        "no-console": false,
+        "align": false
     },
     "rulesDirectory": []
 }