Prevent removal of Twoslash // @filename directives (#428)

hippotastic · web-flow · commit 05996265472f · 2026-02-23T20:28:35.000+01:00
diff --git a/.changeset/light-aliens-cross.md b/.changeset/light-aliens-cross.md
@@ -0,0 +1,8 @@
+---
+'@expressive-code/plugin-frames': patch
+'astro-expressive-code': patch
+'expressive-code': patch
+'rehype-expressive-code': patch
+---
+
+Prevents the frames plugin from treating Twoslash `// @filename` directives as filename comments. This keeps multi-file Twoslash code blocks intact. Thank you for the report, @Adammatthiesen!
diff --git a/packages/@expressive-code/plugin-frames/src/utils.ts b/packages/@expressive-code/plugin-frames/src/utils.ts
@@ -117,6 +117,9 @@ export function getFileNameFromComment(line: string, lang: string): string | und
 	const possibleFileName = matches?.[2]
 	if (!possibleFileName) return
 
+	// Keep Twoslash VFS directives in place so downstream plugins can process them.
+	if (textBeforeFileName.trim().toLowerCase() === '@filename') return
+
 	// Ignore strings that only consist of special characters (dots, path separators, etc.)
 	if (!possibleFileName.match(/[^.:/\\~]/)) return
 
diff --git a/packages/@expressive-code/plugin-frames/test/preprocess-code.test.ts b/packages/@expressive-code/plugin-frames/test/preprocess-code.test.ts
@@ -302,6 +302,24 @@ npm install expressive-code
 })
 
 describe('Leaves comments unlikely to be file names untouched', () => {
+	test('Twoslash virtual file directives', async () => {
+		const code = `
+// @filename: module.ts
+export const testValue = 'ok'
+
+// @filename: index.ts
+import { testValue } from "module"
+		`
+		await expectCodeResult({
+			code,
+			language: 'ts',
+			expected: {
+				title: undefined,
+				code: code.trim(),
+			},
+		})
+	})
+
 	test('Comments after line 4', async () => {
 		const code = `
 Line 1
