[HELP WANTED] How to load css that can viewed in code viewer and also exported while saving

Hi :wave:

I am trying to load some CSS within the editor as part of the theme, I am able to link stylesheets as part of loading but the problem that I am facing is when loading the styles directly using <style> tag, I am able to view the serialized version via editor.getStyle() but editor.getCss() only contains the protectedCss.

I am confused about how the CSS styles are added within the template style css property when exporting or viewing within code viewer, also how to manipulate the CSS rules that are not component specific but generally.

I tried to dig more in the docs especially inCssComposer and CssRule but unfortunately couldn't find much luck there.

I have added a codepen link to demonstrate the issue I am facing. https://codepen.io/aadilmehrajbhat/pen/GRqBdQY

Thanks