normalize class property (#9723)

* normalize class property * Add changeset * properly type return value * normalize styles, rename function * properly describe change Co-authored-by: Florian Lefebvre <[email protected]> --------- Co-authored-by: Florian Lefebvre <[email protected]>
withastro · Jan 22, 2024 · 2f81cff · 2f81cff
1 parent ad01642
commit 2f81cff
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/nervous-dodos-compete.md b/.changeset/nervous-dodos-compete.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/markdown-remark": patch
+---
+
+Fixes a case where transformers wouldn't work on the `class` property
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
@@ -1,5 +1,6 @@
 import { bundledLanguages, createCssVariablesTheme, getHighlighter } from 'shikiji';
 import { visit } from 'unist-util-visit';
+import type { Properties } from 'hast';
 import type { ShikiConfig } from './types.js';
 
 export interface ShikiHighlighter {
@@ -61,9 +62,8 @@ export async function createShikiHighlighter({
 								node.tagName = 'code';
 							}
 
-							// Cast to string as shikiji will always pass them as strings instead of any other types
-							const classValue = (node.properties.class as string) ?? '';
-							const styleValue = (node.properties.style as string) ?? '';
+							const classValue = normalizePropAsString(node.properties.class) ?? '';
+							const styleValue = normalizePropAsString(node.properties.style) ?? '';
 
 							// Replace "shiki" class naming with "astro-code"
 							node.properties.class = classValue.replace(/shiki/g, 'astro-code');
@@ -129,6 +129,10 @@ export async function createShikiHighlighter({
 	};
 }
 
+function normalizePropAsString(value: Properties[string]): string | null {
+	return Array.isArray(value) ? value.join(' ') : (value as string | null);
+}
+
 /**
  * shiki -> shikiji compat as we need to manually replace it
  * @internal Exported for error overlay use only