The jupyter-ui-toolkit variables are inlined too many times

[krassowski]

Description

The CSS variables from jupyter-ui-toolkit are inlined on body and every element which has toolbar. This has many downsides:

• the page load is slower as variables are replaced when attaching each element,
• debugging anything in the DOM harder because it is just filled with spuriously repeated information
• themes cannot override these variables easily, they need to have specificity over each of these elements

I suspect that this would become even worse if jupyter-ui-toolkit was to become used across more elements (#15707)

CC @brichet @fcollonval

Reproduce

A JupyterLab with a single notebook open:

Expected behavior

The jupyter-ui-toolkit variables are either:

• inlined only once in body, or
• embedded in a style

Context

• JupyterLab version: 4.1.2

[Mehak261124]

@krassowski @JasonWeill @fcollonval Can I work on this issue ?

[fcollonval]

Sure don't hesitate. We don't have a policy of assigning issue.

Feel free to open a PR early to get advice

[fcollonval]

@krassowski I'm not able to reproduce on 4.1.2. But I'm seeing it on the current main branch. Could you confirm it was happening for 4.1.2 in your case?

[krassowski]

Interesting! I indeed do not see it on Binder with released 4.1.2 but do see it locally on 4.1.2 tag and on main. I guess this is some node caching issue for me then? Or is it something to do with dev mode?

[fcollonval]

Thanks for having a second look. I'll test your set up and with a dev wheel from CI - I'll try to do that this week.

[krassowski]

This is looking good in 4.2.0 prereleases so I am going to close it.