Css edits aren't persisted to the DOM

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome Version 109.0.5414.87

Describe the bug

How to reproduce the bug?

1. Create a @keyframes animation on the GrapesJS canvas

@keyframes appear_1234{
  0%: {opacity:0};
  100%: {opacity:100%}
}

In JS, create a new CssRule by passing the following string into editor.Css.addRules:

let updatedRule = `@keyframes appear_1234{
  0%: {opacity:0};
  100%: {opacity:90%};
}`

3. Add it to the canvas: editor.Css.addRules(updatedRule)

What is the expected behavior? The DOM should be updated

What is the current behavior? The DOM is not updated. HOWEVER, if I call editor.getCss(), I can see the correct value for opacity is returning.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

function setup(){
    let initialAnimation = `
    @keyframes appear_1234{
        0%: {opacity:0};
        100%: {opacity:100%}
      }
    `
    editor.Css.addRules(initialAnimation);
}

function update(){
    let updatedAnimation = `
    @keyframes appear_1234{
        0%: {opacity:0};
        100%: {opacity:90%}
      }
    `
    editor.Css.addRules(updatedAnimation);
}


setup()
update()
//DOM is not updated.

//Css string is updated though
editor.getCss()

Code of Conduct

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