feat: css validation api

Author: abose

README.md

@@ -89,7 +89,7 @@ retrieving CSS selectors(document symbols such as classes, IDs, and other select
 
 ### Methods
 
-#### `getAllSymbols(text, cssMode, filePath)`
+### `getAllSymbols(text, cssMode, filePath)`
 
 Retrieves all CSS selectors from the provided CSS text as an array of strings.
 
@@ -111,6 +111,52 @@ const selectors = CSSLanguageService.getAllSymbols(cssText, CSSLanguageService.C
 console.log(selectors); // Output: [".class", "#id"]
 ```
 
+### `validateCSS(text, cssMode, filePath, lintSettings)`
+
+Validates CSS code using specified settings and returns an array of diagnostic messages.
+
+**Parameters:**
+
+- `text` (string): The CSS code to be validated.
+- `cssMode` (string): The CSS mode used for parsing the code.
+- `filePath` (string): The path of the CSS file being validated.
+- `lintSettings` (object): The lint settings to be used for validation.
+
+  Possible keys and their descriptions:
+  - `compatibleVendorPrefixes`: Unnecessary vendor prefixes checker.
+  - `vendorPrefix`: Warns on missing vendor prefixes.
+  - `duplicateProperties`: Flags duplicated CSS properties.
+  - `emptyRules`: Detects CSS rules that have no properties.
+  - `importStatement`: Flags the use of @import within CSS files.
+  - `boxModel`: Warns if CSS box model is potentially misused.
+  - `universalSelector`: Warns against the use of the universal selector (*).
+  - `zeroUnits`: Warns when units specification for zero values is unnecessary.
+  - `fontFaceProperties`: Ensures necessary properties are included in @font-face declarations.
+  - `hexColorLength`: Enforces consistency in hex color definitions.
+  - `argumentsInColorFunction`: Validates arguments within color functions.
+  - `unknownProperties`: Warns on unrecognized or mistyped CSS properties.
+  - `ieHack`: Warns about CSS hacks for older versions of Internet Explorer.
+  - `unknownVendorSpecificProperties`: Flags vendor-specific properties that might not be universally recognized.
+  - `propertyIgnoredDueToDisplay`: Notifies when CSS properties are ignored due to the `display` setting of an element.
+  - `important`: Warns against the excessive use of `!important`.
+  - `float`: Advises on the use of `float`, recommending modern layout alternatives.
+  - `idSelector`: Advises against using ID selectors for styling.
+
+Each key's value can be "warning" or "error".
+
+**Return Value:**
+
+Returns an `Array` of objects with the following properties:
+- `code` (string)
+- `source` (string)
+- `message` (string)
+- `severity` (number)
+- `range` (object) which includes:
+  - `start` (object): contains `line` (number) and `character` (number)
+  - `end` (object): contains `line` (number) and `character` (number)
+
+These objects represent the diagnostic messages produced during validation.
+
 ### Constants
 
 #### `CSSLanguageService.CSS_MODES`

src/css-ls.js

@@ -7,6 +7,13 @@ export const CSS_MODES = {
     SCSS: "scss"
 };
 
+export const DiagnosticSeverity = {
+    error: 1,
+    warning: 2,
+    information: 3,
+    hint: 4
+};
+
 function getTextDocument(text, languageID, filePath = "file://placeholder.css") {
     return cssLangService.TextDocument.create(filePath, languageID, 1, text);
 }
@@ -27,3 +34,56 @@ export function getAllSymbols(text, cssMode, filePath) {
     }
     return output;
 }
+
+/**
+ * Validates CSS code using specified settings and returns array of diagnostic messages.
+ *
+ * @param {string} text - The CSS code to be validated.
+ * @param {string} cssMode - The CSS mode used for parsing the code.
+ * @param {string} filePath - The path of the CSS file being validated.
+ * @param {Object} lintSettings - The lint settings to be used for validation. Keys may include:
+ * - "compatibleVendorPrefixes": Unnecessary vendor prefixes checker.
+ * - "vendorPrefix": Warns on missing vendor prefixes.
+ * - "duplicateProperties": Flags duplicated CSS properties.
+ * - "emptyRules": Detects CSS rules that have no properties.
+ * - "importStatement": Flags the use of @import within CSS files.
+ * - "boxModel": Warns if CSS box model is potentially misused.
+ * - "universalSelector": Warns against the use of the universal selector (*).
+ * - "zeroUnits": Warns when units specification for zero values is unnecessary.
+ * - "fontFaceProperties": Ensures necessary properties are included in @font-face declarations.
+ * - "hexColorLength": Enforces consistency in hex color definitions.
+ * - "argumentsInColorFunction": Validates arguments within color functions.
+ * - "unknownProperties": Warns on unrecognized or mistyped CSS properties.
+ * - "ieHack": Warns about CSS hacks for older versions of Internet Explorer.
+ * - "unknownVendorSpecificProperties": Flags vendor-specific properties that might not be universally recognized.
+ * - "propertyIgnoredDueToDisplay": Notifies when CSS properties are ignored due to the `display` setting of an element.
+ * - "important": Warns against the excessive use of `!important`.
+ * - "float": Advises on the use of `float`, recommending modern layout alternatives.
+ * - "idSelector": Advises against using ID selectors for styling.
+ * Each key's value can be "warning" or "error".
+ *
+ * @returns {Array.<{
+ *     code: string,
+ *     source: string,
+ *     message: string,
+ *     severity: number,
+ *     range: {
+ *         start: {
+ *             line: number,
+ *             character: number
+ *         },
+ *         end: {
+ *             line: number,
+ *             character: number
+ *         }
+ *     }
+ * }>} diagnosticMessages An array of diagnostic messages produced during validation.
+ */
+export function validateCSS(text, cssMode, filePath, lintSettings) {
+    const textDocument = getTextDocument(text, cssMode, filePath);
+    const stylesheet = service.parseStylesheet(textDocument);
+    return  service.doValidation(textDocument, stylesheet, {
+        validate: true,
+        lint: lintSettings
+    });
+}

src/worker.js

@@ -1,12 +1,14 @@
-import {getAllSymbols, CSS_MODES} from "./css-ls";
+import {getAllSymbols, CSS_MODES, validateCSS, DiagnosticSeverity} from "./css-ls";
 import {HTML_MODES, getAllDocumentLinks} from "./html-ls";
 
 self.CSSLanguageService = {
     getAllSymbols,
-    CSS_MODES
+    validateCSS,
+    CSS_MODES,
+    DiagnosticSeverity
 };
 
 self.HTMLLanguageService = {
     getAllDocumentLinks,
-    HTML_MODES
+    HTML_MODES,
 };