Make css dependency graph of js modules #9407
Conversation
|
Thanks for making a pull request to JupyterLab! To try out this branch on binder, follow this link: |
github-actions
bot
added
Design System CSS
pkg:application
pkg:apputils
pkg:attachments
pkg:cells
pkg:celltags
pkg:codeeditor
pkg:codemirror
tag:CSS
|
I updated the css-loader, and confirmed that we still only have about 100 style tags on the page (now that we are not relying on css-loader to do deduplication). Whether this holds out for lots of extensions is to be determined - we may still need to further automate a solution for extensions, for css-loader to do deduplication at the page level at runtime, or revert back to our old version of css-loader. |
|
I rebased and cleaned up/combined commits. |
We also change to not add dependency css for theme packages. The theme css bundler cannot handle dependency imports. Explicitly specifying the dependencies to ignore for built-in themes does not solve the problem when linking a local theme extension, as happens in the usage test with the “foo” extension.
This brings in jupyterlab/lumino#136 so we can deduplicate Lumino widget css without relying on css-loader.
We can update now that we are not relying on css-loader to do deduplication of css. This addresses a main issue of jupyterlab#9364 and paves the way to addressing jupyterlab#6542
|
I think this is ready for review at this point. After review, it would be great to get another RC with this released. |
jasongrout
changed the title
|
I'm getting mathjax error with the jlab 3.0.0rc11 which makes the cells become weird: This is probably related to some commit that is after 3d81e1a (which didn't have this problem) |
|
Indeed, I'm also seeing very strange things happening with notebook cells in 3.0rc11. I'll open a new issue. |
|
@cceyda - 3.0rc12 was released just now fixing those codemirror issues. Thanks again. |
github-actions
bot
added
the
status:resolved-locked
References
This explores implementing #9375 (comment)
This depends on jupyterlab/lumino#136, which is a companion PR that adds similar style/index.js files to Lumino. This has been merged and released.
This approach avoids the problems with css-loader not deduplicating css noted in #9364
Code changes
This introduces a dependency graph for css using a new convention,
style/index.jsfiles. This way the dependency tree is in js, so it takes advantage of all of the webpack bundling, module federation sharing, etc., but doesn't hardcode a css import in the main js file. At the top application level, instead of generating an import.css with all the css imports, we generate a style.js file.With this change, we are able to upgrade
css-loaderand still maintain about 100 style tags on the page with no duplicates that I saw.Overall, I think deduplicating the actual css at runtime (#9375 (comment)) is probably a better thing to do in the end, but I'm not sure how straightforward that approach will be or how long it will take, so I opted to first do this approach for 3.0, where I could pretty clearly see what to do.
User-facing changes
Backwards-incompatible changes