aknuds1/html-to-react

Dashes stripped from custom property definition in inline style

Closed this issue · 1 comments

When parsing this HTML using the default parser (version 1.5.0):

<div style="color: var(--example); --example: red;">Should be red</div>

The --example custom property definition seems to have its dashes removed:

<div style="color:var(--example);example:red">Should be red</div>

This breaks the custom property.

Here is a simplified test case to reproduce:

const ReactDOMServer = require("react-dom/server");
const HtmlToReactParser = require("html-to-react").Parser;

const htmlInput =
  '<div style="color: var(--example); --example: red;">Should be red</div>';
const htmlToReactParser = new HtmlToReactParser();
const reactElement = htmlToReactParser.parse(htmlInput);
const reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);

console.log("HTML input:", htmlInput);
console.log("Result:", reactHtml);

Fixed by #145.