Thebe loads CSS that clobbers in-page CSS

[choldgraf]

Describe the problem

When thebe is loaded, it now loads CSS that clobbers a ton of in-page CSS. For example, see the word "example" in the thebe docs here:

https://thebe.readthedocs.io/en/latest/#examples

In this case, all of the paragraph styling and the styling of the second instance of "examples" is gone.

If you look at the CSS that corresponds to those elements, we are loading a base.css file a bunch of times, that is coming from the JupyterLab UI components:

So it seems like we are loading some JupyterLab CSS that is clobbering the other CSS on the page. We should restrict this to thebe-activated code cells somehow.

Link to your repository or website

https://thebe.readthedocs.io/en/latest/#examples

Steps to reproduce

• Load the latest thebe on any page with paragraph-level formatting
• Note that the formatting is clobbered

The version of Python you're using

No response

Your operating system

No response

Versions of your packages

No response

Additional context

No response

[rowanc1]

I think my guess would be to look here:
https://github.com/executablebooks/thebe/blob/b3ddca5389ed80bb6add801259776577bb8ffb99/src/thebelab.js#L16

[choldgraf]

Perhaps this is something that @moorepants or someone in his group has noticed as well? This seems like a pretty major change in end behavior

[moorepants]

@TimStewartJ can you look into css behavior change with the new juplyterlab code?

[moorepants]

Perhaps this is something that @moorepants or someone in his group has noticed as well?

No we haven't seen these effects in our use cases.

[TimStewartJ]

I'm looking into this issue now. I guess its something in the new jupyterlab-manager but I can't find it at the moment. It's interesting that this hasn't come up before considering ui-components has been a dependency for a while now.

[choldgraf]

@TimStewartJ I actually checked and this issue is present in most releases since like 0.5.1 or something. I wonder if the issue only comes up in certain contexts or something.

[stevejpurves]

ok so recreated this locally, using a local build and this line is the problem: https://github.com/executablebooks/thebe/blob/master/src/thebelab.js#L18

import "@jupyterlab/rendermime/style/index.css";

removing this no longer loads the css responsible for the bug. So at least this is a style file that we are directly loading.

This import was included in this commit: 1a8cb85
with the message add css with standard jupyter ansi colours to make output colourful

It's worth noting that this change was to replace a local file with css that just patched the colors locally. See: 83104a7

So it seems the intent was not to load all jupyterlab/rendermime styles, but just rely on the reference color css from the jupyterlab packages rather than duplicating locally?

However, if the css loaded here is actually doing more, in terms of making sure outputs are rendered properly then there may be more of a dependency here than just the colors. need to check the impact of removing it on the examples and downstream usage.

So looking at the file causing the collision itself, as seen in @choldgraf 's screenshot this is https://github.com/jupyterlab/jupyterlab/blob/master/packages/ui-components/style/base.css and it modifies bare tag selectors, html tc... it clearly wasn't intended to be included on a page outside of jupyterlab. I've not yet tracked down where that is pulled in exactly, but it's in the dependency tree of the rendermime css file somewhere.

possible ways forward:

• don't load the css and leave that for the consumer
• load css from other packages, and not everything that 'rendermime` brings in. i.e. be more selective
• try and use webpack somehow to either scope the incoming css that or prevent the top level selectors from being applied across the page.
• influence the structure of the jupyterlab dependency such that consumers of @jupyterlab/rendermime can expect to load the css without these rules on the top level selectors.

[stevejpurves]

@jupyterlab/cells/style/index.css loads @juptyerlab/ui-components/style/index.css and then the former is used pretty widely throughout different packages.

[choldgraf]

Hmmm - I think that the decision tree is something like:

• If the CSS is primarily about code cell syntax then we can just roll our own CSS and primarily use CodeMirror CSS for it
• If the CSS is meant for rendering cell outputs, then I think we need to find a way to retain the use of the jupyterlab module, because that is probably a lot of different kinds of CSS to render various kinds of output nicely.

I suspect that we are in scenario 2 given that the load is about MIME bundles :-/

I wonder if @jtpio has any thoughts on how we could re-use the JupyterLab CSS in a way that doesn't clobber all the other outputs?