fixed auto validation

Author: ecmel

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the extension will be documented in this file.
 
+## [2.0.8] - 2024-02-
+
+- Added optional auto validation
+- Added feedback for clear cache
+- Updated dependencies
+
 ## [2.0.7] - 2024-01-23
 
 - Build fixes

README.md

@@ -57,17 +57,24 @@ Configuration depends on your layout of the project but some samples are below:
 
 ### Bootstrap
 
+If you are using Bootstrap npm module:
+
 ```json
 {
-  "css.enabledLanguages": ["html"]
+  "css.styleSheets": [
+    "node_modules/bootstrap/dist/css/bootstrap.css",
+    "src/**/*.scss"
+  ]
 }
 ```
 
+If you are using Bootstrap CDN:
+
 ```json
 {
   "css.styleSheets": [
-    "node_modules/bootstrap/dist/css/bootstrap.css",
-    "src/**/*.css"
+    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
+    "src/**/*.scss"
   ]
 }
 ```

package-lock.json

@@ -35,6 +35,8 @@
     "ejs",
     "lit",
     "lit-html",
+    "bootstrap",
+    "template",
     "javascript",
     "typescript",
     "multi-root ready"
@@ -63,7 +65,7 @@
         "css.autoValidation": {
           "type": "string",
           "scope": "resource",
-          "description": "When to validate class selectors.",
+          "description": "Auto validation for class selectors.",
           "default": "Never",
           "enum": [
             "Never",
@@ -118,7 +120,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/line-column": "^1.0.2",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^20.11.9",
+    "@types/node": "^20.11.10",
     "@types/sinon": "^17.0.3",
     "@types/vscode": "^1.75.0",
     "@vscode/test-electron": "^2.3.9",

package.json

@@ -7,6 +7,7 @@ import {
   commands,
   ExtensionContext,
   languages,
+  TextDocument,
   window,
   workspace,
 } from "vscode";
@@ -17,56 +18,59 @@ import {
 } from "./settings";
 import { Provider, clear, invalidate } from "./provider";
 
-export function activate(context: ExtensionContext) {
-  const enabledLanguages = getEnabledLanguages();
-  const validations = languages.createDiagnosticCollection();
-  const provider = new Provider();
+const enabledLanguages = getEnabledLanguages();
+const validations = languages.createDiagnosticCollection();
+const provider = new Provider();
+
+async function validate(
+  document: TextDocument,
+  type: AutoValidation | undefined
+) {
+  if (enabledLanguages.includes(document.languageId)) {
+    const validation = getAutoValidation(document);
+    if (!type || type === validation) {
+      validations.set(document.uri, await provider.validate(document));
+    } else if (validation !== AutoValidation.ALWAYS) {
+      validations.delete(document.uri);
+    }
+  }
+}
 
+export function activate(context: ExtensionContext) {
   context.subscriptions.push(
     languages.registerCompletionItemProvider(enabledLanguages, provider),
     languages.registerDefinitionProvider(enabledLanguages, provider),
     workspace.onDidSaveTextDocument(async (document) => {
       invalidate(document.uri.toString());
-      if (enabledLanguages.includes(document.languageId)) {
-        const validation = getAutoValidation(document);
-        if (validation === AutoValidation.SAVE) {
-          validations.set(document.uri, await provider.validate(document));
-        }
-      }
+      await validate(document, AutoValidation.SAVE);
     }),
     workspace.onDidOpenTextDocument(async (document) => {
-      if (enabledLanguages.includes(document.languageId)) {
-        const validation = getAutoValidation(document);
-        if (validation === AutoValidation.ALWAYS) {
-          validations.set(document.uri, await provider.validate(document));
-        }
-      }
+      await validate(document, AutoValidation.ALWAYS);
     }),
     workspace.onDidChangeTextDocument(async (event) => {
-      const document = event.document;
-      if (enabledLanguages.includes(document.languageId)) {
-        const validation = getAutoValidation(document);
-        if (validation === AutoValidation.ALWAYS) {
-          validations.set(document.uri, await provider.validate(document));
-        } else {
-          validations.delete(document.uri);
-        }
+      if (event.contentChanges.length > 0) {
+        await validate(event.document, AutoValidation.ALWAYS);
       }
     }),
     workspace.onDidCloseTextDocument((document) => {
       validations.delete(document.uri);
     }),
-    commands.registerCommand("vscode-html-css.validate", async () => {
-      const editor = window.activeTextEditor;
-      if (editor) {
-        const document = editor.document;
-        if (enabledLanguages.includes(document.languageId)) {
-          validations.set(document.uri, await provider.validate(document));
+    commands.registerCommand(
+      "vscode-html-css.validate",
+      async (type: AutoValidation | undefined) => {
+        const editor = window.activeTextEditor;
+        if (editor) {
+          await validate(editor.document, type);
         }
       }
-    }),
+    ),
     commands.registerCommand("vscode-html-css.clear", () => clear())
   );
+
+  return commands.executeCommand(
+    "vscode-html-css.validate",
+    AutoValidation.ALWAYS
+  );
 }
 
 export function deactivate() {}

src/extension.ts

@@ -238,6 +238,7 @@ export class Provider implements CompletionItemProvider, DefinitionProvider {
 }
 
 export function clear() {
+  window.showInformationMessage(`CSS: Style cache (${cache.size}) cleared.`);
   cache.clear();
 }