important style is not parsed

[piszczu4]

The following is not parsed when using attributesToProps(domNode.attribs):

style="margin-left: 24px!important"

while this is:

style="margin-left: 24px"

Why is that a case?

[remarkablemark]

@piszczu4 this is expected behavior because this library parses inline styles and inline styles do not support !important

[piszczu4]

@piszczu4 this is expected behavior because this library parses inline styles and inline styles do not support !important

Why does not support? Look here: https://codepen.io/degel123/pen/poYOLzE

[remarkablemark]

@piszczu4 can you provide a reproducible example of this not working for you?

[piszczu4]

Here it is: https://codesandbox.io/p/sandbox/parser-hf4g76?file=%2Fsrc%2FApp.tsx%3A30%2C44-30%2C53

If you remove !important, it starts to work.

[remarkablemark]

@piszczu4 I can't seem to open the CodeSandbox?

[piszczu4]

Try this: https://codesandbox.io/p/sandbox/parser-hf4g76?file=%2Fsrc%2FApp.tsx

Here is the code:

import * as Popover from "@radix-ui/react-popover";
import * as Tooltip from "@radix-ui/react-tooltip";
import * as React from "react";
import { forwardRef, ReactNode } from "react";
import "./styles.css";

import parse, {
  DOMNode,
  Element,
  HTMLReactParserOptions,
  attributesToProps,
  domToReact,
} from "html-react-parser";

export default function App() {
  const options = {
    replace(domNode: DOMNode) {
      if (!(domNode instanceof Element)) return domNode;

      if (domNode.tagName === "p") {
        return (
          <p {...attributesToProps(domNode.attribs)}>
            {domToReact(domNode.children as DOMNode[], options)}
          </p>
        );
      }
    },
  };

  const html = `<p style="margin-left:24px!important">Example</p>`;
  return <div className="App">{parse(html, options)}</div>;
}

[piszczu4]

Any feeedbaack?

[piszczu4]

Any progress on that one?

[ArtsiomReutovich]

Hello Guys, are you going to fix the issue?

[remarkablemark]

I've been really busy these days so I haven't had a chance to look into this. If anyone has a solution, feel free to open a PR and I can review it.

I did a quick search and it looks like React does not support important inline styles: https://stackoverflow.com/questions/23074748/important-inline-styles-in-react

[ArtsiomReutovich]

Hello @remarkablemark,

In our case, the problem is mostly related to some styles being missed after it was processed by the plugin.

For instance, we have node:
<span style="color:red!important;font-size:14px">Text</span>

After the conversion becomes:
<span style="font-size:14px">Text</span>

As you can see "color" style is missing.
Can we have the possibility of "saving" style even if it was passed with "!important"?
like:
<span style="color:red;font-size:14px">Text</span>

[remarkablemark]

@ArtsiomReutovich can replace work as a workaround for you? If it doesn't, a quick hack would be to do a replaceAll('!important', '') for your HTML string.

[ArtsiomReutovich]

Hello @remarkablemark,
Yes, I'm doing it this way.