[lsp-server] 🐞 regression: syntax highlighting messed up

[aradalvand]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Most likely caused by #3518

in v1.3.3:

in v1.3.2:

Expected Behavior

No response

Steps To Reproduce

The example screenshotted above (just make sure you have the Svelte extension + the GraphQL extension installed in VS Code, and then create a Test.svelte file, pasting the following content into it):

<script
	lang="ts"
	context="module"
>
	export const cartEventFragment = graphql(`
		fragment cartEvent on CartEvent @_unmask {
			__typename
			occurredAt
			guestToken
			user {
				fullName
				mobilePhoneNumber
			}
			course {
				id
				miniTitle
			}
		}
	`);
</script>

<script lang="ts">
	// Imports:
	import { routeMap } from '$common/routeMap';
	import { toPersianDigits } from '$common/misc';
	import type { ComponentProps } from 'svelte';
	import { graphql, type ResultOf } from '$graphql';
	// Imports | Components:
	import EventBox from '$components/EventBox.svelte';
	import type EventBoxEvent from '$components/EventBoxItem.svelte';
	// Imports | Icons:
	import CartPlusIcon from '$assets/icons/cart-plus.svg?component';

	// Props | Required:
	export let events: readonly ResultOf<typeof cartEventFragment>[];

	// Maps:
	const typeToTheme = new Map<
		ResultOf<typeof cartEventFragment>['__typename'],
		ComponentProps<EventBoxEvent>['theme']
	>([
		['CartItemAddedEvent', 'cyan'],
		['CartItemDeletedEvent', 'red'],
	]);
</script>

<EventBox
	title="آخرین *رویدادهای سبد خرید*"
	icon={CartPlusIcon}
	{events}
	fetchMore={async currentCount => {
		const { events } = await graphql(
			`
				query getLatestCartEvents($skip: Int!, $take: Int!) {
					events: latestCartEvents(skip: $skip, take: $take) {
						...cartEvent
					}
				}
			`,
			[cartEventFragment]
		).execute({ skip: currentCount, take: 10 });
		return events;
	}}
	let:event
	let:EventItem
>
	<EventItem
		occurredAt={event.occurredAt}
		theme={typeToTheme.get(event.__typename)}
		let:Highlighted
		let:Link
	>
		{#if event.user}
			<Highlighted textToCopy={event.user.fullName}>
				{event.user.fullName}
			</Highlighted>
			به شماره همراه
			<Highlighted textToCopy={event.user.mobilePhoneNumber}>
				{toPersianDigits(event.user.mobilePhoneNumber)}
			</Highlighted>
		{:else}
			کاربر میهمان به شناسه
			<Highlighted textToCopy={event.guestToken}>
				{event.guestToken.substring(0, 6)}
			</Highlighted>
		{/if}
		دوره‌ی
		<Link href={routeMap.coursePage(event.course)}>{event.course.miniTitle}</Link>
		را
		{#if event.__typename == 'CartItemAddedEvent'}
			به سبد خرید خود افزود.
		{:else}
			از سبد خرید خود حذف کرد.
		{/if}
	</EventItem>
</EventBox>

Environment

• LSP Server Version:
• OS:
• LSP Client:

Anything else?

No response

[aradalvand]

Update: It's not just Svelte files. Here's a .ts file with the same problem (notice how the export and const keywords after the first fragment are yellow:

This didn't happen in v1.3.2:

The source code in the images above:

import { graphql } from '$graphql';

export const currentUserBasicInfoFragment = graphql(`
	fragment currentUserBasicInfo on User {
		id
		fullName
		specialRole
		purchasedCourses {
			id
		}
	}
`);

export const courseInCartBasicInfoFragment = graphql(`
	fragment courseInCartBasicInfo on Course {
		id
	}
`);

export const userPositionOnCourseFragment = graphql(`
	fragment userPositionOnCourse on UserCoursePosition {
		lesson {
			number
		}
		lastUpdatedAt
		videoPlaybackTime
	}
`);

export const discountFragment = graphql(`
	fragment discount on Discount {
		__typename
		percentage
		... on TimeBasedDiscount {
			interval
		}
	}
`);

[acao]

@dschafer thanks for this! we will revert and re-release, add and fix these test cases, and release again when it's working for this bug. Sorry about that!

[acao]

ok the fix is released for syntax extension 1.3.4! hopefully we can resolve this before our next attempt

https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/CHANGELOG.md#134