[css] Redundant css suggestion for color. Fixes microsoft/vscode#43464

microsoft · Mar 26, 2018 · fa272ca · fa272ca
1 parent 3a64289
commit fa272ca
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/services/cssCompletion.ts b/src/services/cssCompletion.ts
@@ -413,7 +413,7 @@ export class CSSCompletion {
 			});
 		}
 		let colorValues = new Set();
-		this.styleSheet.acceptVisitor(new ColorValueCollector(colorValues));
+		this.styleSheet.acceptVisitor(new ColorValueCollector(colorValues, this.offset));
 		for (let color of colorValues.getEntries()) {
 			result.items.push({
 				label: color,
@@ -912,13 +912,15 @@ function collectValues(styleSheet: nodes.Stylesheet, declaration: nodes.Declarat
 
 class ColorValueCollector implements nodes.IVisitor {
 
-	constructor(public entries: Set) {
+	constructor(public entries: Set, private currentOffset: number) {
 		// nothing to do
 	}
 
 	public visitNode(node: nodes.Node): boolean {
 		if (node instanceof nodes.HexColorValue || (node instanceof nodes.Function && languageFacts.isColorConstructor(<nodes.Function>node))) {
-			this.entries.add(node.getText());
+			if (this.currentOffset < node.offset || node.end < this.currentOffset) {
+				this.entries.add(node.getText());
+			}
 		}
 		return true;
 	}

diff --git a/src/test/css/completion.test.ts b/src/test/css/completion.test.ts
@@ -53,7 +53,7 @@ export let assertCompletion = function (completions: CompletionList, expected: I
 
 suite('CSS - Completion', () => {
 
-	let testCompletionFor = function (value: string, expected: { count?: number, items?: ItemDescription[], participant?: { onProperty?, onPropertValue?, onURILiteralValue? } }) {
+	let testCompletionFor = function (value: string, expected: { count?: number, items?: ItemDescription[], participant?: { onProperty?, onPropertValue?, onURILiteralValue?} }) {
 		let offset = value.indexOf('|');
 		value = value.substr(0, offset) + value.substr(offset + 1);
 
@@ -341,6 +341,11 @@ suite('CSS - Completion', () => {
 				{ label: '#123456', kind: CompletionItemKind.Color, resultText: '.foo { background-color: #123456; } .bar { background-color:#123456 }' }
 			]
 		});
+		testCompletionFor('.bar { background-color: #123| }', {
+			items: [
+				{ label: '#123', notAvailable: true }
+			]
+		});
 		testCompletionFor('.foo { background-color: r|', {
 			items: [
 				{ label: 'rgb', kind: CompletionItemKind.Function, resultText: '.foo { background-color: rgb(${1:red}, ${2:green}, ${3:blue})' },