From 9b7e2ab2516cd36520364490df8e3482008292e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Mart=C3=ADn=20Seery?= <me@juanm04.com>
Date: Tue, 22 Feb 2022 13:46:04 -0300
Subject: [PATCH] Fixed shiki import to work with "type": "module" (#2628)

* Fixed shiki import to work with "type": "module"

* Changeset

* Separated types import

* Add "* as" to type import
---
 .changeset/great-hotels-breathe.md           | 6 ++++++
 packages/astro/components/Code.astro         | 7 ++++---
 packages/markdown/remark/src/remark-shiki.ts | 5 +++--
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/great-hotels-breathe.md

diff --git a/.changeset/great-hotels-breathe.md b/.changeset/great-hotels-breathe.md
new file mode 100644
index 0000000000..19b6ae6859
--- /dev/null
+++ b/.changeset/great-hotels-breathe.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Fixed shiki to work with `{ "type": "module" }`
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index e64c55fb0d..6255117749 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -1,5 +1,6 @@
 ---
-import shiki from 'shiki';
+import type * as shiki from 'shiki';
+import { getHighlighter } from 'shiki';
 
 export interface Props {
 	/** The code to highlight. Required. */
@@ -49,10 +50,10 @@ function repairShikiTheme(html: string): string {
 	return html;
 }
 
-const highlighter = await shiki.getHighlighter({ 
+const highlighter = await getHighlighter({
 	theme,
 	// Load custom lang if passed an object, otherwise load the default
-	langs: typeof lang !== 'string' ? [lang] : undefined
+	langs: typeof lang !== 'string' ? [lang] : undefined,
 });
 const _html = highlighter.codeToHtml(code, { lang: typeof lang === 'string' ? lang : lang.id });
 const html = repairShikiTheme(_html);
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index 4226c6db6c..e759a0cad7 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -1,4 +1,5 @@
-import shiki from 'shiki';
+import type * as shiki from 'shiki';
+import { getHighlighter } from 'shiki';
 import { visit } from 'unist-util-visit';
 
 export interface ShikiConfig {
@@ -30,7 +31,7 @@ export interface ShikiConfig {
 }
 
 const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
-	const highlighter = await shiki.getHighlighter({ theme });
+	const highlighter = await getHighlighter({ theme });
 
 	for (const lang of langs) {
 		await highlighter.loadLanguage(lang);