Very simple find-and-replace remark plugin enters a recursive loop

[TheOnlyTails]

Hi, I'm writing a plugin to convert all instances of hex color codes in markdown:

`#FEF65B`

into <span> elements which you can apply CSS to later on to display the color, like so:

<span class="color" style="--color: #FEF65B">`#FEF65B`</span>

I wrote a very simple plugin to do this:

const { className, cssVariable } = options
visit(ast, "inlineCode", (node: InlineCode, i, parent) => {
	const match = node.value.match(colorRegex)?.[0]
	if (match && typeof i !== "undefined") {
		parent?.children.splice(i, 1, 
			{
				type: "html",
				value: `<span class="${className}" style="--${cssVariable}: ${match}">`,
			},
			node,
			{ type: "html", value: "</span>" },
		)
	}
})

problem is, once i try running any tests to verify the plugin works, it enters into an infinite loop and doesn't do anything.
I suspect it's to do with the fact that I'm nesting an inlineCode node inside the replaced element, causing it to recursively find and replace inside itself.

How would I fix this? I tried using the mdast-util-find-and-replace package but couldn't figure out how to use it for this purpose.

[remcohaszing]

You are trying to modify the HTML output, not markdown. This can be done better as a rehype plugin. It looks something like below. The main difference is that this adds the style to the generated <code> node instead of wrapping it in a <span>.

import { visit } from 'unist-util-visit'

export default function rehypeColorCode({ cssVariable }) {
  function transformer(ast) {
    visit(ast, 'element', (node) => {
      if (node.tagName !== 'code') {
        return
      }

      if (node.children.length !== 1) {
        return
      }

      const child = node.children[0]
      if (child.type !== 'text') {
        return
      }

      const match = child.value.match(colorRegex)?.[0]
      if (!match) {
        return
      }

      const css = `--${cssVariable}: ${match[0]};`
      child.properties ||= {}
      child.properties.style = child.properties.style ? `${child.properties.style};${css}` : css
    })
  }
}

[TheOnlyTails]

Hi, this looks great, thank you! I'm still running into an issue though; The plugin seems to run into an unknown element node:

Error: Cannot handle unknown node `element`

This is the code I adapted:

visit(ast, "element", (node) => {
	if (node.tagName !== "code") return
	if (node.children.length !== 1) return
	const content = node.children[0]
	if (content.type !== "text") return

	const match = content.value.match(colorRegex)?.[0]
	if (!match) return

	node.properties ??= {}
	node.properties.class =
		node.properties.class && Array.isArray(node.properties.class)
			? [...node.properties.class, className]
			: className
	node.properties.style = node.properties.style
		? `${node.properties.style};--${cssVariable}:${match}`
		: `--${cssVariable}:${match}`
})

[wooorm]

You are using the plugin wrong. Depends on how you use it. But note it’s a rehype plugin, not a remark plugin

[TheOnlyTails]

I'm doing something like this:

remark()
  .use(remarkRehype)
  .use(remarkColorPreview, options) // my plugin

[wooorm]

This is not enough info for me to help you with, please provide more info

[remcohaszing]

rehype-stringify is missing.

[wooorm]

Problem is you replace the current node with something else, while moving the current node to the next node.
visit will then move one sibling forward. To the node you were just on.
Use the return value if you do that. return i + 2.

But hast-util-find-and-replace or Remco’s example are probably better.

[wooorm]

See also https://github.com/rehypejs/rehype-github/blob/main/packages/color/lib/index.js for a similar plugin