Added validate command.

Author: ecmel

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to the extension will be documented in this file.
 
+## [1.8.0] - 2021-01-11
+
+- Added validate command.
+- Allow multi level inheritance.
+
 ## [1.7.2] - 2021-01-10
 
 - Update internals.

README.md

@@ -83,7 +83,7 @@ Template inheritance is supported for the following tags:
 {{> base }}
 ```
 
-Only one level of inheritance is supported:
+Styles defined in `base.html` will also be available for completion in `home.html`:
 
 **`base.html`**
 ```html
@@ -114,8 +114,6 @@ Only one level of inheritance is supported:
 </html>
 ```
 
-Styles defined in `base.html` will also be available for completion in `home.html`:
-
 **`home.html`**
 ```html
 {% extends "base" %}
@@ -161,6 +159,12 @@ Extension can be configured to support any language where it makes sense such as
 
 This setting is application scoped and changing the setting requires restarting VS Code.
 
+## Commands
+
+### Validate Attributes
+
+Validates all `id` and `class` attributes in the active editor.
+
 ## Installation
 
 Extension can be installed from [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css).

package.json

@@ -2,7 +2,7 @@
 	"name": "vscode-html-css",
 	"displayName": "HTML CSS Support",
 	"description": "CSS Intellisense for HTML",
-	"version": "1.7.2",
+	"version": "1.8.0",
 	"publisher": "ecmel",
 	"license": "MIT",
 	"homepage": "https://github.com/ecmel/vscode-html-css",
@@ -54,7 +54,13 @@
 					"default": []
 				}
 			}
-		}
+		},
+		"commands": [
+			{
+				"command": "vscode-html-css.validate",
+				"title": "CSS: Validate Attributes"
+			}
+		]
 	},
 	"main": "./dist/extension.js",
 	"scripts": {

src/completion.ts

@@ -8,6 +8,8 @@ import {
     CompletionItemKind,
     CompletionItemProvider,
     CompletionList,
+    Diagnostic,
+    DiagnosticSeverity,
     Disposable,
     Position,
     ProviderResult,
@@ -171,10 +173,12 @@ export class SelectorCompletionItemProvider implements CompletionItemProvider, D
         }
     }
 
-    async findExtendedStyles(uri: Uri, keys: Set<string>, text: string): Promise<void> {
+    async findExtendedStyles(uri: Uri, keys: Set<string>, text: string, level: number = 0): Promise<void> {
         const extended = this.findExtended.exec(text);
 
-        if (extended) {
+        if (extended && level < 3) {
+            level++;
+
             const name = extended[2];
             const ext = extname(name) || extname(uri.fsPath);
             const key = this.getRelativePath(uri, name, ext);
@@ -185,7 +189,9 @@ export class SelectorCompletionItemProvider implements CompletionItemProvider, D
                 const text = content.toString();
 
                 this.findDocumentStyles(file, keys, text);
+
                 await this.findDocumentLinks(file, keys, text);
+                await this.findExtendedStyles(file, keys, text, level);
             } catch (error) {
             }
         }
@@ -211,6 +217,47 @@ export class SelectorCompletionItemProvider implements CompletionItemProvider, D
         return { ids, classes };
     }
 
+    async validate(document: TextDocument): Promise<Diagnostic[]> {
+        const completion = await this.findAll(document);
+        const text = document.getText();
+        const diagnostics: Diagnostic[] = [];
+        const findAttribute = /(id|class|className)\s*=\s*("|')(.*?)\2/gsi;
+
+        let attribute;
+
+        while ((attribute = findAttribute.exec(text)) !== null) {
+            const offset = findAttribute.lastIndex
+                - attribute[3].length
+                + attribute[3].indexOf(attribute[2]);
+
+            const findSelector = /([^(\[{}\])\s]+)(?![^(\[{]*[}\])])/gi;
+
+            let value;
+
+            while ((value = findSelector.exec(attribute[3])) !== null) {
+                const anchor = findSelector.lastIndex + offset;
+                const end = document.positionAt(anchor);
+                const start = document.positionAt(anchor - value[1].length);
+
+                if (attribute[1] === "id") {
+                    if (!completion.ids.has(value[1])) {
+                        diagnostics.push(new Diagnostic(new Range(start, end),
+                            `CSS id selector '${value[1]}' not found.`,
+                            DiagnosticSeverity.Information));
+                    }
+                } else {
+                    if (!completion.classes.has(value[1])) {
+                        diagnostics.push(new Diagnostic(new Range(start, end),
+                            `CSS class selector '${value[1]}' not found.`,
+                            DiagnosticSeverity.Information));
+                    }
+                }
+            }
+        }
+
+        return diagnostics;
+    }
+
     provideCompletionItems(
         document: TextDocument,
         position: Position,

src/extension.ts

@@ -1,14 +1,30 @@
 import { SelectorCompletionItemProvider } from "./completion";
-import { ExtensionContext, languages, workspace } from "vscode";
+import { ExtensionContext, commands, languages, window, workspace } from "vscode";
 
 export function activate(context: ExtensionContext) {
+    const validations = languages.createDiagnosticCollection();
     const config = workspace.getConfiguration("css");
     const enabledLanguages = config.get<string[]>("enabledLanguages", ["html"]);
     const provider = new SelectorCompletionItemProvider();
 
     context.subscriptions.push(
+        commands.registerCommand("vscode-html-css.validate", async () => {
+            const editor = window.activeTextEditor;
+
+            if (editor) {
+                const document = editor.document;
+
+                if (enabledLanguages.includes(document.languageId)) {
+                    const diagnostics = await provider.validate(document);
+                    validations.set(document.uri, diagnostics);
+                }
+            }
+        }),
+        workspace.onDidChangeTextDocument(e => validations.delete(e.document.uri)),
+        workspace.onDidCloseTextDocument(document => validations.delete(document.uri)),
         languages.registerCompletionItemProvider(enabledLanguages, provider),
-        provider
+        provider,
+        validations
     );
 }