Show custom emmet css snippets if prefix match

src/emmetHelper.ts

@@ -107,14 +107,9 @@ export function doComplete(document: TextDocument, position: Position, syntax: s
 
 	if (isStyleSheet(syntax)) {
 		const stylesheetCustomSnippetsKeys = stylesheetCustomSnippetsKeyCache.has(syntax) ? stylesheetCustomSnippetsKeyCache.get(syntax) : stylesheetCustomSnippetsKeyCache.get('css');
-		let customSnippetSuggestions = makeSnippetSuggestion(stylesheetCustomSnippetsKeys, currentWord, abbreviation, abbreviationRange, expandOptions, false);
-		let matchFoundInCustomSnippets = customSnippetSuggestions.find(x => x.textEdit.newText === expandedAbbr.textEdit.newText);
-		if (matchFoundInCustomSnippets) {
-			// If the expanded abbreviation is one of the custom snippets, update the label
-			// Say there is a custom snippet with name xyz, and user types x, then the suggestion should have the label xyz
-			expandedAbbr.label = matchFoundInCustomSnippets.label;
-			expandedAbbr.detail = 'Emmet Custom Snippet';
-		} else {
+		completionItems = makeSnippetSuggestion(stylesheetCustomSnippetsKeys, currentWord, abbreviation, abbreviationRange, expandOptions, 'Emmet Custom Snippet', false);
+
+		if (!completionItems.find(x => x.textEdit.newText === expandedAbbr.textEdit.newText)) {
 			// Fix for https://github.com/Microsoft/vscode/issues/28933#issuecomment-309236902
 			// When user types in propertyname, emmet uses it to match with snippet names, resulting in width -> widows or font-family -> font: fantasy
 			// Updating the label will update the filterText used by VS Code, thus filtering out such cases
@@ -137,16 +132,16 @@ export function doComplete(document: TextDocument, position: Position, syntax: s
 					expandedAbbr.filterText = abbreviation;
 				}
 			}
-
+			completionItems.push(expandedAbbr);
 		}
 		return CompletionList.create(completionItems, true);
 	}
 
-	let commonlyUsedTagSuggestions = makeSnippetSuggestion(commonlyUsedTags, currentWord, abbreviation, abbreviationRange, expandOptions);
+	let commonlyUsedTagSuggestions = makeSnippetSuggestion(commonlyUsedTags, currentWord, abbreviation, abbreviationRange, expandOptions, 'Emmet Abbreviation');
 	completionItems = completionItems.concat(commonlyUsedTagSuggestions);
 
 	if (emmetConfig.showAbbreviationSuggestions) {
-		let abbreviationSuggestions = makeSnippetSuggestion(markupSnippetKeys, currentWord, abbreviation, abbreviationRange, expandOptions);
+		let abbreviationSuggestions = makeSnippetSuggestion(markupSnippetKeys, currentWord, abbreviation, abbreviationRange, expandOptions, 'Emmet Abbreviation');
 
 		// Workaround for the main expanded abbr not appearing before the snippet suggestions
 		if (expandedAbbr && abbreviationSuggestions.length > 0) {
@@ -164,7 +159,7 @@ export function doComplete(document: TextDocument, position: Position, syntax: s
 	return CompletionList.create(completionItems, true);
 }
 
-function makeSnippetSuggestion(snippets: string[], prefix: string, abbreviation: string, abbreviationRange: Range, expandOptions: any, skipFullMatch: boolean = true): CompletionItem[] {
+function makeSnippetSuggestion(snippets: string[], prefix: string, abbreviation: string, abbreviationRange: Range, expandOptions: any, snippetDetail: string, skipFullMatch: boolean = true): CompletionItem[] {
 	if (!prefix || !snippets) {
 		return [];
 	}
@@ -187,7 +182,7 @@ function makeSnippetSuggestion(snippets: string[], prefix: string, abbreviation:
 
 		let item = CompletionItem.create(prefix + snippetKey.substr(prefix.length));
 		item.documentation = replaceTabStopsWithCursors(expandedAbbr);
-		item.detail = 'Emmet Abbreviation';
+		item.detail = snippetDetail;
 		item.textEdit = TextEdit.replace(abbreviationRange, escapeNonTabStopDollar(expandedAbbr));
 		item.insertTextFormat = InsertTextFormat.Snippet;
 

src/test/emmetHelperTest.ts

@@ -510,7 +510,32 @@ describe('Test completions', () => {
                 assert.equal(completionList.items[0].filterText, expectedFilterText);
             });
             return Promise.resolve();
+        });
+    });
 
+    it('should provide both custom and default snippet completion when partial match with custom snippet', () => {
+        return updateExtensionsPath(extensionsPath).then(() => {
+            const expandOptions = {
+                preferences: {},
+                showExpandedAbbreviation: 'always',
+                showAbbreviationSuggestions: false,
+                syntaxProfiles: {},
+                variables: {}
+            };
+
+            const completionList1 = doComplete(TextDocument.create('test://test/test.css', 'css', 0, 'm'), Position.create(0, 1), 'css', expandOptions);
+            assert.equal(completionList1.items.findIndex(x => x.label === 'margin: ;') > -1, true);
+            assert.equal(completionList1.items.findIndex(x => x.label === 'mrgstart') > -1, true);
+
+            const completionList2 = doComplete(TextDocument.create('test://test/test.css', 'css', 0, 'mr'), Position.create(0, 2), 'css', expandOptions);
+            assert.equal(completionList2.items.findIndex(x => x.label === 'margin-right: ;') > -1, true);
+            assert.equal(completionList2.items.findIndex(x => x.label === 'mrgstart') > -1, true);
+
+            const completionList3 = doComplete(TextDocument.create('test://test/test.css', 'css', 0, 'mrg'), Position.create(0, 3), 'css', expandOptions);
+            assert.equal(completionList3.items.findIndex(x => x.label === 'margin-right: ;') > -1, true);
+            assert.equal(completionList3.items.findIndex(x => x.label === 'mrgstart') > -1, true);
+
+            return Promise.resolve();
         });
     });
 

testData/custom-snippets-profile/snippets.json

@@ -2,7 +2,8 @@
     "css": {
         "snippets": {
             "ch": "color:hsl(${1:0}, ${2:100}%, ${3:50}%);",
-            "hello": "margin: 10px"
+            "hello": "margin: 10px",
+            "mrgstart": "margin-start: 10px"
          }
     },
      "variables": {