fix: less and css variables like var(--blue-desk) or @red incorrectly treated as colors

docs/API-Reference/editor/Editor.md

@@ -107,7 +107,7 @@ const Editor = brackets.getModule("editor/Editor")
         * [.getLanguageForPosition()](#Editor+getLanguageForPosition) ⇒ <code>Language</code>
         * [.getModeForDocument()](#Editor+getModeForDocument) ⇒ <code>Object</code> \| <code>String</code>
         * [.updateLayout([forceRefresh])](#Editor+updateLayout)
-        * [.setGutterMarker(lineNumber, gutterName, marker)](#Editor+setGutterMarker)
+        * [.setGutterMarker(lineNumber, gutterName, marker)](#Editor+setGutterMarker) ⇒ <code>Object</code>
         * [.getGutterMarker(lineNumber, gutterName)](#Editor+getGutterMarker)
         * [.clearGutterMarker(lineNumber, gutterName)](#Editor+clearGutterMarker)
         * [.isGutterActive(gutterName)](#Editor+isGutterActive)
@@ -1237,10 +1237,12 @@ should not be used on inline editors
 
 <a name="Editor+setGutterMarker"></a>
 
-### editor.setGutterMarker(lineNumber, gutterName, marker)
+### editor.setGutterMarker(lineNumber, gutterName, marker) ⇒ <code>Object</code>
 Sets the marker for the specified gutter on the specified line number
 
 **Kind**: instance method of [<code>Editor</code>](#Editor)  
+**Returns**: <code>Object</code> - lineHandle   this can be used to track the gutter line as the line number
+                                 changes as the user edits code.  
 
 | Param | Type | Description |
 | --- | --- | --- |

src/extensionsIntegrated/CSSColorPreview/main.js

@@ -230,6 +230,7 @@ define(function (require, exports, module) {
         // Add listener for all editor changes
         EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) {
             if (newEditor && newEditor.isGutterActive(GUTTER_NAME)) {
+                console.time("xxxxxxxxxxx");
                 newEditor.off("cursorActivity.colorPreview");
                 newEditor.on("cursorActivity.colorPreview", _cursorActivity);
                 // Unbind the previous editor's change event if it exists
@@ -240,6 +241,7 @@ define(function (require, exports, module) {
                 newEditor.on("change", onChanged);
                 showColorMarks();
                 _cursorActivity(null, newEditor);
+                console.timeEnd("xxxxxxxxxxx");
             }
         });
 
@@ -317,6 +319,16 @@ define(function (require, exports, module) {
         return token.type !== "comment";
     }
 
+    function isAlphanumeric(char) {
+        return /^[a-z0-9-@$]$/i.test(char);
+    }
+    function _isColor(segment, colorInSegment, colorIndex) {
+        const previousChar = colorIndex === 0 ? "" :  segment.charAt(colorIndex-1);
+        const endIndex = colorIndex + colorInSegment.length;
+        const nextChar = endIndex === segment.length ? "" :  segment.charAt(endIndex);
+        return !isAlphanumeric(previousChar) && !isAlphanumeric(nextChar);
+    }
+
     /**
      * Detects valid colors in a given line of text
      *
@@ -329,7 +341,7 @@ define(function (require, exports, module) {
         const languageID = editor.document.getLanguage().getId();
 
         // to make sure that code doesn't break when lineText is null.
-        if (!lineText) {
+        if (!lineText || lineText.length > 1000) { // too long lines we cant scan, maybe minified?
             return [];
         }
 
@@ -345,6 +357,10 @@ define(function (require, exports, module) {
 
             colorMatches.forEach(colorMatch => {
                 const colorIndex = lineMatch.index + colorMatch.index;
+                // this will also allow color name like vars eg: --red-main or @heading-green. we need to omit those
+                if(!_isColor(lineMatch[0], colorMatch[0], colorMatch.index)) {
+                    return;
+                }
 
                 // Check if the color is within a comment
                 const token = editor.getToken({ line: lineNumber, ch: colorIndex }, true);

test/spec/CSSColorPreview-test-files/base.css

@@ -14,3 +14,7 @@
 .class-5 {color: #b7ff00 green #3e4395;}
 .class-6 {color: #ff0090 #802095 #954e3e #454e3e;}
 .class-6 {color: #ff0090 #802095 #954e3e #454e3e #150e3e;}
+
+.class-vars {
+    color: var(--slight-red); background-color: @blue-light; color: var(--red); background-color: @blue;
+}

test/spec/Extn-CSSColorPreview-integ-test.js

@@ -306,7 +306,7 @@ define(function (require, exports, module) {
             it(`should deleting at end of file and appending should bring back color ${fileName}`, async function () {
                 const editor = await init();
 
-                __PR.setCursors(["12:1-19:1"]);
+                __PR.setCursors(["12:1-33:1"]);
                 __PR.keydown(["BACK_SPACE"]); // this will delete the colors at end of file
                 __PR.validateEqual(editor.lineCount(), 12);
                 await __PR.undo();