Added config

Author: ecmel

README.md

@@ -5,11 +5,23 @@ Missing CSS support for HTML documents.
 ## Features
 
 - Html class attribute completion.
-- Parses `html<link rel="stylesheet">` and `html<style></style>` tags.
-- Supports remote css files.
+- Parses `<link rel="stylesheet">` and `<style></style>` tags.
+- Supports remote style sheets.
+
+## Remote Style Sheets
+
+Remote style sheets can be specified in VS Code settings:
+
+```json
+"css.remoteStyleSheets": [
+  "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+]
+```
 
 ## Supported Languages
 
+Support for other types of html like documents can be added in VS Code settings:
+
 ```json
 "files.associations": {
   "*.tpl": "html",

package.json

@@ -28,6 +28,18 @@
 	"activationEvents": [
 		"onLanguage:html"
 	],
+	"contributes": {
+		"configuration": {
+			"title": "CSS Settings",
+			"properties": {
+				"css.remoteStyleSheets": {
+					"type": "array",
+					"default": [],
+					"description": "A list of remote style sheets."
+				}
+			}
+		}
+	},
 	"main": "./out/extension.js",
 	"scripts": {
 		"vscode:prepublish": "npm run compile",
@@ -56,4 +68,4 @@
 		"@types/node-fetch": "^2.5.7",
 		"node-fetch": "^2.6.1"
 	}
-}
+}

src/extension.ts

@@ -1,6 +1,7 @@
 import {
 	languages,
 	Range,
+	workspace,
 	ExtensionContext,
 	CompletionItemProvider,
 	TextDocument,
@@ -27,16 +28,34 @@ class ClassCompletionItemProvider implements CompletionItemProvider {
 	readonly findLinkRel = /rel\s*=\s*(["'])((?:(?!\1).)+)\1/si;
 	readonly findLinkHref = /href\s*=\s*(["'])((?:(?!\1).)+)\1/si;
 
+	remoteStyles: string[] = [];
+
+	constructor(context: ExtensionContext) {
+		this.parseRemoteConfig();
+
+		context.subscriptions.push(workspace.onDidChangeConfiguration(e => this.parseRemoteConfig()));
+	}
+
+	parseRemoteConfig() {
+		const config = workspace.getConfiguration('css');
+		const hrefs = config.get('remoteStyleSheets') as string[];
+
+		if (hrefs) {
+			this.remoteStyles = hrefs;
+		}
+	}
+
 	fetchRemoteStyleSheet(href: string): Thenable<Map<string, CompletionItem>> {
-		return new Promise((resolve) => {
+
+		return new Promise(resolve => {
 			const selectors = this.cache.get(href);
 
 			if (selectors) {
 				resolve(selectors);
 			} else {
 				const selectors = new Map<string, CompletionItem>();
 
-				fetch(href).then(res => {					
+				fetch(href).then(res => {
 					if (res.status === 200) {
 						res.text().then(text => {
 							walk(parse(text), (node) => {
@@ -57,8 +76,8 @@ class ClassCompletionItemProvider implements CompletionItemProvider {
 		});
 	}
 
-	findRemoteStyleSheets(text: string): Thenable<Map<string, CompletionItem>> {
-		return new Promise((resolve) => {
+	findDocumentLinks(text: string): Thenable<Map<string, CompletionItem>> {
+		return new Promise(resolve => {
 			const links = new Map<string, CompletionItem>();
 			const findLinks = /<link([^>]+)>/gi;
 			const promises = [];
@@ -83,6 +102,21 @@ class ClassCompletionItemProvider implements CompletionItemProvider {
 		});
 	}
 
+	findRemoteStyles(): Thenable<Map<string, CompletionItem>> {
+		return new Promise(resolve => {
+			const links = new Map<string, CompletionItem>();
+			const promises = [];
+
+			for (let i = 0; i < this.remoteStyles.length; i++) {
+				promises.push(this.fetchRemoteStyleSheet(this.remoteStyles[i]).then(items => {
+					items.forEach((value, key) => links.set(key, value));
+				}));
+			}
+
+			Promise.all(promises).then(() => resolve(links));
+		});
+	}
+
 	provideCompletionItems(
 		document: TextDocument,
 		position: Position,
@@ -108,9 +142,13 @@ class ClassCompletionItemProvider implements CompletionItemProvider {
 					});
 				}
 
-				this.findRemoteStyleSheets(text).then(links => {
+				this.findDocumentLinks(text).then(links => {
 					styles.forEach((value, key) => links.set(key, value));
-					resolve([...links.values()]);
+
+					this.findRemoteStyles().then(styles => {
+						styles.forEach((value, key) => links.set(key, value));
+						resolve([...links.values()]);
+					});
 				});
 			} else {
 				reject();
@@ -122,7 +160,7 @@ class ClassCompletionItemProvider implements CompletionItemProvider {
 export function activate(context: ExtensionContext) {
 	context.subscriptions.push(
 		languages.registerCompletionItemProvider("html",
-			new ClassCompletionItemProvider(), "\"", "'"));
+			new ClassCompletionItemProvider(context), "\"", "'"));
 }
 
 export function deactivate() { }