Fix error overlay syntax highlighting

withastro · Oct 12, 2023 · 653080d · 653080d
1 parent 6bb6930
commit 653080d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/.changeset/lemon-boats-bake.md b/.changeset/lemon-boats-bake.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix error overlay syntax highlighting
diff --git a/packages/astro/components/shiki.ts → packages/astro/components/shiki.js b/packages/astro/components/shiki.ts → packages/astro/components/shiki.js
@@ -1,8 +1,7 @@
-import { type Highlighter, getHighlighter } from 'shikiji';
+import { getHighlighter } from 'shikiji';
 
-type HighlighterOptions = NonNullable<Parameters<typeof getHighlighter>[0]>;
-
-const ASTRO_COLOR_REPLACEMENTS: Record<string, string> = {
+/** @type {Record<string, string>} */
+const ASTRO_COLOR_REPLACEMENTS = {
 	'#000001': 'var(--astro-code-color-text)',
 	'#000002': 'var(--astro-code-color-background)',
 	'#000004': 'var(--astro-code-token-constant)',
@@ -25,12 +24,18 @@ const cachedHighlighters = new Map();
 
 /**
  * shiki -> shikiji compat as we need to manually replace it
+ * @param {string} str
  */
-export function replaceCssVariables(str: string) {
+export function replaceCssVariables(str) {
 	return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
 }
 
-export function getCachedHighlighter(opts: HighlighterOptions): Promise<Highlighter> {
+/**
+ *
+ * @param {NonNullable<Parameters<typeof getHighlighter>[0]>} opts
+ * @returns {Promise<import('shikiji').Highlighter>}
+ */
+export function getCachedHighlighter(opts) {
 	// Always sort keys before stringifying to make sure objects match regardless of parameter ordering
 	const key = JSON.stringify(opts, Object.keys(opts).sort());
 

diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts
@@ -8,6 +8,7 @@ import { AstroError, type ErrorWithMetadata } from '../errors.js';
 import { createSafeError } from '../utils.js';
 import type { SSRLoadedRenderer } from './../../../@types/astro.js';
 import { getDocsForError, renderErrorMarkdown } from './utils.js';
+import { replaceCssVariables } from '../../../../components/shiki.js';
 
 export function enhanceViteSSRError({
 	error,
@@ -124,6 +125,7 @@ export interface AstroErrorPayload {
 // Map these to `.js` during error highlighting.
 const ALTERNATIVE_JS_EXTS = ['cjs', 'mjs'];
 const ALTERNATIVE_MD_EXTS = ['mdoc'];
+const INLINE_STYLE_SELECTOR_GLOBAL = /style="(.*?)"/g;
 
 /**
  * Generate a payload for Vite's error overlay
@@ -146,7 +148,7 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro
 	if (ALTERNATIVE_MD_EXTS.includes(highlighterLang ?? '')) {
 		highlighterLang = 'md';
 	}
-	const highlightedCode = err.fullCode
+	let highlightedCode = err.fullCode
 		? await codeToHtml(err.fullCode, {
 				// @ts-expect-error always assume that shiki can accept the lang string
 				lang: highlighterLang,
@@ -155,6 +157,12 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro
 		  })
 		: undefined;
 
+	if (highlightedCode) {
+		highlightedCode = highlightedCode.replace(INLINE_STYLE_SELECTOR_GLOBAL, (m) =>
+			replaceCssVariables(m)
+		);
+	}
+
 	return {
 		type: 'error',
 		err: {

diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts
@@ -68,16 +68,16 @@ const style = /* css */ `
     --toggle-border-color: #C3CADB;
 
   /* Syntax Highlighting */
-  --shiki-color-text: #000000;
-  --shiki-token-constant: #4ca48f;
-  --shiki-token-string: #9f722a;
-  --shiki-token-comment: #8490b5;
-  --shiki-token-keyword: var(--accent);
-  --shiki-token-parameter: #aa0000;
-  --shiki-token-function: #4ca48f;
-  --shiki-token-string-expression: #9f722a;
-  --shiki-token-punctuation: #ffffff;
-  --shiki-token-link: #9f722a;
+  --astro-code-color-text: #000000;
+  --astro-code-token-constant: #4ca48f;
+  --astro-code-token-string: #9f722a;
+  --astro-code-token-comment: #8490b5;
+  --astro-code-token-keyword: var(--accent);
+  --astro-code-token-parameter: #aa0000;
+  --astro-code-token-function: #4ca48f;
+  --astro-code-token-string-expression: #9f722a;
+  --astro-code-token-punctuation: #ffffff;
+  --astro-code-token-link: #9f722a;
 }
 
 :host(.astro-dark) {
@@ -121,16 +121,16 @@ const style = /* css */ `
   --toggle-border-color: #3D4663;
 
   /* Syntax Highlighting */
-  --shiki-color-text: #ffffff;
-  --shiki-token-constant: #90f4e3;
-  --shiki-token-string: #f4cf90;
-  --shiki-token-comment: #8490b5;
-  --shiki-token-keyword: var(--accent);
-  --shiki-token-parameter: #aa0000;
-  --shiki-token-function: #90f4e3;
-  --shiki-token-string-expression: #f4cf90;
-  --shiki-token-punctuation: #ffffff;
-  --shiki-token-link: #f4cf90;
+  --astro-code-color-text: #ffffff;
+  --astro-code-token-constant: #90f4e3;
+  --astro-code-token-string: #f4cf90;
+  --astro-code-token-comment: #8490b5;
+  --astro-code-token-keyword: var(--accent);
+  --astro-code-token-parameter: #aa0000;
+  --astro-code-token-function: #90f4e3;
+  --astro-code-token-string-expression: #f4cf90;
+  --astro-code-token-punctuation: #ffffff;
+  --astro-code-token-link: #f4cf90;
 }
 
 #theme-toggle-wrapper{