Merge pull request #98 from wkillerud/svelte-dollar

fix: no longer omit the $ in variable completions for Svelte

e2e/src/suite/completion/completion.test.ts

@@ -65,16 +65,16 @@ describe("SCSS Completion Test", function () {
 			},
 		];
 		await testCompletion(docUri, position(11, 11), expectedCompletions);
+		await testCompletion(svelteDocUri, position(14, 11), expectedCompletions);
 
-		// For Vue, Svelte and Astro, the existing $ is not replaced by VS Code, so omit it from insertText
+		// For Vue and Astro, the existing $ is not replaced by VS Code, so omit it from insertText
 		expectedCompletions = [
 			{
 				label: "$tilde",
 				insertText: '"tilde"',
 			},
 		];
 		await testCompletion(vueDocUri, position(22, 11), expectedCompletions);
-		await testCompletion(svelteDocUri, position(14, 11), expectedCompletions);
 		await testCompletion(astroDocUri, position(17, 11), expectedCompletions);
 	});
 
@@ -188,19 +188,25 @@ describe("SCSS Completion Test", function () {
 	});
 
 	it("Offers variable completions on Vuelike file", async () => {
-		// In Vue, Svelte and Astro files:
+		// In Vue and Astro files:
 		// For variables _without_ a namespace ($color as opposed to namespace.$color),
 		// VS Code does not replace the existing $ when using the completion.
 		// The insertText must be without one to avoid $$color. However, filterText
 		// still need the $ sign for the suggestion to match.
-		const expectedCompletions = [
+		let expectedCompletions = [
 			{ label: "$color", insertText: '"color"', filterText: undefined },
 			{ label: "$fonts", insertText: '"fonts"', filterText: undefined },
 		];
 
 		await testCompletion(vueDocUri, position(16, 11), expectedCompletions);
-		await testCompletion(svelteDocUri, position(8, 11), expectedCompletions);
 		await testCompletion(astroDocUri, position(11, 11), expectedCompletions);
+
+		expectedCompletions = [
+			{ label: "$color", insertText: '"$color"', filterText: undefined },
+			{ label: "$fonts", insertText: '"$fonts"', filterText: undefined },
+		];
+
+		await testCompletion(svelteDocUri, position(8, 11), expectedCompletions);
 	});
 
 	it("Offers namespace completion inside string interpolation", async () => {

server/src/features/completion/variable-completion.ts

@@ -87,7 +87,7 @@ export function createVariableCompletionItems(
 			// Avoid ending up with namespace.prefix-$variable
 			label = `$${prefix}${asDollarlessVariable(variable.name)}`;
 			// The `.` in the namespace gets replaced unless we have a $ character after it.
-			// Except when we're embedded in Vue, Svelte or Astro, where the . is not replace.
+			// Except when we're embedded in Vue, Svelte or Astro, where the . is not replaced.
 			// Also, in embedded scenarios where we don't use a namespace, the existing $ sign is not replaced.
 			insertText = context.word.endsWith(".")
 				? `${isEmbedded ? "" : "."}${label}`
@@ -97,7 +97,12 @@ export function createVariableCompletionItems(
 			filterText = context.word.endsWith(".")
 				? `${context.namespace}.${label}`
 				: label;
-		} else if (isEmbedded) {
+		} else if (
+			context.originalExtension === "vue" ||
+			context.originalExtension === "astro"
+		) {
+			// In Vue and Astro files, the $ does not get replaced by the suggestion,
+			// so exclude it from the insertText.
 			insertText = asDollarlessVariable(label);
 		}