Added css.validation setting

Author: ecmel

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the extension will be documented in this file.
 
+## [1.5.0] - 2020-12-28
+
+- Added `css.validation` setting.
+ 
 ## [1.4.5] - 2020-12-28
 
 - Update documentation.

README.md

@@ -133,27 +133,37 @@ If it is not possible to specify local or remote styles in HTML or via template
 ```js
 "css.styleSheets": [
 
-  // (1)
-  "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
+    // (1)
+    "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
 
-  // (2)
-  "/site.css",
+    // (2)
+    "/site.css",
 
-  // (3)
-  "site.css",
+    // (3)
+    "site.css",
 
-  // (4)
-  "./site.css"
+    // (4)
+    "./site.css"
 ]
 ```
+## Selector Validation
+
+Validated selectors can be configured with the `css.validation` setting. By default `class` selectors are validated:
+
+```json
+"css.validation": {
+    "id": false,
+    "class": true
+}
+```
 
 ## Supported Languages
 
 Supported languages can be configured with the `css.enabledLanguages` setting. By default `html` is enabled:
 
 ```json
 "css.enabledLanguages": [
-  "html"
+    "html"
 ]
 ```
 

package.json

@@ -2,7 +2,7 @@
 	"name": "vscode-html-css",
 	"displayName": "HTML CSS Support",
 	"description": "CSS Intellisense for HTML",
-	"version": "1.4.5",
+	"version": "1.5.0",
 	"publisher": "ecmel",
 	"license": "MIT",
 	"homepage": "https://github.com/ecmel/vscode-html-css",
@@ -49,6 +49,15 @@
 					"default": [],
 					"description": "A list of local or remote style sheets for suggestions.",
 					"scope": "resource"
+				},
+				"css.validation": {
+					"type": "object",
+					"default": {
+						"id": false,
+						"class": true
+					},
+					"description": "Choose selectors for validation.",
+					"scope": "resource"
 				}
 			}
 		}

src/completion.ts

@@ -20,6 +20,11 @@ import {
     workspace
 } from "vscode";
 
+type Validation = {
+    id: boolean;
+    class: boolean;
+};
+
 export class SelectorCompletionItemProvider implements CompletionItemProvider, Disposable {
 
     readonly none = "__!NONE!__";
@@ -63,6 +68,10 @@ export class SelectorCompletionItemProvider implements CompletionItemProvider, D
         return workspace.getConfiguration("css", uri).get<string[]>("styleSheets", []);
     }
 
+    getValidation(uri: Uri): Validation {
+        return workspace.getConfiguration("css", uri).get<Validation>("validation", { id: false, class: true });
+    }
+
     getRelativePath(uri: Uri, spec: string, ext?: string): string {
         const folder = workspace.getWorkspaceFolder(uri);
         const name = ext ? join(dirname(spec), basename(spec, ext) + ext) : spec;
@@ -293,6 +302,7 @@ export class SelectorCompletionItemProvider implements CompletionItemProvider, D
         this.findAll(uri, text).then(sets => {
             const ids = new Set<string>();
             const classes = new Set<string>();
+            const validation = this.getValidation(uri);
 
             sets.forEach(set => set.forEach(key => this.getItems(key)?.forEach((v, k) => {
                 if (v.kind === CompletionItemKind.Value) {
@@ -322,13 +332,13 @@ export class SelectorCompletionItemProvider implements CompletionItemProvider, D
                     const start = document.positionAt(anchor - value[1].length);
 
                     if (attribute[1] === "id") {
-                        if (!ids.has(value[1])) {
+                        if (validation.id && !ids.has(value[1])) {
                             diagnostics.push(new Diagnostic(new Range(start, end),
                                 `CSS id selector '${value[1]}' not found.`,
-                                DiagnosticSeverity.Warning));
+                                DiagnosticSeverity.Information));
                         }
                     } else {
-                        if (!classes.has(value[1])) {
+                        if (validation.class && !classes.has(value[1])) {
                             diagnostics.push(new Diagnostic(new Range(start, end),
                                 `CSS class selector '${value[1]}' not found.`,
                                 DiagnosticSeverity.Warning));