important style is not parsed

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?

@piszczu4

@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

@piszczu4

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

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.

@piszczu4

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

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>;
}

Any feeedbaack?

Any progress on that one?

Hello Guys, are you going to fix the issue?

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

@remarkablemark

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:
Text

After the conversion becomes:
Text

As you can see "color" style is missing.
Can we have the possibility of "saving" style even if it was passed with "!important"?
like:
Text

@ArtsiomReutovich

@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.

@remarkablemark

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

Navigation Menu

Repository navigation

important style is not parsed #1302

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

important style is not parsed #1302

Description

Activity

remarkablemark commented on Feb 9, 2024

piszczu4 commented on Feb 9, 2024

remarkablemark commented on Feb 9, 2024

piszczu4 commented on Feb 9, 2024

remarkablemark commented on Feb 9, 2024

piszczu4 commented on Feb 9, 2024

piszczu4 commented on Feb 12, 2024

piszczu4 commented on Feb 29, 2024

ArtsiomReutovich commented on Apr 4, 2024

remarkablemark commented on Apr 4, 2024

ArtsiomReutovich commented on Apr 4, 2024

remarkablemark commented on Apr 4, 2024

ArtsiomReutovich commented on Apr 5, 2024

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions