v18.1+ and CSS rules inheritance

[codingaddicted]

Since the massive refactor of the Style Manager, the style property fields show only values applied to the component id or on a class. The previous versions displayed also values coming from parent assignment, so if a "color: red;" was set on a class assigned to body (or even directly to body), then that "red" value was shown into the color picker.

Before 18.1 this behavior could be controlled and targeted by some configuration parameters. Is there a similar configuration value or parameter to enable it back? Otherwise, what kind of extension/plugin should be implemented to have it?

[artf]

Yeah unfortunately I had to remove inherited capability as in most cases it was highly unreliable and computed values were conflicting with the actual property definitions. I guess this feature could be implemented properly in the future by making it more reliable.

[codingaddicted]

Thank you for your reply. I supposed this feature could be a source of that unreliable behavior so I was thinking about a way to get visible some relevant properties value.

I also noticed that without this feature, even values coming from a class applied to an element are not shown when the class is defined into an external css imported by the "styles" config parameter. I'm using uikit framework to build UI and if I apply any uk* class to an element, DOM is correctly rendered but values in style manager remain to default.

Any suggestion here?

[artf]

Yeah, any rule defined in an external CSS is totally outside of the editor context. You have to import the rules if you want the editor/style manager to read them.

[josejbracho]

Just bumped into this same issue, I'm starting the editor with an external HTML and CSS strings and the style manager is not picking up the current styles on those elements. You mentioned we have to import these rules, where would I do that to make sure the editor/style manager can read them?

[leonardolima99]

Just bumped into this same issue, I'm starting the editor with an external HTML and CSS strings and the style manager is not picking up the current styles on those elements. You mentioned we have to import these rules, where would I do that to make sure the editor/style manager can read them?

You cannot start grapes with html and css directly, it needs to be started in its own data structure (an object with the settings). If you want it to start with a default page, you must build that page in the editor first, get the object it returns in the storageManager when saving, and send that object to onload. I create the project with this default object in the api, and then load it into the editor via onLoad.

[codingaddicted]

Just bumped into this same issue, I'm starting the editor with an external HTML and CSS strings and the style manager is not picking up the current styles on those elements. You mentioned we have to import these rules, where would I do that to make sure the editor/style manager can read them?

You need to use CssComposer.addRules(cssData) method to pass all rules to editor. The cssData can be fetched from a remote url or from wherever you want.
Remember that

• those rules are loaded into editor model, so they'll be rendered in page style when ToCss() method is called. If you want to keep the original rules external, you need to remove them before outputting the generated style
• the selector manager on editor should be set as componentFirst behaviour to read rules from html
• you may use grapesjs-parser-postcss plugin to correctly parse the external css