Fixes

Author: ecmel

src/completion.ts

@@ -9,6 +9,7 @@ import {
     CompletionItemProvider,
     CompletionList,
     Diagnostic,
+    DiagnosticCollection,
     DiagnosticSeverity,
     Disposable,
     languages,
@@ -27,22 +28,15 @@ export class ClassCompletionItemProvider implements CompletionItemProvider, Disp
     readonly cache = new Map<string, Map<string, CompletionItem>>();
     readonly extends = new Map<string, Set<string>>();
     readonly watchers = new Map<string, Disposable>();
-    readonly collection = languages.createDiagnosticCollection();
+    readonly collection: DiagnosticCollection;
     readonly isRemote = /^https?:\/\//i;
     readonly canComplete = /(id|class|className)\s*=\s*("|')(?:(?!\2).)*$/si;
     readonly findLinkRel = /rel\s*=\s*("|')((?:(?!\1).)+)\1/si;
     readonly findLinkHref = /href\s*=\s*("|')((?:(?!\1).)+)\1/si;
     readonly findExtended = /(?:{{<|{%\s*extends|@extends\s*\()\s*("|')?([./A-Za-z_0-9\\\-]+)\1\s*(?:\)|%}|}})/i;
 
-    constructor(enabledLanguages: string[]) {
-        let debounce: NodeJS.Timeout;
-
-        workspace.onDidChangeTextDocument(e => {
-            if (enabledLanguages.includes(e.document.languageId)) {
-                clearTimeout(debounce);
-                debounce = setTimeout(() => this.validate(e.document), 1000);
-            }
-        });
+    constructor(collection: DiagnosticCollection) {
+        this.collection = collection;
     }
 
     dispose() {

src/extension.ts

@@ -4,13 +4,37 @@ import { ExtensionContext, languages, workspace, commands } from "vscode";
 export function activate(context: ExtensionContext) {
     const config = workspace.getConfiguration("css");
     const enabledLanguages = config.get<string[]>("enabledLanguages", ["html"]);
-    const provider = new ClassCompletionItemProvider(enabledLanguages);
+    const collection = languages.createDiagnosticCollection();
+    const provider = new ClassCompletionItemProvider(collection);
+
+    workspace.textDocuments.forEach(document => {
+        if (enabledLanguages.includes(document.languageId)) {
+            provider.validate(document);
+        }
+    });
+
+    let timeout: NodeJS.Timeout;
 
     context.subscriptions.push(
+        workspace.onDidOpenTextDocument(document => {
+            if (enabledLanguages.includes(document.languageId)) {
+                provider.validate(document);
+            }
+        }),
+
+        workspace.onDidChangeTextDocument(e => {
+            if (enabledLanguages.includes(e.document.languageId)) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => provider.validate(e.document), 500);
+            }
+        }),
+
         languages.registerCompletionItemProvider(
             enabledLanguages,
             provider
         ),
+
+        collection,
         provider
     );
 }

src/test/suite/completion.test.ts

@@ -1,24 +1,24 @@
 import * as assert from "assert";
 import { ClassCompletionItemProvider } from "../../completion";
 import { MockCancellationToken, MockCompletionContext, MockDocument } from "./mocks";
-import { CompletionItem, Position, Uri } from "vscode";
+import { CompletionItem, Position, Uri, languages } from "vscode";
 
 suite("ClassCompletionItemProvider Test Suite", () => {
 
-    const langs = ["html"];
+    const collection = languages.createDiagnosticCollection();
     const position = new Position(0, 0);
     const token = new MockCancellationToken(false);
     const context = new MockCompletionContext();
 
     test("RegEx: isRemote", () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
 
         assert.strictEqual(provider.isRemote.test("http://example.com/example.css"), true);
         assert.strictEqual(provider.isRemote.test("https://example.com/example.css"), true);
     });
 
     test("RegEx: canComplete", () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
 
         assert.strictEqual(provider.canComplete.test(""), false);
         assert.strictEqual(provider.canComplete.test("class=\""), true);
@@ -53,47 +53,47 @@ suite("ClassCompletionItemProvider Test Suite", () => {
     });
 
     test("RegEx: findLinkRel", () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
 
         assert.strictEqual(provider.findLinkRel.exec(`
 			<link rel="stylesheet" href="http://example.com/example.css">
 		"`)?.[2], "stylesheet");
     });
 
     test("RegEx: findLinkHref", () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
 
         assert.strictEqual(provider.findLinkHref.exec(`
 			<link rel="stylesheet" href="http://example.com/example.css">
 		"`)?.[2], "http://example.com/example.css");
     });
 
     test("RegEx: findExtended (Twig)", () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
 
         assert.strictEqual(provider.findExtended.exec(`
             {% extends "base" %}
         `)?.[2], "base");
     });
 
     test("RegEx: findExtended (Mustache)", () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
 
         assert.strictEqual(provider.findExtended.exec(`
             {{< base }}
         `)?.[2], "base");
     });
 
     test("RegEx: findExtended (Blade)", () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
 
         assert.strictEqual(provider.findExtended.exec(`
             @extends('base')
         `)?.[2], "base");
     });
 
     test("Rejects outside class attribute", (done) => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
         const document = new MockDocument("<a class=\"\"></a>");
 
         const result = provider.provideCompletionItems(
@@ -106,7 +106,7 @@ suite("ClassCompletionItemProvider Test Suite", () => {
     });
 
     test("Completes from style tag", async () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
         const document = new MockDocument("<style>.test{}</style><a class=\"");
 
         const items = await (provider.provideCompletionItems(
@@ -119,7 +119,7 @@ suite("ClassCompletionItemProvider Test Suite", () => {
     });
 
     test("Completes from link tag", async () => {
-        const provider = new ClassCompletionItemProvider(langs);
+        const provider = new ClassCompletionItemProvider(collection);
         const document = new MockDocument(`
 			<link 
 				href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
@@ -143,7 +143,7 @@ suite("ClassCompletionItemProvider Test Suite", () => {
                     "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
                 ];
             }
-        }(langs);
+        }(collection);
 
         const document = new MockDocument("<a class=\"");