[TSVB] Some css properties on markdown styling need !important to be applied

[stratoula]

Kibana version:
Not sure when the problem started but I think that is related to monaco #100684

Describe the bug:
in TSVB the users can use the panel options--> custom CSS feature to change the look & feel of their markdown. We noticed that the font-size for h1 doesnt work. It can happen to other properties too I guess.
The problem here is that the styling is overwritten by the monaco classes

Workaround
Add the !important next to the css property you want to overwrite. For example:

h1{
  font-size: 20px !important
}

Steps to reproduce:

1. Create a markdown with # Header
2. Go to custom css and add

h1{
  font-size: 200px
}

4. Check that the font size is not applid

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[flash1293]

I think this is caused by lazy loading of the markdown component - it renders after emotion already injected the css, so it has a lower specificity. Not sure what's the best way to fix it tbh - we can try to make sure the override styles get loaded last, but it's still a brittle solution...

[vadimkibana]

Maybe one solution would be to prefix all TSVB custom CSS declarations with some class name, that would make them more specific.

User writes:

h1 {
  font-size: 200px
}

Before injecting into DOM, you transform them to:

.tsvb h1 {
  font-size: 200px
}

[flash1293]

@vadimkibana

We don't have any tooling to prefix the selectors. There's only emotion, but it doesn't have a simple way increasing the specificity. An easy way I found is to make sure the markdown styles are loaded already before the actual component is used. There could be some function preloadMarkdownCss function in the kibana_react plugin which dynamically imports the scss file - then TSVB is calling that one. What do you think?

[vadimkibana]

What do you think?

FWIW, discussed over Slack to use Emotion's API to prepare injected CSS scoped to TSVB. @flash1293 to report on the outcome.