Can't reset CSS code which has parent or child.

To remove the CSS codes that belong to a specific block.

Indeed that block of CSS doesn't belong to any component (I'm talking about how the editor works) so that declaration is always rendered. GrapesJS can associate only class-based selectors, eg.

.class1 {...}
.class1.class2 {...}
.class1.class2, .class3 {...}

not even nested like .class1 .class2, in that case the rule is imported correctly but do not belong to any component

This is because you're just clearing components. You can use the built-in command core:canvas-clear

@artf Thanks for your quick reply.

Sorry for my unclear question.

What I actually want to achieve is

• To remove the CSS codes that belong to a specific block. For example, when I delete a block in the canvas, the CSS codes of that block will also be deleted. I don't want to clear the entire canvas.

Probably, it will fire on destroy. editor.Commands.add ('tlb-delete', e => { // remove the CSS from this block })

In this case, I can remove the CSS code that has no parent by deleting the components but if the CSS codes have a parent or a child, it does not work.

Codepen demo

And here is a video I've tested.

According to my components, I added <style> tags inside the block's content, If there is a better option to work with styles, please guide me. Thanks in advance.