Shiki + MDX で `backgroundColor` のような無効な CSS が生成されてしまう

問題

Syntax Highlighter の Shiki と MDX を併用している際に、 Shiki の背景色が当たらず、原因を調べると pre 要素の style 属性に backgroundColor といった camelCase の無効な CSS が指定されていた。

調べるとほとんど同じ内容の issue が見つかったが、 Shiki 側の問題ではないとクローズされていた。

原因

MDX は内部で hast-util-to-estree を使用しており、 stylePropertyNameCase というフィールドによって style 属性の CSS のプロパティ名が書き換えられる。この際に、デフォルト値が dom であるため、 camelCase の CSS が生成されてしまっていた。

以下のような単純なプラグインを適用すること backgroundColor というプロパティ名になっていることが確認できる。

const plugin = () => {
  return (tree: Root) => {
    tree.children.push({
      type: "element",
      tagName: "div",
      properties: { style: "background-color: orange;" },
      children: [{ type: "text", value: "Hello, World!" }],
    });
  };
};

修正

stylePropertyNameCase を css に固定する PR を送りマージされた。