How to clone/copy a selected component with all its styles/css rules same as core:copy and core:paste command does, but I want json so that I can use it to create a block?

[FaisalShaikhHA]

I want to clone/copy a component with all its CSS rule, the same way core:copy and core:paste command does.
paste command generates a new id for the component and updates the rules with the new component id as well, but I am not able to achieve the same thing for Styles/CSS rules. component.clone() command clones the component object but CSS rule objects are not cloned.
If any other approach for cloning the component with all its child, CSS rules and then using the end result object to be used as a block please let me know. Thank you.

[FaisalShaikhHA]

@artf please provide suggestions if any thank you

[bgrand-ch]

@FaisalShaikhHA Hello,

#5195 (comment)

[FaisalShaikhHA]

Thanks @bgrand-ch I am aware of this but I am not able to use these cloned component details to create a block.

const selected = editor.getSelected();
const cloned = selected.clone();
editor.Blocks.add("test", {
     label: "Test",
     category: "Custom",
     content: JSON.parse(JSON.stringify(cloned)),
 });

The above code adds the components but CSS is missing because styles object is not present when we stringify.
I need CSS of all inner components same as components object so that I can use it in block definition or stringify should return the component definition with style attribute key.
Currently I have to loop through every component to get the styles or just append the component as hidden and then extract the css.

[artf]

You can use editor.getCss to get component related rules