From 90095fb9deee8380295f65ba100fa89452bbea7f Mon Sep 17 00:00:00 2001 From: Maxwell Brown Date: Thu, 5 Dec 2024 15:04:21 -0500 Subject: [PATCH] run pnpm lint:fix --- packages/twoslash/package.json | 4 +- .../twoslash/src/annotations/completion.ts | 2 +- .../twoslash/src/annotations/customTags.ts | 8 +- .../twoslash/src/annotations/highlight.ts | 2 +- packages/twoslash/src/annotations/hover.ts | 4 +- packages/twoslash/src/helpers/processors.ts | 2 +- packages/twoslash/src/helpers/rendering.ts | 10 +- packages/twoslash/src/helpers/utils.ts | 2 +- packages/twoslash/src/index.ts | 32 +-- .../twoslash/src/module-code/popup.min.js | 2 +- packages/twoslash/src/styles.ts | 254 +++++++++--------- 11 files changed, 160 insertions(+), 162 deletions(-) diff --git a/packages/twoslash/package.json b/packages/twoslash/package.json index 3d9f5b4..43389b1 100644 --- 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 index d8fd1dd..4314d77 100644 --- 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 index 71d0025..0421e8e 100644 --- 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 index f44c573..0324729 100644 --- 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 index 31f149b..9e36caf 100644 --- 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 index f2a78f9..bd7ccc5 100644 --- 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 index c2e298c..e373efd 100644 --- 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 index c3c7477..7ff0666 100644 --- 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 index c4d6284..8b3e3b6 100644 --- 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 index 4674514..fe14867 100644 --- a/packages/twoslash/src/module-code/popup.min.js +++ b/packages/twoslash/src/module-code/popup.min.js @@ -5,4 +5,4 @@ To change it, modify the source file and then re-run the build script. */ -export default 'function setupTooltip(e,o){let s=e.querySelector(".twoslash-popup-container"),t=s.closest(".expressive-code"),i="twoslash_popup_"+[Math.random(),Date.now()].map(e=>e.toString(36).substring(2,10)).join("_");s.setAttribute("role","tooltip"),s.setAttribute("tabindex","-1"),s?.parentNode&&s.parentNode.removeChild(s);let a=!1,r;function n(){clearTimeout(r),t.appendChild(s),new Promise(e=>requestAnimationFrame(()=>{requestAnimationFrame(e)})).then(()=>FloatingUIDOM.computePosition(e,s,{placement:o?"bottom":"bottom-start",middleware:[FloatingUIDOM.size({apply({availableWidth:e}){Object.assign(s.style,{maxWidth:Math.max(300,e)+"px",maxHeight:"100%"})}})]})).then(({x:e,y:t})=>{Object.assign(s.style,{display:"block",left:`${o?20:e}px`,top:t+"px"})}),s.setAttribute("aria-hidden","false"),e.querySelector(".twoslash-hover span")?.setAttribute("aria-describedby",i),s.setAttribute("id",i)}function d(){s.setAttribute("aria-hidden","true"),e.querySelector(".twoslash-hover span")?.removeAttribute("aria-describedby"),s.removeAttribute("id"),s.style.display="none"}e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",()=>{r=setTimeout(()=>{a||d()},100)}),s.addEventListener("mouseenter",()=>{clearTimeout(r),a=!0}),s.addEventListener("mouseleave",()=>{a=!1,r=setTimeout(()=>{e.matches(":hover")||d()},100)}),e.addEventListener("focus",n),e.addEventListener("blur",d),d()}let isMobileScreen=window.matchMedia("(max-width: 500px)").matches;function initTwoslashPopups(e){e.querySelectorAll?.(".twoslash-hover").forEach(e=>{setupTooltip(e,isMobileScreen)})}initTwoslashPopups(document);let newTwoslashPopupObserver=new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{initTwoslashPopups(e)})));newTwoslashPopupObserver.observe(document.body,{childList:!0,subtree:!0}),document.addEventListener("astro:page-load",()=>{initTwoslashPopups(document.body)});'; \ No newline at end of file +export default 'function setupTooltip(e,o){let s=e.querySelector(".twoslash-popup-container"),t=s.closest(".expressive-code"),i="twoslash_popup_"+[Math.random(),Date.now()].map(e=>e.toString(36).substring(2,10)).join("_");s.setAttribute("role","tooltip"),s.setAttribute("tabindex","-1"),s?.parentNode&&s.parentNode.removeChild(s);let a=!1,r;function n(){clearTimeout(r),t.appendChild(s),new Promise(e=>requestAnimationFrame(()=>{requestAnimationFrame(e)})).then(()=>FloatingUIDOM.computePosition(e,s,{placement:o?"bottom":"bottom-start",middleware:[FloatingUIDOM.size({apply({availableWidth:e}){Object.assign(s.style,{maxWidth:Math.max(300,e)+"px",maxHeight:"100%"})}})]})).then(({x:e,y:t})=>{Object.assign(s.style,{display:"block",left:`${o?20:e}px`,top:t+"px"})}),s.setAttribute("aria-hidden","false"),e.querySelector(".twoslash-hover span")?.setAttribute("aria-describedby",i),s.setAttribute("id",i)}function d(){s.setAttribute("aria-hidden","true"),e.querySelector(".twoslash-hover span")?.removeAttribute("aria-describedby"),s.removeAttribute("id"),s.style.display="none"}e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",()=>{r=setTimeout(()=>{a||d()},100)}),s.addEventListener("mouseenter",()=>{clearTimeout(r),a=!0}),s.addEventListener("mouseleave",()=>{a=!1,r=setTimeout(()=>{e.matches(":hover")||d()},100)}),e.addEventListener("focus",n),e.addEventListener("blur",d),d()}let isMobileScreen=window.matchMedia("(max-width: 500px)").matches;function initTwoslashPopups(e){e.querySelectorAll?.(".twoslash-hover").forEach(e=>{setupTooltip(e,isMobileScreen)})}initTwoslashPopups(document);let newTwoslashPopupObserver=new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{initTwoslashPopups(e)})));newTwoslashPopupObserver.observe(document.body,{childList:!0,subtree:!0}),document.addEventListener("astro:page-load",()=>{initTwoslashPopups(document.body)});'; diff --git a/packages/twoslash/src/styles.ts b/packages/twoslash/src/styles.ts index da9c4c3..bc63af4 100644 --- a/packages/twoslash/src/styles.ts +++ b/packages/twoslash/src/styles.ts @@ -1,9 +1,9 @@ import { - lighten, - PluginStyleSettings, - type ResolverContext, - type StyleResolverFn, - toHexColor, + PluginStyleSettings, + type ResolverContext, + type StyleResolverFn, + lighten, + toHexColor, } from "@expressive-code/core"; import type { TwoSlashStyleSettings } from "./types"; @@ -11,91 +11,91 @@ import type { TwoSlashStyleSettings } from "./types"; * Represents the style settings for the TwoSlash plugin. */ export const twoSlashStyleSettings = new PluginStyleSettings({ - defaultValues: { - twoSlash: { - // Main styles - borderColor: ({ theme }) => - theme.colors["titleBar.border"] || - lighten( - theme.colors["editor.background"], - theme.type === "dark" ? 0.5 : -0.15, - ) || - "transparent", - background: ({ theme }) => theme.colors["editor.background"] || theme.bg, - hoverUnderlineColor: ({ theme }) => theme.fg || "#888", - textColor: ({ theme }) => theme.colors["editor.foreground"] || theme.fg, - popupDocsMaxHeight: "200px", - tagColor: ({ theme }) => theme.colors["terminal.ansiBrightBlue"], - - // Link styles - linkColor: ({ theme }) => theme.colors["terminal.ansiBrightBlue"], - linkColorVisited: ({ theme }) => - theme.colors["terminal.ansiBrightMagenta"], - linkColorHover: ({ theme }) => theme.colors["terminal.ansiBrightCyan"], - linkColorActive: ({ theme }) => theme.colors["terminal.ansiBrightGreen"], - - // Highlight settings & styles - highlightHue: "284", - highlightDefaultLuminance: ["32%", "75%"], - highlightDefaultChroma: "40", - highlightBackgroundOpacity: "50%", - highlightBorderLuminance: "48%", - highlightBorderOpacity: "81.6%", - highlightBackground: (context) => resolveHighlight(context).background, - highlightBorderColor: (context) => resolveHighlight(context).border, - - // Error Annotation and Custom Tag styles - errorColor: ({ theme }) => theme.colors["terminal.ansiRed"], - warnColor: ({ theme }) => theme.colors["terminal.ansiYellow"], - suggestionColor: ({ theme }) => theme.colors["terminal.ansiGreen"], - messageColor: ({ theme }) => theme.colors["terminal.ansiBlue"], - - // Completion main styles - cursorColor: ({ theme }) => theme.colors["editorCursor.foreground"], - completionBoxBackground: ({ theme }) => - theme.colors["editorSuggestWidget.background"] || - theme.colors["editor.background"] || - theme.bg, - completionBoxBorder: ({ theme }) => - theme.colors["editorSuggestWidget.border"] || - theme.colors["titleBar.border"] || - lighten( - theme.colors["editor.background"], - theme.type === "dark" ? 0.5 : -0.15, - ) || - "transparent", - completionBoxColor: ({ theme }) => - theme.colors["editorSuggestWidget.foreground"] || - theme.colors["editor.foreground"] || - theme.fg, - completionBoxMatchedColor: ({ theme }) => - theme.colors["editorSuggestWidget.highlightForeground"] || - theme.colors["editor.findMatchBackground"] || - theme.colors["terminal.ansiBrightCyan"], - completionBoxHoverBackground: ({ theme }) => - theme.colors["editorSuggestWidget.selectedBackground"] || - theme.colors["editor.findMatchHighlightBackground"] || - "#888", - - // Completion icon colors - completionIconClass: "#EE9D28", - completionIconConstructor: "#b180d7", - completionIconFunction: "#b180d7", - completionIconInterface: "#75beff", - completionIconModule: "#cccccc", - completionIconMethod: "#b180d7", - completionIconProperty: "#cccccc", - completionIconString: "#cccccc", - }, - }, - cssVarExclusions: [ - "twoSlash.highlightHue", - "twoSlash.highlightDefaultLuminance", - "twoSlash.highlightDefaultChroma", - "twoSlash.highlightBackgroundOpacity", - "twoSlash.highlightBorderLuminance", - "twoSlash.highlightBorderOpacity", - ], + defaultValues: { + twoSlash: { + // Main styles + borderColor: ({ theme }) => + theme.colors["titleBar.border"] || + lighten( + theme.colors["editor.background"], + theme.type === "dark" ? 0.5 : -0.15, + ) || + "transparent", + background: ({ theme }) => theme.colors["editor.background"] || theme.bg, + hoverUnderlineColor: ({ theme }) => theme.fg || "#888", + textColor: ({ theme }) => theme.colors["editor.foreground"] || theme.fg, + popupDocsMaxHeight: "200px", + tagColor: ({ theme }) => theme.colors["terminal.ansiBrightBlue"], + + // Link styles + linkColor: ({ theme }) => theme.colors["terminal.ansiBrightBlue"], + linkColorVisited: ({ theme }) => + theme.colors["terminal.ansiBrightMagenta"], + linkColorHover: ({ theme }) => theme.colors["terminal.ansiBrightCyan"], + linkColorActive: ({ theme }) => theme.colors["terminal.ansiBrightGreen"], + + // Highlight settings & styles + highlightHue: "284", + highlightDefaultLuminance: ["32%", "75%"], + highlightDefaultChroma: "40", + highlightBackgroundOpacity: "50%", + highlightBorderLuminance: "48%", + highlightBorderOpacity: "81.6%", + highlightBackground: (context) => resolveHighlight(context).background, + highlightBorderColor: (context) => resolveHighlight(context).border, + + // Error Annotation and Custom Tag styles + errorColor: ({ theme }) => theme.colors["terminal.ansiRed"], + warnColor: ({ theme }) => theme.colors["terminal.ansiYellow"], + suggestionColor: ({ theme }) => theme.colors["terminal.ansiGreen"], + messageColor: ({ theme }) => theme.colors["terminal.ansiBlue"], + + // Completion main styles + cursorColor: ({ theme }) => theme.colors["editorCursor.foreground"], + completionBoxBackground: ({ theme }) => + theme.colors["editorSuggestWidget.background"] || + theme.colors["editor.background"] || + theme.bg, + completionBoxBorder: ({ theme }) => + theme.colors["editorSuggestWidget.border"] || + theme.colors["titleBar.border"] || + lighten( + theme.colors["editor.background"], + theme.type === "dark" ? 0.5 : -0.15, + ) || + "transparent", + completionBoxColor: ({ theme }) => + theme.colors["editorSuggestWidget.foreground"] || + theme.colors["editor.foreground"] || + theme.fg, + completionBoxMatchedColor: ({ theme }) => + theme.colors["editorSuggestWidget.highlightForeground"] || + theme.colors["editor.findMatchBackground"] || + theme.colors["terminal.ansiBrightCyan"], + completionBoxHoverBackground: ({ theme }) => + theme.colors["editorSuggestWidget.selectedBackground"] || + theme.colors["editor.findMatchHighlightBackground"] || + "#888", + + // Completion icon colors + completionIconClass: "#EE9D28", + completionIconConstructor: "#b180d7", + completionIconFunction: "#b180d7", + completionIconInterface: "#75beff", + completionIconModule: "#cccccc", + completionIconMethod: "#b180d7", + completionIconProperty: "#cccccc", + completionIconString: "#cccccc", + }, + }, + cssVarExclusions: [ + "twoSlash.highlightHue", + "twoSlash.highlightDefaultLuminance", + "twoSlash.highlightDefaultChroma", + "twoSlash.highlightBackgroundOpacity", + "twoSlash.highlightBorderLuminance", + "twoSlash.highlightBorderOpacity", + ], }); /** @@ -111,7 +111,7 @@ export const twoSlashStyleSettings = new PluginStyleSettings({ * @returns {string} The generated CSS styles as a string. */ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { - const baseCSS = ` + const baseCSS = ` :root { .main-pane { z-index: 1; @@ -123,7 +123,7 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const popupDocsCSS = ` + const popupDocsCSS = ` @media (min-width: 500px) { .twoslash-popup-container:before { @@ -174,7 +174,7 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const staticDocsCSS = ` + const staticDocsCSS = ` .twoslash-static-container { display: block; z-index: 10; @@ -226,7 +226,7 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const sharedDocsCSS = ` + const sharedDocsCSS = ` .twoslash, .twoslash-noline { position: relative; @@ -422,7 +422,7 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const completionCSS = ` + const completionCSS = ` .twoslash .twoslash-completion { position: relative; margin-top: 0.1rem; @@ -542,7 +542,7 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const errorCSS = ` + const errorCSS = ` .twoslash-noline .twoslash-static { position: relative; } @@ -603,7 +603,7 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const customTagCSS = ` + const customTagCSS = ` .twoslash-custom-box { margin-left: 0rem; margin-right: 0rem; @@ -660,7 +660,7 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const highlightCSS = ` + const highlightCSS = ` .twoslash-highlighted { background-color: ${cssVar("twoSlash.highlightBackground")}; border: 1px solid ${cssVar("twoSlash.highlightBorderColor")}; @@ -670,26 +670,26 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { } `; - const styles = [ - // Base styles - baseCSS, - // Popup docs styles - popupDocsCSS, - // Static docs styles - staticDocsCSS, - // Shared docs styles - sharedDocsCSS, - // Completion styles - completionCSS, - // Error styles - errorCSS, - // Highlight styles - highlightCSS, - // Custom tag styles - customTagCSS, - ]; - - return styles.join("\n"); + const styles = [ + // Base styles + baseCSS, + // Popup docs styles + popupDocsCSS, + // Static docs styles + staticDocsCSS, + // Shared docs styles + sharedDocsCSS, + // Completion styles + completionCSS, + // Error styles + errorCSS, + // Highlight styles + highlightCSS, + // Custom tag styles + customTagCSS, + ]; + + return styles.join("\n"); } /** @@ -700,14 +700,14 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { * @returns {Object} An object containing the resolved background and border styles. */ function resolveHighlight({ - resolveSetting: r, + resolveSetting: r, }: Parameters[0]): { background: string; border: string } { - return { - background: toHexColor( - `lch(${r("twoSlash.highlightDefaultLuminance")} ${r("twoSlash.highlightDefaultChroma")} ${r("twoSlash.highlightHue")} / ${r("twoSlash.highlightBackgroundOpacity")})`, - ), - border: toHexColor( - `lch(${r("twoSlash.highlightBorderLuminance")} ${r("twoSlash.highlightDefaultChroma")} ${r("twoSlash.highlightHue")} / ${r("twoSlash.highlightBorderOpacity")})`, - ), - }; + return { + background: toHexColor( + `lch(${r("twoSlash.highlightDefaultLuminance")} ${r("twoSlash.highlightDefaultChroma")} ${r("twoSlash.highlightHue")} / ${r("twoSlash.highlightBackgroundOpacity")})`, + ), + border: toHexColor( + `lch(${r("twoSlash.highlightBorderLuminance")} ${r("twoSlash.highlightDefaultChroma")} ${r("twoSlash.highlightHue")} / ${r("twoSlash.highlightBorderOpacity")})`, + ), + }; }