Ensure Twoslash popup docs use configured code font-family for inline…

… code (#32) * ensure twoslash popup docs use code font-family for inline code * run pnpm lint:fix --------- Co-authored-by: Adam Matthiesen <[email protected]>
MatthiesenXYZ · Dec 16, 2024 · b094bb2 · b094bb2
1 parent 947bc69
commit b094bb2
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 36 deletions.
diff --git a/.changeset/five-keys-cheer.md b/.changeset/five-keys-cheer.md
@@ -0,0 +1,5 @@
+---
+"expressive-code-twoslash": patch
+---
+
+Ensure Twoslash popup documentation uses the configured code font-family for inline code
diff --git a/packages/twoslash/package.json b/packages/twoslash/package.json
@@ -31,9 +31,7 @@
 		"default": "./dist/index.js"
 	},
 	"types": "./dist/index.d.ts",
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"scripts": {
 		"build-js-module": "tsm --require=../../scripts/filter-warnings.cjs ./scripts/minify.ts",
 		"compile": "tsup ./src/index.ts --format esm --dts --sourcemap --clean",

diff --git a/packages/twoslash/src/annotations/completion.ts b/packages/twoslash/src/annotations/completion.ts
@@ -1,7 +1,7 @@
 import {
+	type AnnotationRenderOptions,
 	ExpressiveCodeAnnotation,
 	type ExpressiveCodeLine,
-	type AnnotationRenderOptions,
 } from "@expressive-code/core";
 import { h } from "@expressive-code/core/hast";
 import type { NodeCompletion } from "twoslash";

diff --git a/packages/twoslash/src/annotations/customTags.ts b/packages/twoslash/src/annotations/customTags.ts
@@ -1,13 +1,13 @@
 import {
+	type AnnotationRenderOptions,
 	ExpressiveCodeAnnotation,
 	type ExpressiveCodeLine,
-	type AnnotationRenderOptions,
 } from "@expressive-code/core";
-import { h, type Element } from "@expressive-code/core/hast";
+import { type Element, h } from "@expressive-code/core/hast";
 import type { NodeTag } from "twoslash";
-import { customTagsIcons } from "../icons/customTagsIcons";
 import { getCustomTagClass, getCustomTagString } from "../helpers";
-import type { TwoslashTag, CustomTagsIcon } from "../types";
+import { customTagsIcons } from "../icons/customTagsIcons";
+import type { CustomTagsIcon, TwoslashTag } from "../types";
 
 /**
  * Represents a custom annotation for Twoslash tags.

diff --git a/packages/twoslash/src/annotations/highlight.ts b/packages/twoslash/src/annotations/highlight.ts
@@ -2,7 +2,7 @@ import {
 	type AnnotationRenderOptions,
 	ExpressiveCodeAnnotation,
 } from "@expressive-code/core";
-import { type Root, type Element, h } from "@expressive-code/core/hast";
+import { type Element, type Root, h } from "@expressive-code/core/hast";
 import type { NodeHighlight } from "twoslash";
 
 /**

diff --git a/packages/twoslash/src/annotations/hover.ts b/packages/twoslash/src/annotations/hover.ts
@@ -1,8 +1,8 @@
 import {
-	ExpressiveCodeAnnotation,
 	type AnnotationRenderOptions,
+	ExpressiveCodeAnnotation,
 } from "@expressive-code/core";
-import { h, type Root, type Element } from "@expressive-code/core/hast";
+import { type Element, type Root, h } from "@expressive-code/core/hast";
 import type { NodeHover } from "twoslash";
 import type { RenderJSDocs } from "../types";
 

diff --git a/packages/twoslash/src/helpers/processors.ts b/packages/twoslash/src/helpers/processors.ts
@@ -1,7 +1,7 @@
 import type { ExpressiveCodeBlock } from "expressive-code";
 import type { NodeCompletion, TwoslashReturn } from "twoslash";
-import type { CompletionIcon, CompletionItem } from "../types";
 import { completionIcons } from "../icons/completionIcons";
+import type { CompletionIcon, CompletionItem } from "../types";
 
 /**
  * Splits the given code string into an array of objects, each containing the line index and the line content.

diff --git a/packages/twoslash/src/helpers/rendering.ts b/packages/twoslash/src/helpers/rendering.ts
@@ -1,5 +1,10 @@
+import { type Element, h } from "@expressive-code/core/hast";
 import type { ExpressiveCode } from "expressive-code";
 import { fromMarkdown } from "mdast-util-from-markdown";
+import { gfmFromMarkdown } from "mdast-util-gfm";
+import { toHast } from "mdast-util-to-hast";
+import type { NodeHover, NodeQuery } from "twoslash";
+import type { RenderJSDocs } from "../types";
 import {
 	jsdocTags,
 	reFunctionCleanup,
@@ -10,11 +15,6 @@ import {
 	reLeadingPropertyMethod,
 	reTypeCleanup,
 } from "./regex";
-import { gfmFromMarkdown } from "mdast-util-gfm";
-import { toHast } from "mdast-util-to-hast";
-import { h, type Element } from "@expressive-code/core/hast";
-import type { NodeHover, NodeQuery } from "twoslash";
-import type { RenderJSDocs } from "../types";
 
 /**
  * Renders markdown content with code blocks using ExpressiveCode.

diff --git a/packages/twoslash/src/helpers/utils.ts b/packages/twoslash/src/helpers/utils.ts
@@ -1,6 +1,6 @@
 import type { ExpressiveCodeBlock } from "@expressive-code/core";
-import { reTrigger, twoslashDefaultTags } from "./regex";
 import type { TwoslashOptions } from "twoslash";
+import { reTrigger, twoslashDefaultTags } from "./regex";
 
 /**
  * Calculates the width of a given text in pixels based on the character location, font size, and character width.

diff --git a/packages/twoslash/src/index.ts b/packages/twoslash/src/index.ts
@@ -1,33 +1,33 @@
 import { type ExpressiveCodePlugin, definePlugin } from "@expressive-code/core";
+import { ExpressiveCode } from "expressive-code";
 import { createTwoslasher } from "twoslash";
+import ts, { type CompilerOptions } from "typescript";
+import {
+	TwoslashCompletionAnnotation,
+	TwoslashCustomTagsAnnotation,
+	TwoslashErrorBoxAnnotation,
+	TwoslashErrorUnderlineAnnotation,
+	TwoslashHighlightAnnotation,
+	TwoslashHoverAnnotation,
+	TwoslashStaticAnnotation,
+} from "./annotations";
 import {
+	TwoslashIncludesManager,
 	buildMetaChecker,
 	checkForCustomTagsAndMerge,
-	processCompletion,
 	compareNodes,
 	ecConfig,
-	renderType,
-	renderJSDocs,
-	processTwoslashCodeBlock,
 	parseIncludeMeta,
-	TwoslashIncludesManager,
+	processCompletion,
+	processTwoslashCodeBlock,
+	renderJSDocs,
+	renderType,
 } from "./helpers";
 import floatingUiCore from "./module-code/floating-ui-core.min";
 import floatingUiDom from "./module-code/floating-ui-dom.min";
 import hoverDocsManager from "./module-code/popup.min";
 import { getTwoSlashBaseStyles, twoSlashStyleSettings } from "./styles";
 import type { PluginTwoslashOptions, TwoSlashStyleSettings } from "./types";
-import ts, { type CompilerOptions } from "typescript";
-import {
-	TwoslashCompletionAnnotation,
-	TwoslashCustomTagsAnnotation,
-	TwoslashErrorBoxAnnotation,
-	TwoslashErrorUnderlineAnnotation,
-	TwoslashHighlightAnnotation,
-	TwoslashHoverAnnotation,
-	TwoslashStaticAnnotation,
-} from "./annotations";
-import { ExpressiveCode } from "expressive-code";
 
 export type { PluginTwoslashOptions, TwoSlashStyleSettings };
 

diff --git a/packages/twoslash/src/module-code/popup.min.js b/packages/twoslash/src/module-code/popup.min.js
diff --git a/packages/twoslash/src/styles.ts b/packages/twoslash/src/styles.ts
@@ -1,8 +1,8 @@
 import {
-	lighten,
 	PluginStyleSettings,
 	type ResolverContext,
 	type StyleResolverFn,
+	lighten,
 	toHexColor,
 } from "@expressive-code/core";
 import type { TwoSlashStyleSettings } from "./types";
@@ -348,6 +348,11 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string {
             text-wrap: balance;
         }
 
+        .twoslash-popup-docs code {
+            font-family: ${cssVar("codeFontFamily")};
+            font-weight: ${cssVar("codeFontWeight")};
+        }
+
         .twoslash-popup-docs-tagline {
             display: flex;
             text-wrap-style: stable;