add support for javascriptreact

README.md

@@ -7,7 +7,7 @@ Missing CSS support for HTML documents.
 - Class attribute completion.
 - Id attribute completion.
 - Supports Zen Coding completion for class and id attributes.
-- Scans workspace folder for css files.
+- Scans workspace folder for css and scss files.
 - Supports remote css files.
 - Uses [vscode-css-languageservice](https://github.com/Microsoft/vscode-css-languageservice).
 
@@ -23,6 +23,7 @@ Missing CSS support for HTML documents.
 - php
 - twig
 - md
+- javascriptreact
 
 ## Remote Style Sheets
 
@@ -37,3 +38,6 @@ Remote style sheets can be specified in VS Code settings:
 ## Installation
 
 [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
+
+## Usage
+You can view a list of attributes via `ctrl + space`.

package.json

@@ -2,7 +2,7 @@
   "name": "vscode-html-css",
   "displayName": "HTML CSS Support",
   "description": "CSS support for HTML documents",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "publisher": "ecmel",
   "license": "MIT",
   "homepage": "https://github.com/ecmel/vscode-html-css",
@@ -48,7 +48,8 @@
     "onLanguage:handlebars",
     "onLanguage:php",
     "onLanguage:twig",
-    "onLanguage:md"
+    "onLanguage:md",
+    "onLanguage:javascriptreact"
   ],
   "main": "./out/src/extension",
   "scripts": {

src/extension.ts

@@ -43,7 +43,7 @@ class Snippet {
 class ClassServer implements vsc.CompletionItemProvider {
 
   private regex = [
-    /(class|id)=["|']([^"^']*$)/i,
+    /(class|id|className)=["|']([^"^']*$)/i,
     /(\.|\#)[^\.^\#^\<^\>]*$/i,
     /<style[\s\S]*>([\s\S]*)<\/style>/ig
   ];
@@ -145,29 +145,32 @@ export function activate(context: vsc.ExtensionContext) {
 
   if (vsc.workspace.rootPath) {
 
-    let glob = '**/*.css';
+    let globs = ['**/*.css', '**/*.scss'];
 
-    vsc.workspace.findFiles(glob, '').then(function (uris: vsc.Uri[]) {
-      for (let i = 0; i < uris.length; i++) {
-        parse(uris[i]);
-      }
+    globs.forEach(glob => {
+      vsc.workspace.findFiles(glob, '').then(function (uris: vsc.Uri[]) {
+        for (let i = 0; i < uris.length; i++) {
+          parse(uris[i]);
+        }
+      });
+
+      let watcher = vsc.workspace.createFileSystemWatcher(glob);
+
+      watcher.onDidCreate(function (uri: vsc.Uri) {
+        parse(uri);
+      });
+      watcher.onDidChange(function (uri: vsc.Uri) {
+        parse(uri);
+      });
+      watcher.onDidDelete(function (uri: vsc.Uri) {
+        delete map[uri.fsPath];
+      });
+
+      context.subscriptions.push(watcher);
     });
 
     parseRemoteConfig();
 
-    let watcher = vsc.workspace.createFileSystemWatcher(glob);
-
-    watcher.onDidCreate(function (uri: vsc.Uri) {
-      parse(uri);
-    });
-    watcher.onDidChange(function (uri: vsc.Uri) {
-      parse(uri);
-    });
-    watcher.onDidDelete(function (uri: vsc.Uri) {
-      delete map[uri.fsPath];
-    });
-
-    context.subscriptions.push(watcher);
   };
 
   let classServer = new ClassServer();
@@ -183,7 +186,8 @@ export function activate(context: vsc.ExtensionContext) {
     'handlebars',
     'php',
     'twig',
-    'md'
+    'md',
+    'javascriptreact'
   ], classServer));
 
   let wp = /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\=\+\[\{\]\}\\\|\;\:\'\.\"\,\<\>\/\?\s]+)/g;
@@ -198,6 +202,7 @@ export function activate(context: vsc.ExtensionContext) {
   context.subscriptions.push(vsc.languages.setLanguageConfiguration('php', { wordPattern: wp }));
   context.subscriptions.push(vsc.languages.setLanguageConfiguration('twig', { wordPattern: wp }));
   context.subscriptions.push(vsc.languages.setLanguageConfiguration('md', { wordPattern: wp }));
+  context.subscriptions.push(vsc.languages.setLanguageConfiguration('javascriptreact', { wordPattern: wp }));
 
   context.subscriptions.push(vsc.workspace.onDidChangeConfiguration((e) => parseRemoteConfig()));
 }