Remark Style String to JSX (remark-style-string-to-jsx.ts)

What it is

A custom Remark AST plugin located at plugins/remark-style-string-to-jsx.ts.

When does it run?

It runs during the MDX compilation phase, configured in beforeDefaultRemarkPlugins within docusaurus.config.ts.

What does it do?

It scans the parsed Abstract Syntax Tree for any MDX JSX elements (mdxJsxFlowElement or mdxJsxTextElement) that have a style attribute defined as a raw string.

For example, it looks for:

<div style="background: red; margin-top: 10px;">

And transforms the AST node properties to represent a strict React object:

<div style={{ background: "red", marginTop: "10px" }}>

Why is it necessary?

While our Webpack pre-loader (obsidian-span-loader.js) handles specific <span style="color: ..."> tags to prevent strict parsing crashes, this Remark plugin acts as a global safety net for all other HTML elements (like div, p, table, etc.). It ensures that any raw HTML styles generated by Obsidian or written by hand are safely converted into React-compliant props, preventing React compilation errors during the build.