Support rehype plugins that inject namespaced attributes (#6243)

* Support rehype plugins that inject namespaced attributes

* Fix rehype property casing

1 files changed, 35 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/mdx-plugins.test.js b/packages/integrations/mdx/test/mdx-plugins.test.js
index 828bcb3d5..7d4e4fe9a 100644
--- a/packages/integrations/mdx/test/mdx-plugins.test.js
+++ b/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]');
 }