feat: add cssColorPreview support for inline comments

Author: devvaannsh

src/extensionsIntegrated/CSSColorPreview/main.js

@@ -53,6 +53,25 @@ define(function (require, exports, module) {
         description: Strings.DESCRIPTION_CSS_COLOR_PREVIEW
     });
 
+
+    /**
+     * Helper function to find the nth occurrence of a substring in a string
+     * @param {String} str the line text
+     * @param {String} substr color
+     * @param {Number} nth the occurence count of the color
+     * @return {Number} the index of the nth occurence
+     */
+    function findNthOccurrence(str, substr, nth) {
+        let pos = -1;
+        while (nth-- > 0) {
+            pos = str.indexOf(substr, pos + 1);
+            if (pos === -1) {
+                break; // Exit early if the substring isn't found
+            }
+        }
+        return pos;
+    }
+
     /**
      * Responsible to get all the colors and their respective line numbers.
      *
@@ -65,26 +84,51 @@ define(function (require, exports, module) {
         const nLen = editor.lineCount();
         const aColors = [];
 
-        // match colors and push into an array
+        // Match colors and push into an array
         for (let i = 0; i < nLen; i++) {
             let lineText = editor.getLine(i);
+            let regx = /:[^;]*;/g;
 
-            // to skip commented lines
-            // The second parameter in the getToken() method, `true`, enables precise tokenization.
-            // Without setting `precise` to `true`, multi-line comments are not handled correctly.
-            const token = editor.getToken({line: i}, true);
-            if(token.type === "comment") {
-                continue;
-            }
+            let lineMatches = lineText.match(regx);
+            if (lineMatches) {
+                // Iterate through all matches to find valid colors
+                let validColors = [];
+
+                // We need to track the occurrence count for colors because in cases like this:
+                // /*color: linear-gradient(red, blue, green, yellow);*/ color: red;
+                // The color "red" appears twice: the first occurrence is inside a comment,
+                // but the second one is not. If we simply search for the index of "red"
+                // using `indexOf`, it will always return the first match, which belongs
+                // to the comment. This would incorrectly mark the second "red" (outside
+                // the comment) as invalid. By tracking occurrences, we ensure we check
+                // the correct instance of "red" and only ignore those inside comments.
+                let occurrenceCount = {}; // Track occurrences for each color
+
+                for (let lineMatch of lineMatches) {
+                    let tempColors = lineMatch.match(COLOR_REGEX);
+
+                    if (tempColors && tempColors.length > 0) {
+                        let filteredColors = tempColors.filter(color => {
+                            // Increment the occurrence count for this color
+                            occurrenceCount[color] = (occurrenceCount[color] || 0) + 1;
+
+                            // Find the nth occurrence index of the color
+                            const colorIndex = findNthOccurrence(lineText, color, occurrenceCount[color]);
+
+                            // Check if the color is within a comment
+                            const token = editor.getToken({ line: i, ch: colorIndex }, true);
+
+                            // If the token is not a comment, keep the color
+                            return token.type !== "comment";
+                        });
 
-            let regx = /:[^;]*;/g;
+                        validColors.push(...filteredColors);
+                    }
+                }
 
-            lineText = lineText.match(regx);
-            if (lineText) {
-                let tempColors = lineText[0].match(COLOR_REGEX);
                 // Support up to 4 colors
-                if (tempColors && tempColors.length > 0) {
-                    let colors = tempColors.slice(0, 4);
+                if (validColors.length > 0) {
+                    let colors = validColors.slice(0, 4);
                     aColors.push({
                         lineNumber: i,
                         colorValues: colors
@@ -341,35 +385,49 @@ define(function (require, exports, module) {
      *  the colors to be added on those lines
      */
     function updateColorMarks(editor, fromLineNumber, toLineNumber) {
-        // const nLen = editor.lineCount();
+
         const aColors = [];
 
-        // match colors and push into an array
+        // Match colors and push into an array
         for (let i = fromLineNumber; i <= toLineNumber; i++) {
             let lineText = editor.getLine(i);
+            let regx = /:[^;]*;/g;
 
-            // to skip commented lines
-            // The second parameter in the getToken() method, `true`, enables precise tokenization.
-            // Without setting `precise` to `true`, multi-line comments are not handled correctly.
-            const token = editor.getToken({line: i}, true);
-            if(token.type === "comment") {
-                editor.setGutterMarker(i, GUTTER_NAME, "");
-                continue;
-            }
+            let lineMatches = lineText.match(regx);
+            if (lineMatches) {
+                // Iterate through all matches to find valid colors
+                let validColors = [];
+                let occurrenceCount = {}; // Track occurrences for each color
 
-            let regx = /:[^;]*;/g;
 
-            lineText = lineText.match(regx);
-            if (lineText) {
-                let tempColors = lineText[0].match(COLOR_REGEX);
+                for (let lineMatch of lineMatches) {
+                    let tempColors = lineMatch.match(COLOR_REGEX);
 
-                // to remove color if the line is modified and now the colors are not valid
-                if(!tempColors) {
-                    editor.setGutterMarker(i, GUTTER_NAME, "");
+                    if (tempColors && tempColors.length > 0) {
+                        let filteredColors = tempColors.filter(color => {
+                            // Increment the occurrence count for this color
+                            occurrenceCount[color] = (occurrenceCount[color] || 0) + 1;
+
+                            // Find the nth occurrence index of the color
+                            const colorIndex = findNthOccurrence(lineText, color, occurrenceCount[color]);
+
+                            // Check if the color is within a comment
+                            const token = editor.getToken({ line: i, ch: colorIndex }, true);
+
+                            // If the token is not a comment, keep the color
+                            return token.type !== "comment";
+                        });
+
+                        validColors.push(...filteredColors);
+                    }
                 }
-                // Support up to 4 colors
-                if (tempColors && tempColors.length > 0) {
-                    let colors = tempColors.slice(0, 4);
+
+                // If no valid colors, clear the gutter marker
+                if (validColors.length === 0) {
+                    editor.setGutterMarker(i, GUTTER_NAME, "");
+                } else {
+                    // Take up to 4 valid colors
+                    let colors = validColors.slice(0, 4);
                     aColors.push({
                         lineNumber: i,
                         colorValues: colors