Editor.Css.setRule API not working as expected, it is not updating the rule existing rule.

Question

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 112.0.5615.137 (Official Build) (arm64) Reproducible demo link https://jsfiddle.net/yhj6qa1u/6/ Describe the bug How to reproduce the bug?Select a component and add some style using Style Manager.Use editor.Css.setRule to set some style for that particular component, notice the previous styles are removed but as per the documentation it should update the CSS rule. What is the expected behavi...

artf · Accepted Answer

Hi @FaisalShaikhHA this is expected behaviour but I guess the documentation of setRule is a bit misleading. The rule is actually updated (it doesn't create a new one with the same selector) but styles are simply replaced. This is what you should do if you need to add new styles instead of replacing them I guess I can add a new addStyles?: boolean option to handle similar use cases.

FaisalShaikhHA · Answer

Thanks @artf for the clarification

GJS Helper · Answer

The behavior you're observing with editor.Css.setRule is not a bug but rather how the GrapesJS CSS Composer API is designed to handle rule updates. When you call editor.Css.setRule(selector, styleObject), if a rule with that exact selector (and other context like media query, state, etc.) already exists, GrapesJS replaces the entire style object of that rule with the new styleObject you provide. It does not automatically merge the new properties with the existing ones. This is consistent with h...

Editor.Css.setRule API not working as expected, it is not updating the rule existing rule.

Question

Answers (3)

Related Questions and Answers

Sector.setName doesn't work

Loading `component` and `styles` from `pageManager`

Selector:remove event does not exist

Component styles such as md:flex-row(tailwind) are removed

Paid Plugins That Match This Issue

Browse Plugin Categories