From a78b74a16fa3ec4a673be2a7ee86c9e75c7af8e7 Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 15 Feb 2023 22:58:11 +0800 Subject: [PATCH] Support rehype plugins that inject namespaced attributes 2 --- .changeset/gentle-parrots-cheer.md | 5 +++++ packages/integrations/mdx/src/index.ts | 1 + packages/integrations/mdx/test/mdx-plugins.test.js | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/gentle-parrots-cheer.md diff --git a/.changeset/gentle-parrots-cheer.md b/.changeset/gentle-parrots-cheer.md new file mode 100644 index 000000000000..749dc8fb1518 --- /dev/null +++ b/.changeset/gentle-parrots-cheer.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': minor +--- + +Support rehype plugins that inject namespaced attributes. This introduces a breaking change if you use [custom components for HTML elements](https://docs.astro.build/en/guides/markdown-content/#assigning-custom-components-to-html-elements), where the prop passed to the component will be normal HTML casing, e.g. `class` instead of `className`, and `xlink:href` instead of `xlinkHref`. diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 577d073ee19b..7012849a4921 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 = {}): 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 a3a871762b37..139d2042f323 100644 --- a/packages/integrations/mdx/test/mdx-plugins.test.js +++ b/packages/integrations/mdx/test/mdx-plugins.test.js @@ -63,7 +63,7 @@ describe('MDX plugins', () => { expect(selectRehypeExample(document)).to.not.be.null; }); - it.skip('supports custom rehype plugins with namespaced attributes', async () => { + it('supports custom rehype plugins with namespaced attributes', async () => { const fixture = await buildFixture({ integrations: [ mdx({