Inline style overrides ID-based CSS rules

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v135.0.7049.96

Reproducible demo link

https://jsfiddle.net/bqkLwt8j/

Describe the bug

When an element has an inline style and also matches an ID-based CSS rule, the styles from the ID selector are removed - even if the inline style doesn’t override those properties. However, this issue does not occur with class-based CSS rules, which behave as expected.

How to reproduce the bug?

1. Add a CSS rule for a specific ID, e.g. #frame2 { color: red; }
2. Add an element with that ID and an inline style, e.g. <div id="frame" style="font-size: 14px;">
3. Observe that the color is no longer applied from the CSS rule, despite not being overridden.

What is the expected behavior? An inline style should only override conflicting properties explicitly set in the inline style. Other styles (e.g., from ID-based selectors) should remain intact and apply as expected.

For example:

<style>
  #test {
    color: red;
    font-weight: bold;
  }
</style>

<div id="test" style="font-weight: normal;">Hello</div>

The expected result is:

• color: red should still apply from the ID-based rule.
• font-weight: normal should override the ID rule for font-weight.

What is the current behavior? The entire set of styles defined in the ID selector (e.g., #test { ... }) is disregarded as soon as an inline style is added, even if the inline style does not override any of those properties.

Code of Conduct

• I agree to follow this project's Code of Conduct