From a2e8e76c303e8d6f39c24c122905a10f06907997 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Mart=C3=ADn=20Seery?= <me@juanm04.com>
Date: Sun, 28 Aug 2022 08:23:37 -0300
Subject: [PATCH] chore: updated shiki (#4519)

* Upgraded shiki

* Use setColorReplacements

* no-shadow

* Changeset
---
 .changeset/big-guests-cry.md                  |  7 +++++
 packages/astro/components/Code.astro          |  5 ----
 packages/astro/components/Shiki.js            | 21 ++++++++++++++-
 packages/astro/package.json                   |  2 +-
 packages/integrations/mdx/package.json        |  2 +-
 packages/integrations/mdx/src/remark-shiki.ts | 22 +++++++++++-----
 packages/markdown/remark/package.json         |  2 +-
 packages/markdown/remark/src/remark-shiki.ts  | 22 +++++++++++-----
 pnpm-lock.yaml                                | 26 ++++++++++++++-----
 9 files changed, 82 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/big-guests-cry.md

diff --git a/.changeset/big-guests-cry.md b/.changeset/big-guests-cry.md
new file mode 100644
index 000000000..4860fd51c
--- /dev/null
+++ b/.changeset/big-guests-cry.md
@@ -0,0 +1,7 @@
+---
+'astro': patch
+'@astrojs/mdx': patch
+'@astrojs/markdown-remark': patch
+---
+
+Upgraded Shiki to v0.11.1
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index ddeaac829..8a4d50c7f 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -38,11 +38,6 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
 function repairShikiTheme(html: string): string {
 	// Replace "shiki" class naming with "astro"
 	html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
-	// Replace "shiki" css variable naming with "astro".
-	html = html.replace(
-		/style="(background-)?color: var\(--shiki-/g,
-		'style="$1color: var(--astro-code-'
-	);
 	// Handle code wrapping
 	// if wrap=null, do nothing.
 	if (wrap === false) {
diff --git a/packages/astro/components/Shiki.js b/packages/astro/components/Shiki.js
index 2d0644653..2adc71a0e 100644
--- a/packages/astro/components/Shiki.js
+++ b/packages/astro/components/Shiki.js
@@ -8,6 +8,10 @@ function stringify(opts) {
 	return JSON.stringify(opts, Object.keys(opts).sort());
 }
 
+/**
+ * @param {import('shiki').HighlighterOptions} opts
+ * @returns {Promise<import('shiki').Highlighter>}
+ */
 export function getHighlighter(opts) {
 	const key = stringify(opts);
 
@@ -17,7 +21,22 @@ export function getHighlighter(opts) {
 	}
 
 	// Start the async getHighlighter call and cache the Promise
-	const highlighter = getShikiHighlighter(opts);
+	const highlighter = getShikiHighlighter(opts).then((hl) => {
+		hl.setColorReplacements({
+			'#000001': 'var(--astro-code-color-text)',
+			'#000002': 'var(--astro-code-color-background)',
+			'#000004': 'var(--astro-code-token-constant)',
+			'#000005': 'var(--astro-code-token-string)',
+			'#000006': 'var(--astro-code-token-comment)',
+			'#000007': 'var(--astro-code-token-keyword)',
+			'#000008': 'var(--astro-code-token-parameter)',
+			'#000009': 'var(--astro-code-token-function)',
+			'#000010': 'var(--astro-code-token-string-expression)',
+			'#000011': 'var(--astro-code-token-punctuation)',
+			'#000012': 'var(--astro-code-token-link)',
+		});
+		return hl;
+	});
 	_resolvedHighlighters.set(key, highlighter);
 
 	return highlighter;
diff --git a/packages/astro/package.json b/packages/astro/package.json
index bdfb455a7..91b76ffc4 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -137,7 +137,7 @@
     "resolve": "^1.22.0",
     "rollup": "~2.77.0",
     "semver": "^7.3.7",
-    "shiki": "^0.10.1",
+    "shiki": "^0.11.1",
     "sirv": "^2.0.2",
     "slash": "^4.0.0",
     "string-width": "^5.1.2",
diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json
index e3a5f12a9..0df60afda 100644
--- a/packages/integrations/mdx/package.json
+++ b/packages/integrations/mdx/package.json
@@ -40,7 +40,7 @@
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.10.1",
+    "shiki": "^0.11.1",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2"
   },
diff --git a/packages/integrations/mdx/src/remark-shiki.ts b/packages/integrations/mdx/src/remark-shiki.ts
index 76a1d275f..7bb944ce6 100644
--- a/packages/integrations/mdx/src/remark-shiki.ts
+++ b/packages/integrations/mdx/src/remark-shiki.ts
@@ -14,7 +14,22 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
 	let highlighterAsync = highlighterCacheAsync.get(cacheID);
 	if (!highlighterAsync) {
-		highlighterAsync = getHighlighter({ theme });
+		highlighterAsync = getHighlighter({ theme }).then((hl) => {
+			hl.setColorReplacements({
+				'#000001': 'var(--astro-code-color-text)',
+				'#000002': 'var(--astro-code-color-background)',
+				'#000004': 'var(--astro-code-token-constant)',
+				'#000005': 'var(--astro-code-token-string)',
+				'#000006': 'var(--astro-code-token-comment)',
+				'#000007': 'var(--astro-code-token-keyword)',
+				'#000008': 'var(--astro-code-token-parameter)',
+				'#000009': 'var(--astro-code-token-function)',
+				'#000010': 'var(--astro-code-token-string-expression)',
+				'#000011': 'var(--astro-code-token-punctuation)',
+				'#000012': 'var(--astro-code-token-link)',
+			});
+			return hl;
+		});
 		highlighterCacheAsync.set(cacheID, highlighterAsync);
 	}
 	const highlighter = await highlighterAsync;
@@ -52,11 +67,6 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 
 			// Replace "shiki" class naming with "astro".
 			html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
-			// Replace "shiki" css variable naming with "astro".
-			html = html.replace(
-				/style="(background-)?color: var\(--shiki-/g,
-				'style="$1color: var(--astro-code-'
-			);
 			// Add "user-select: none;" for "+"/"-" diff symbols
 			if (node.lang === 'diff') {
 				html = html.replace(
diff --git a/packages/markdown/remark/package.json b/packages/markdown/remark/package.json
index c2d24748b..952c03252 100644
--- a/packages/markdown/remark/package.json
+++ b/packages/markdown/remark/package.json
@@ -40,7 +40,7 @@
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.10.1",
+    "shiki": "^0.11.1",
     "unified": "^10.1.2",
     "unist-util-map": "^3.1.1",
     "unist-util-visit": "^4.1.0",
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index eea0fd006..85463bd65 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -17,7 +17,22 @@ const remarkShiki = async (
 	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
 	let highlighterAsync = highlighterCacheAsync.get(cacheID);
 	if (!highlighterAsync) {
-		highlighterAsync = getHighlighter({ theme });
+		highlighterAsync = getHighlighter({ theme }).then((hl) => {
+			hl.setColorReplacements({
+				'#000001': 'var(--astro-code-color-text)',
+				'#000002': 'var(--astro-code-color-background)',
+				'#000004': 'var(--astro-code-token-constant)',
+				'#000005': 'var(--astro-code-token-string)',
+				'#000006': 'var(--astro-code-token-comment)',
+				'#000007': 'var(--astro-code-token-keyword)',
+				'#000008': 'var(--astro-code-token-parameter)',
+				'#000009': 'var(--astro-code-token-function)',
+				'#000010': 'var(--astro-code-token-string-expression)',
+				'#000011': 'var(--astro-code-token-punctuation)',
+				'#000012': 'var(--astro-code-token-link)',
+			});
+			return hl;
+		});
 		highlighterCacheAsync.set(cacheID, highlighterAsync);
 	}
 	const highlighter = await highlighterAsync;
@@ -58,11 +73,6 @@ const remarkShiki = async (
 				'<pre class="shiki"',
 				`<pre is:raw class="astro-code${scopedClassName ? ' ' + scopedClassName : ''}"`
 			);
-			// Replace "shiki" css variable naming with "astro".
-			html = html.replace(
-				/style="(background-)?color: var\(--shiki-/g,
-				'style="$1color: var(--astro-code-'
-			);
 			// Add "user-select: none;" for "+"/"-" diff symbols
 			if (node.lang === 'diff') {
 				html = html.replace(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4abf91215..b900a6612 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -452,7 +452,7 @@ importers:
       rollup: ~2.77.0
       sass: ^1.52.2
       semver: ^7.3.7
-      shiki: ^0.10.1
+      shiki: ^0.11.1
       sirv: ^2.0.2
       slash: ^4.0.0
       srcset-parse: ^1.1.0
@@ -509,7 +509,7 @@ importers:
       resolve: 1.22.1
       rollup: 2.77.3
       semver: 7.3.7
-      shiki: 0.10.1
+      shiki: 0.11.1
       sirv: 2.0.2
       slash: 4.0.0
       string-width: 5.1.2
@@ -2319,7 +2319,7 @@ importers:
       remark-shiki-twoslash: ^3.1.0
       remark-smartypants: ^2.0.0
       remark-toc: ^8.0.1
-      shiki: ^0.10.1
+      shiki: ^0.11.1
       unist-util-visit: ^4.1.0
       vfile: ^5.3.2
     dependencies:
@@ -2334,7 +2334,7 @@ importers:
       remark-frontmatter: 4.0.1
       remark-gfm: 3.0.1
       remark-smartypants: 2.0.0
-      shiki: 0.10.1
+      shiki: 0.11.1
       unist-util-visit: 4.1.1
       vfile: 5.3.4
     devDependencies:
@@ -2786,7 +2786,7 @@ importers:
       remark-parse: ^10.0.1
       remark-rehype: ^10.1.0
       remark-smartypants: ^2.0.0
-      shiki: ^0.10.1
+      shiki: ^0.11.1
       unified: ^10.1.2
       unist-util-map: ^3.1.1
       unist-util-visit: ^4.1.0
@@ -2808,7 +2808,7 @@ importers:
       remark-parse: 10.0.1
       remark-rehype: 10.1.0
       remark-smartypants: 2.0.0
-      shiki: 0.10.1
+      shiki: 0.11.1
       unified: 10.1.2
       unist-util-map: 3.1.1
       unist-util-visit: 4.1.1
@@ -15512,6 +15512,15 @@ packages:
       jsonc-parser: 3.1.0
       vscode-oniguruma: 1.6.2
       vscode-textmate: 5.2.0
+    dev: true
+
+  /shiki/0.11.1:
+    resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==}
+    dependencies:
+      jsonc-parser: 3.1.0
+      vscode-oniguruma: 1.6.2
+      vscode-textmate: 6.0.0
+    dev: false
 
   /side-channel/1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
@@ -16946,6 +16955,11 @@ packages:
 
   /vscode-textmate/5.2.0:
     resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==}
+    dev: true
+
+  /vscode-textmate/6.0.0:
+    resolution: {integrity: sha512-gu73tuZfJgu+mvCSy4UZwd2JXykjK9zAZsfmDeut5dx/1a7FeTk0XwJsSuqQn+cuMCGVbIBfl+s53X4T19DnzQ==}
+    dev: false
 
   /vscode-uri/2.1.2:
     resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}