Enterprise: Enterprise css breaks Monaco Editor

[Fruko]

Describe the bug
Using Enteprise css together with Monaco editor causes Monaco editor to not render popups properly due to css conflicts

To Reproduce
Steps to reproduce the behavior:

1. Clone project from this repo
2. Run it with cd app && yarn install && ng server
3. Type import in the file
4. See that with light theme css included in the index.html the popups do not render properly
5. Looks like .tree a is conflicting
6. Use trick setTimeout(() => {debugger;}, 3000) to start a debugger up when its open.

Expected behavior
Enterprise css to be encapsulated so that it wouldn't break other libraries

[tmcconechy]

This is a good use case to support https://github.com/infor-design/enterprise/issues/1199

[tmcconechy]

@Fruko

Not sure if you solved this or not but i was testing out https://github.com/vanillawc/wc-monaco-editor and if you embed your monaco editor with that it moves the css into the shadow DOM so it seems like with this it wont conflict.

We are still resistent to make the breaking change yet. Thinking if that doesnt work to do something here so .tree specifically works. Then in a future version we will have ids-tree and an eventual web component version that won't conflict.

[Fruko]

@tmcconechy thank you for this! Actually because of these issues we de-scoped the adoption of Monaco. I will try wc-monaco-editor

[tmcconechy]

Please give it a shot if it works great, if not i can find a non breaking way to fix the tree so it doesnt conflict.

[Fruko]

@tmcconechy we tried with wc monaco editor and unfortunately the styles are broken anyway

I think manually fixing the style conflicts is our only option to make it work for now

[tmcconechy]

Ok, i thought i saw the issue with the typeahead popupmenu was definately working. Any idea what classes are conflicting here?

Should we just test with wc monaco editor then?

[Fruko]

it seems that quick fix could be removing the font-size: 0

but there can be a number of these cases.
facing the issue as it is, I would say our team will try to use angular wrapper for monaco
https://github.com/atularen/ngx-monaco-editor

and override the styles to make it work

[tmcconechy]

OK yes thats probably easier. It would be tough to remove that font-size right now. What i'll do is do it on the bit of the rework we are starting then. (no reset ect)

[tmcconechy]

Descoping this for now. But in 5.0 we have encapsulation so it will work in 5.0. For now have to use your current workarounds