Support rehype plugins that inject namespaced attributes (#6243)

* Support rehype plugins that inject namespaced attributes

* Fix rehype property casing

.changeset/moody-cats-train.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Support rehype plugins that inject namespaced attributes

packages/integrations/mdx/package.json

@@ -32,8 +32,8 @@
   "dependencies": {
     "@astrojs/markdown-remark": "^2.0.1",
     "@astrojs/prism": "^2.0.0",
-    "@mdx-js/mdx": "^2.1.2",
-    "@mdx-js/rollup": "^2.1.1",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/rollup": "^2.3.0",
     "acorn": "^8.8.0",
     "es-module-lexer": "^0.10.5",
     "estree-util-visit": "^1.2.0",

packages/integrations/mdx/src/index.ts

@@ -74,6 +74,7 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 									const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
 									const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
 										...mdxPluginOpts,
+										elementAttributeNameCase: 'html',
 										remarkPlugins: [
 											// Ensure `data.astro` is available to all remark plugins
 											toRemarkInitializeAstroData({ userFrontmatter: frontmatter }),

packages/integrations/mdx/test/mdx-plugins.test.js

@@ -63,6 +63,20 @@ describe('MDX plugins', () => {
 		expect(selectRehypeExample(document)).to.not.be.null;
 	});
 
+	it('supports custom rehype plugins with namespaced attributes', async () => {
+		const fixture = await buildFixture({
+			integrations: [
+				mdx({
+					rehypePlugins: [rehypeSvgPlugin],
+				}),
+			],
+		});
+		const html = await fixture.readFile(FILE);
+		const { document } = parseHTML(html);
+
+		expect(selectRehypeSvg(document)).to.not.be.null;
+	});
+
 	it('extends markdown config by default', async () => {
 		const fixture = await buildFixture({
 			markdown: {
@@ -207,6 +221,23 @@ function rehypeExamplePlugin() {
 	};
 }
 
+function rehypeSvgPlugin() {
+	return (tree) => {
+		tree.children.push({
+			type: 'element',
+			tagName: 'svg',
+			properties: { xmlns:"http://www.w3.org/2000/svg" },
+			children: [
+				{
+					type: 'element',
+					tagName: 'use',
+					properties: { 'xLinkHref': '#icon' }
+				}
+			]
+		});
+	};
+}
+
 function recmaExamplePlugin() {
 	return (tree) => {
 		estreeVisit(tree, (node) => {
@@ -245,6 +276,10 @@ function selectRehypeExample(document) {
 	return document.querySelector('div[data-rehype-plugin-works]');
 }
 
+function selectRehypeSvg(document) {
+	return document.querySelector('svg > use[xlink\\:href]');
+}
+
 function selectRecmaExample(document) {
 	return document.querySelector('div[data-recma-plugin-works]');
 }