From 241de84cf0e578af1773673abebbf9934e2a9445 Mon Sep 17 00:00:00 2001
From: Giovanni Magliocchetti <giovimag123@gmail.com>
Date: Thu, 2 Oct 2025 19:28:04 +0200
Subject: [PATCH 1/2] feat: filter path suggestions by file type in HTML
 attributes

Implements intelligent file filtering for HTML path completion based on
tag type and attributes. Files matching the expected type are now
prioritized in autocomplete suggestions.

Changes:
- Add optional 'attributes' field to HtmlAttributeValueContext interface
- Pass node attributes to completion participants in htmlCompletion
- Implement getExtensionFilter() method in pathCompletion
- Use sortText to prioritize matching files (0_) over others (1_)
- Support multiple tag/attribute patterns:
  * <link rel="stylesheet"> prioritizes CSS files
  * <link rel="icon"> prioritizes image files
  * <script src> prioritizes JavaScript files
  * <img src> prioritizes image files
  * <video src> prioritizes video files
  * <audio src> prioritizes audio files
- Add comprehensive tests for filtering behavior
- Maintain backward compatibility (non-exclusive filtering)

All files remain visible and selectable; filtering is non-exclusive.
Directories are always included. No breaking changes to existing API.

Fixes #242999

Signed-off-by: Giovanni Magliocchetti <giovimag123@gmail.com>
---
 src/htmlLanguageTypes.ts                   |  1 +
 src/services/htmlCompletion.ts             | 18 +++--
 src/services/pathCompletion.ts             | 78 +++++++++++++++++++++-
 src/test/pathCompletionFixtures/styles.css |  4 ++
 src/test/pathCompletions.test.ts           | 74 +++++++++++++++++++-
 5 files changed, 161 insertions(+), 14 deletions(-)
 create mode 100644 src/test/pathCompletionFixtures/styles.css

