diff options
| -rw-r--r-- | .changeset/moody-cats-train.md | 5 | ||||
| -rw-r--r-- | packages/integrations/mdx/package.json | 4 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/index.ts | 1 | ||||
| -rw-r--r-- | packages/integrations/mdx/test/mdx-plugins.test.js | 35 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 18 |
5 files changed, 52 insertions, 11 deletions
diff --git a/.changeset/moody-cats-train.md b/.changeset/moody-cats-train.md new file mode 100644 index 000000000..bb52f73a1 --- /dev/null +++ b/.changeset/moody-cats-train.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': patch +--- + +Support rehype plugins that inject namespaced attributes diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json index 70421c806..4bf3b4d4a 100644 --- a/packages/integrations/mdx/package.json +++ b/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", diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 577d073ee..7012849a4 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/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 }), 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]'); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 95cac6a47..d7f11f56f 100644 --- a/pnpm-lock.yaml +++ b/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 |