Skip to content

Commit

Permalink
fix: less and css variables like --blue-desk incorrectly treated as c…
Browse files Browse the repository at this point in the history
…olors
  • Loading branch information
abose committed Dec 11, 2024
1 parent 61e31fa commit f8b1bae
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 4 deletions.
6 changes: 4 additions & 2 deletions docs/API-Reference/editor/Editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 |
| --- | --- | --- |
Expand Down
18 changes: 17 additions & 1 deletion src/extensionsIntegrated/CSSColorPreview/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -240,6 +241,7 @@ define(function (require, exports, module) {
newEditor.on("change", onChanged);
showColorMarks();
_cursorActivity(null, newEditor);
console.timeEnd("xxxxxxxxxxx");
}
});

Expand Down Expand Up @@ -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
*
Expand All @@ -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 [];
}

Expand All @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions test/spec/CSSColorPreview-test-files/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion test/spec/Extn-CSSColorPreview-integ-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down

0 comments on commit f8b1bae

Please sign in to comment.