diff --git a/src/htmlLanguageTypes.ts b/src/htmlLanguageTypes.ts
index 7a606186..d2f1fdfc 100644
--- a/src/htmlLanguageTypes.ts
+++ b/src/htmlLanguageTypes.ts
@@ -138,6 +138,7 @@ export interface HtmlAttributeValueContext {
 	attribute: string;
 	value: string;
 	range: Range;
+	attributes?: { [name: string]: string | null };
 }
 
 export interface HtmlContentContext {
diff --git a/src/services/htmlCompletion.ts b/src/services/htmlCompletion.ts
index df4694df..a8efe421 100644
--- a/src/services/htmlCompletion.ts
+++ b/src/services/htmlCompletion.ts
@@ -304,18 +304,16 @@ export class HTMLCompletion {
 				addQuotes = true;
 			}
 
-			if (completionParticipants.length > 0) {
-				const tag = currentTag.toLowerCase();
-				const attribute = currentAttributeName.toLowerCase();
-				const fullRange = getReplaceRange(valueStart, valueEnd);
-				for (const participant of completionParticipants) {
-					if (participant.onHtmlAttributeValue) {
-						participant.onHtmlAttributeValue({ document, position, tag, attribute, value: valuePrefix, range: fullRange });
-					}
+		if (completionParticipants.length > 0) {
+			const tag = currentTag.toLowerCase();
+			const attribute = currentAttributeName.toLowerCase();
+			const fullRange = getReplaceRange(valueStart, valueEnd);
+			for (const participant of completionParticipants) {
+				if (participant.onHtmlAttributeValue) {
+					participant.onHtmlAttributeValue({ document, position, tag, attribute, value: valuePrefix, range: fullRange, attributes: node.attributes });
 				}
 			}
-
-			dataProviders.forEach(provider => {
+		}			dataProviders.forEach(provider => {
 				provider.provideValues(currentTag, currentAttributeName).forEach(value => {
 					const insertText = addQuotes ? '"' + value.name + '"' : value.name;
 
diff --git a/src/services/pathCompletion.ts b/src/services/pathCompletion.ts
index 1739d33b..e79074a0 100644
--- a/src/services/pathCompletion.ts
+++ b/src/services/pathCompletion.ts
@@ -28,7 +28,7 @@ export class PathCompletionParticipant implements ICompletionParticipant {
 					result.isIncomplete = true;
 				} else {
 					const replaceRange = pathToReplaceRange(attributeCompletion.value, fullValue, attributeCompletion.range);
-					const suggestions = await this.providePathSuggestions(attributeCompletion.value, replaceRange, document, documentContext);
+					const suggestions = await this.providePathSuggestions(attributeCompletion.value, replaceRange, document, documentContext, attributeCompletion);
 					for (const item of suggestions) {
 						result.items.push(item);
 					}
@@ -38,7 +38,7 @@ export class PathCompletionParticipant implements ICompletionParticipant {
 		return result;
 	}
 
-	private async providePathSuggestions(valueBeforeCursor: string, replaceRange: Range, document: TextDocument, documentContext: DocumentContext) {
+	private async providePathSuggestions(valueBeforeCursor: string, replaceRange: Range, document: TextDocument, documentContext: DocumentContext, context?: HtmlAttributeValueContext) {
 		const valueBeforeLastSlash = valueBeforeCursor.substring(0, valueBeforeCursor.lastIndexOf('/') + 1); // keep the last slash
 
 		let parentDir = documentContext.resolveReference(valueBeforeLastSlash || '.', document.uri);
@@ -46,10 +46,37 @@ export class PathCompletionParticipant implements ICompletionParticipant {
 			try {
 				const result: CompletionItem[] = [];
 				const infos = await this.readDirectory(parentDir);
+				
+				// Determine file extensions to prioritize/filter based on tag and attributes
+				const extensionFilter = this.getExtensionFilter(context);
+				
 				for (const [name, type] of infos) {
 					// Exclude paths that start with `.`
 					if (name.charCodeAt(0) !== CharCode_dot) {
-						result.push(createCompletionItem(name, type === FileType.Directory, replaceRange));
+						const item = createCompletionItem(name, type === FileType.Directory, replaceRange);
+						
+						// Apply filtering/sorting based on file extension
+						if (extensionFilter) {
+							if (type === FileType.Directory) {
+								// Always include directories
+								result.push(item);
+							} else {
+								// For files, check if they match the filter
+								const matchesFilter = extensionFilter.extensions.some(ext => name.toLowerCase().endsWith(ext));
+								if (matchesFilter) {
+									// Add matching files with higher sort priority
+									item.sortText = '0_' + name;
+									result.push(item);
+								} else if (!extensionFilter.exclusive) {
+									// Add non-matching files with lower sort priority if not exclusive
+									item.sortText = '1_' + name;
+									result.push(item);
+								}
+								// If exclusive and doesn't match, don't add the file
+							}
+						} else {
+							result.push(item);
+						}
 					}
 				}
 				return result;
@@ -60,6 +87,51 @@ export class PathCompletionParticipant implements ICompletionParticipant {
 		return [];
 	}
 
+	/**
+	 * Determines which file extensions to filter/prioritize based on the HTML tag and attributes
+	 */
+	private getExtensionFilter(context?: HtmlAttributeValueContext): { extensions: string[], exclusive: boolean } | undefined {
+		if (!context) {
+			return undefined;
+		}
+
+		// Handle <link> tag with rel="stylesheet"
+		if (context.tag === 'link' && context.attribute === 'href' && context.attributes) {
+			const rel = context.attributes['rel'];
+			if (rel === 'stylesheet' || rel === '"stylesheet"' || rel === "'stylesheet'") {
+				// Filter to CSS files for stylesheets
+				return { extensions: ['.css', '.scss', '.sass', '.less'], exclusive: false };
+			}
+			if (rel === 'icon' || rel === '"icon"' || rel === "'icon'" || 
+			    rel === 'apple-touch-icon' || rel === '"apple-touch-icon"' || rel === "'apple-touch-icon'") {
+				// Filter to image files for icons
+				return { extensions: ['.ico', '.png', '.svg', '.jpg', '.jpeg', '.gif', '.webp'], exclusive: false };
+			}
+		}
+
+		// Handle <script> tag with src attribute - prioritize JS files
+		if (context.tag === 'script' && context.attribute === 'src') {
+			return { extensions: ['.js', '.mjs', '.cjs', '.ts', '.tsx', '.jsx'], exclusive: false };
+		}
+
+		// Handle <img> tag with src attribute - prioritize image files
+		if (context.tag === 'img' && context.attribute === 'src') {
+			return { extensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.bmp', '.ico'], exclusive: false };
+		}
+
+		// Handle <video> tag with src attribute - prioritize video files
+		if (context.tag === 'video' && context.attribute === 'src') {
+			return { extensions: ['.mp4', '.webm', '.ogg', '.mov', '.avi'], exclusive: false };
+		}
+
+		// Handle <audio> tag with src attribute - prioritize audio files
+		if (context.tag === 'audio' && context.attribute === 'src') {
+			return { extensions: ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac'], exclusive: false };
+		}
+
+		return undefined;
+	}
+
 }
 
 const CharCode_dot = '.'.charCodeAt(0);
diff --git a/src/test/pathCompletionFixtures/styles.css b/src/test/pathCompletionFixtures/styles.css
new file mode 100644
index 00000000..b49d4ff7
--- /dev/null
+++ b/src/test/pathCompletionFixtures/styles.css
@@ -0,0 +1,4 @@
+/* Main stylesheet */
+body {
+  font-family: Arial, sans-serif;
+}
diff --git a/src/test/pathCompletions.test.ts b/src/test/pathCompletions.test.ts
index b85be328..eae9b433 100644
--- a/src/test/pathCompletions.test.ts
+++ b/src/test/pathCompletions.test.ts
@@ -259,7 +259,7 @@ suite('HTML Path Completion', () => {
 
 	test('Completion should ignore files/folders starting with dot', async () => {
 		await testCompletion2For('<script src="./|"', {
-			count: 3
+			count: 4 // about/, index.html, src/, styles.css (excludes .foo.js)
 		}, indexHtmlUri, workspaceFolderUri);
 	});
 
@@ -289,4 +289,76 @@ suite('HTML Path Completion', () => {
 			]
 		}, aboutHtmlUri);
 	});
+
+	test('Filter CSS files for <link rel="stylesheet"> tag', async () => {
+		// Test filtering for stylesheet in about/ directory - CSS files should be prioritized
+		await testCompletion2For('<link rel="stylesheet" href="|">', {
+			items: [
+				{ label: 'about.css', kind: CompletionItemKind.File, resultText: '<link rel="stylesheet" href="about.css">' },
+				{ label: 'about.html', kind: CompletionItemKind.File, resultText: '<link rel="stylesheet" href="about.html">' },
+				{ label: 'media/', kind: CompletionItemKind.Folder, resultText: '<link rel="stylesheet" href="media/">', command: triggerSuggestCommand }
+			]
+		}, aboutHtmlUri);
+
+		// Test with double quotes in root directory
+		await testCompletion2For('<link rel="stylesheet" href="./|">', {
+			items: [
+				{ label: 'about/', kind: CompletionItemKind.Folder, resultText: '<link rel="stylesheet" href="./about/">', command: triggerSuggestCommand },
+				{ label: 'styles.css', kind: CompletionItemKind.File, resultText: '<link rel="stylesheet" href="./styles.css">' },
+				{ label: 'index.html', kind: CompletionItemKind.File, resultText: '<link rel="stylesheet" href="./index.html">' },
+				{ label: 'src/', kind: CompletionItemKind.Folder, resultText: '<link rel="stylesheet" href="./src/">', command: triggerSuggestCommand }
+			]
+		}, indexHtmlUri);
+
+		// Test with single quotes in rel attribute
+		await testCompletion2For(`<link rel='stylesheet' href="./|">`, {
+			items: [
+				{ label: 'about/', kind: CompletionItemKind.Folder, resultText: `<link rel='stylesheet' href="./about/">`, command: triggerSuggestCommand },
+				{ label: 'styles.css', kind: CompletionItemKind.File, resultText: `<link rel='stylesheet' href="./styles.css">` },
+				{ label: 'index.html', kind: CompletionItemKind.File, resultText: `<link rel='stylesheet' href="./index.html">` },
+				{ label: 'src/', kind: CompletionItemKind.Folder, resultText: `<link rel='stylesheet' href="./src/">`, command: triggerSuggestCommand }
+			]
+		}, indexHtmlUri);
+	});
+
+	test('Prioritize script files for <script> tag', async () => {
+		// JavaScript files should be prioritized for script tags
+		await testCompletion2For('<script src="./|">', {
+			items: [
+				{ label: 'about/', kind: CompletionItemKind.Folder, resultText: '<script src="./about/">', command: triggerSuggestCommand },
+				{ label: 'index.html', kind: CompletionItemKind.File, resultText: '<script src="./index.html">' },
+				{ label: 'src/', kind: CompletionItemKind.Folder, resultText: '<script src="./src/">', command: triggerSuggestCommand }
+			]
+		}, indexHtmlUri);
+
+		await testCompletion2For('<script src="./src/|">', {
+			items: [
+				{ label: 'feature.js', kind: CompletionItemKind.File, resultText: '<script src="./src/feature.js">' },
+				{ label: 'test.js', kind: CompletionItemKind.File, resultText: '<script src="./src/test.js">' }
+			]
+		}, indexHtmlUri);
+	});
+
+	test('No filtering for <link> tag without rel attribute', async () => {
+		// Without rel attribute, no filtering should occur
+		await testCompletion2For('<link href="./|">', {
+			items: [
+				{ label: 'about/', kind: CompletionItemKind.Folder, resultText: '<link href="./about/">', command: triggerSuggestCommand },
+				{ label: 'index.html', kind: CompletionItemKind.File, resultText: '<link href="./index.html">' },
+				{ label: 'src/', kind: CompletionItemKind.Folder, resultText: '<link href="./src/">', command: triggerSuggestCommand },
+				{ label: 'styles.css', kind: CompletionItemKind.File, resultText: '<link href="./styles.css">' }
+			]
+		}, indexHtmlUri);
+	});
+
+	test('Prioritize image files for <link rel="icon">', async () => {
+		// For rel="icon", we expect image file filtering (but media/ contains icon.pic which matches)
+		await testCompletion2For('<link rel="icon" href="|">', {
+			items: [
+				{ label: 'about.css', kind: CompletionItemKind.File, resultText: '<link rel="icon" href="about.css">' },
+				{ label: 'about.html', kind: CompletionItemKind.File, resultText: '<link rel="icon" href="about.html">' },
+				{ label: 'media/', kind: CompletionItemKind.Folder, resultText: '<link rel="icon" href="media/">', command: triggerSuggestCommand }
+			]
+		}, aboutHtmlUri);
+	});
 });

From 49c4454cee12bef738dbcf3b66a827f127befb32 Mon Sep 17 00:00:00 2001
From: Giovanni Magliocchetti <62136803+obrobrio2000@users.noreply.github.com>
Date: Thu, 2 Oct 2025 19:44:03 +0200
Subject: [PATCH 2/2] Update src/services/htmlCompletion.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/services/htmlCompletion.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/services/htmlCompletion.ts b/src/services/htmlCompletion.ts
index a8efe421..1400e4d5 100644
--- a/src/services/htmlCompletion.ts
+++ b/src/services/htmlCompletion.ts
@@ -313,7 +313,8 @@ export class HTMLCompletion {
 					participant.onHtmlAttributeValue({ document, position, tag, attribute, value: valuePrefix, range: fullRange, attributes: node.attributes });
 				}
 			}
-		}			dataProviders.forEach(provider => {
+		}
+		dataProviders.forEach(provider => {
 				provider.provideValues(currentTag, currentAttributeName).forEach(value => {
 					const insertText = addQuotes ? '"' + value.name + '"' : value.name;