Some diagrams doesn't work with rehype-raw plugin

[stereobooster]

About issue

This is not a bug in your code. Just want to let you know about it:

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeMermaid from "rehype-mermaid";
import rehypeRaw from "rehype-raw";
import rehypeStringify from "rehype-stringify";

const markdown = `
\`\`\`mermaid
---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,10
Bio-conversion,Liquid,5
\`\`\`
`;

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeMermaid)
  .use(rehypeRaw)
  .use(rehypeStringify)
  .process(markdown);

console.log(file.value.match(
  /<g style="mix-blend-mode: multiply;" class="link">(.*?)<\/g>/
));

Without rehype-raw it would generate:

<g style="mix-blend-mode: multiply;" class="link"><linearGradient x2="295" x1="10" gradientUnits="userSpaceOnUse" id="linearGradient-4"><stop stop-color="#4e79a7" offset="0%"></stop><stop stop-color="#f28e2c" offset="100%"></stop></linearGradient><path stroke-width="400" stroke="url(#linearGradient-4)" d="M10,200C152.5,200,152.5,200,295,200"></path></g>

With rehype-raw it would generate:

<g style="mix-blend-mode: multiply;" class="link"><linearGradient x2="295" x1="10" gradientUnits="userSpaceOnUse" id="linearGradient-4"><stop stop-color="#4e79a7" offset="0%"></stop><stop stop-color="#f28e2c" offset="100%"></stop><path stroke-width="400" stroke="url(#linearGradient-4)" d="M10,200C152.5,200,152.5,200,295,200"></path></linearGradient></g>

It changes position of closing tag </linearGradient>. And the second option is wrong.

About strategies

Which makes rehypePlugins: [[rehypeMermaid, { strategy: "img-svg" }]], a bit more reliable choice. But on the other hand it doesn't support css (correct?).

• inline-svg
  • cons: other CSS from HTML page may conflict (like globally set line-height)
  • cons: may not work with rehype-raw
  • pros : supports css option
  • pros : text is searchable
• img-svg
  • cons: doesn't support css option
  • pros: supports dark mode
  • pros: no issues with rehype-raw
  • pros: no conflicts with other styles on the page

[remcohaszing]

Good catch. This is definitely a bug. I reported it upstream, but let’s keep this issue open until this is fixed. In the meantime, you could move rehypeRaw before rehypeMermaid.

[remcohaszing]

It’s fixed in [email protected] 🎉