Merge pull request #99 from wkillerud/svelte-built-in-namespace

fix: avoid inserting double dots for built-ins like `math.floor` in Svelte, Vue and Astro

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

@@ -194,16 +194,16 @@ describe("SCSS Completion Test", function () {
 		// The insertText must be without one to avoid $$color. However, filterText
 		// still need the $ sign for the suggestion to match.
 		let expectedCompletions = [
-			{ label: "$color", insertText: '"color"', filterText: undefined },
-			{ label: "$fonts", insertText: '"fonts"', filterText: undefined },
+			{ label: "$color", insertText: '"color"' },
+			{ label: "$fonts", insertText: '"fonts"' },
 		];
 
 		await testCompletion(vueDocUri, position(16, 11), expectedCompletions);
 		await testCompletion(astroDocUri, position(11, 11), expectedCompletions);
 
 		expectedCompletions = [
-			{ label: "$color", insertText: '"$color"', filterText: undefined },
-			{ label: "$fonts", insertText: '"$fonts"', filterText: undefined },
+			{ label: "$color", insertText: '"$color"' },
+			{ label: "$fonts", insertText: '"$fonts"' },
 		];
 
 		await testCompletion(svelteDocUri, position(8, 11), expectedCompletions);
@@ -243,6 +243,32 @@ describe("SCSS Completion Test", function () {
 		await testCompletion(astroDocUri, position(31, 40), expectedCompletions);
 	});
 
+	it("Offers completions for Sass built-ins", async () => {
+		let expectedCompletions = [
+			{
+				label: "floor",
+				insertText: '".floor(${1:number})"',
+				filterText: '"math.floor"',
+			},
+		];
+
+		await testCompletion(docUri, position(36, 19), expectedCompletions);
+
+		// For Vue, Svelte and Astro, the existing . from the namespace is not replaced by VS Code, so omit them from insertText.
+		// However, we still need them both in the filter text.
+		expectedCompletions = [
+			{
+				label: "floor",
+				insertText: '"floor(${1:number})"',
+				filterText: '"math.floor"',
+			},
+		];
+
+		await testCompletion(vueDocUri, position(42, 19), expectedCompletions);
+		await testCompletion(svelteDocUri, position(34, 19), expectedCompletions);
+		await testCompletion(astroDocUri, position(37, 19), expectedCompletions);
+	});
+
 	it("Offers namespace completion inside string interpolation with preceeding non-space character", async () => {
 		const expectedCompletions = [
 			{

e2e/src/suite/completion/helper.ts

@@ -48,6 +48,14 @@ export async function testCompletion(
 			}
 		} else {
 			const match = result.items.find((i) => {
+				if (Object.prototype.hasOwnProperty.call(ei, "filterText")) {
+					if (JSON.stringify(i.filterText) === ei.filterText) {
+						return true;
+					} else {
+						return false;
+					}
+				}
+
 				if (typeof i.label === "string") {
 					return i.label === ei.label;
 				}
@@ -76,6 +84,7 @@ export async function testCompletion(
 			if (ei.detail) {
 				assert.strictEqual(match.detail, ei.detail);
 			}
+
 			if (ei.insertText) {
 				assert.ok(
 					JSON.stringify(match.insertText).includes(ei.insertText),
@@ -85,17 +94,6 @@ export async function testCompletion(
 				);
 			}
 
-			// This may deliberatly be undefined, in which case the filter matches the label
-			if (Object.prototype.hasOwnProperty.call(ei, "filterText")) {
-				assert.strictEqual(
-					JSON.stringify(match.filterText),
-					ei.filterText,
-					`Expected filterText to match ${
-						ei.filterText
-					}. Actual: ${JSON.stringify(match.filterText)}`,
-				);
-			}
-
 			if (ei.documentation) {
 				if (typeof match.documentation === "string") {
 					assert.strictEqual(match.documentation, ei.documentation);

fixtures/e2e/completion/AppButton.astro

@@ -30,4 +30,10 @@ $fonts: -apple-system;
   @include ns.
   --runtime-var: var(--other-var, #{ns.})
 }
+
+@use "sass:math";
+
+.foo {
+  padding: math.fl
+}
 </style>

fixtures/e2e/completion/AppButton.svelte

@@ -28,4 +28,9 @@ $fonts: -apple-system;
   --runtime-var: var(--other-var, #{ns.})
 }
 
+@use "sass:math";
+
+.foo {
+  padding: math.fl
+}
 </style>

fixtures/e2e/completion/AppButton.vue

@@ -36,4 +36,9 @@ $fonts: -apple-system;
   --runtime-var: var(--other-var, #{ns.})
 }
 
+@use "sass:math";
+
+.foo {
+  padding: math.fl
+}
 </style>

fixtures/e2e/completion/main.scss

@@ -29,3 +29,9 @@ $fonts: -apple-system;
 @function _multiply($value) {
   @return $value * ns.;
 }
+
+@use "sass:math";
+
+.foo {
+  padding: math.fl
+}

server/src/features/completion/completion.ts

@@ -212,12 +212,23 @@ function doBuiltInCompletion(
 ): void {
 	completions.items = Object.entries(module.exports).map(
 		([name, { description, signature, parameterSnippet, returns }]) => {
+			// Client needs the namespace as part of the text that is matched,
+			const filterText = `${context.namespace}.${name}`;
+
+			// Inserted text needs to include the `.` which will otherwise
+			// be replaced (except when we're embedded in Vue, Svelte or Astro).
+			// Example result: .floor(${1:number})
+			const isEmbedded = context.originalExtension !== "scss";
+			const insertText = context.word.includes(".")
+				? `${isEmbedded ? "" : "."}${name}${
+						signature ? `(${parameterSnippet})` : ""
+					}`
+				: name;
+
 			return {
 				label: name,
-				filterText: `${context.namespace}.${name}`,
-				insertText: context.word.endsWith(".")
-					? `.${name}${signature ? `(${parameterSnippet})` : ""}`
-					: name,
+				filterText,
+				insertText,
 				insertTextFormat: parameterSnippet
 					? InsertTextFormat.Snippet
 					: InsertTextFormat.PlainText,

web/src/suite/completion.test.ts

@@ -175,6 +175,18 @@ describe("Completions", () => {
 		await testCompletion(docUri, position(25, 40), expectedCompletions);
 	});
 
+	it("for Sass built-ins", async () => {
+		const expectedCompletions = [
+			{
+				label: "floor",
+				insertText: '".floor(${1:number})"',
+				filterText: '"math.floor"',
+			},
+		];
+
+		await testCompletion(docUri, position(36, 19), expectedCompletions);
+	});
+
 	it("inside string interpolation with preceeding non-space character", async () => {
 		const expectedCompletions = [
 			{