Fix error overlay syntax highlighting (#8817)

.changeset/lemon-boats-bake.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix error overlay syntax highlighting

packages/astro/components/Code.astro

@@ -8,7 +8,7 @@ import type {
 	ThemeRegistrationRaw,
 } from 'shikiji';
 import { visit } from 'unist-util-visit';
-import { getCachedHighlighter, replaceCssVariables } from './shiki.js';
+import { getCachedHighlighter, replaceCssVariables } from '../dist/core/shiki.js';
 
 interface Props {
 	/** The code to highlight. Required. */

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 '../../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: {

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{