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]');
 }

pnpm-lock.yaml

@@ -2888,8 +2888,8 @@ importers:
     specifiers:
       '@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
       '@types/chai': ^4.3.1
       '@types/estree': ^1.0.0
       '@types/github-slugger': ^1.3.0
@@ -2926,8 +2926,8 @@ importers:
     dependencies:
       '@astrojs/markdown-remark': link:../../markdown/remark
       '@astrojs/prism': link:../../astro-prism
-      '@mdx-js/mdx': 2.2.1
-      '@mdx-js/rollup': 2.2.1
+      '@mdx-js/mdx': 2.3.0
+      '@mdx-js/rollup': 2.3.0
       acorn: 8.8.2
       es-module-lexer: 0.10.5
       estree-util-visit: 1.2.1
@@ -6412,8 +6412,8 @@ packages:
       - supports-color
     dev: false
 
-  /@mdx-js/mdx/2.2.1:
-    resolution: {integrity: sha512-hZ3ex7exYLJn6FfReq8yTvA6TE53uW9UHJQM9IlSauOuS55J9y8RtA7W+dzp6Yrzr00/U1sd7q+Wf61q6SfiTQ==}
+  /@mdx-js/mdx/2.3.0:
+    resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
     dependencies:
       '@types/estree-jsx': 1.0.0
       '@types/mdx': 2.0.3
@@ -6436,15 +6436,15 @@ packages:
       - supports-color
     dev: false
 
-  /@mdx-js/rollup/2.2.1:
-    resolution: {integrity: sha512-wpGeK9iO7gPEIyC/ZTiggLY/MkEWDj5IWSsjlpkefgjb5RbmUukXU6/D2rHA+VAopxigS3NlaIL2ctpYBi4fmg==}
+  /@mdx-js/rollup/2.3.0:
+    resolution: {integrity: sha512-wLvRfJS/M4UmdqTd+WoaySEE7q4BIejYf1xAHXYvtT1du/1Tl/z2450Gg2+Hu7fh05KwRRiehiTP9Yc/Dtn0fA==}
     peerDependencies:
       rollup: '>=2'
     peerDependenciesMeta:
       rollup:
         optional: true
     dependencies:
-      '@mdx-js/mdx': 2.2.1
+      '@mdx-js/mdx': 2.3.0
       '@rollup/pluginutils': 5.0.2
       source-map: 0.7.4
       vfile: 5.3.7