Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add style index.js files to optionally consume the CSS via a js module import #136

Merged
merged 1 commit into from
Dec 1, 2020

Conversation

jasongrout
Copy link
Contributor

@jasongrout jasongrout commented Nov 28, 2020

The webpack css-loader plugin does not deduplicate css that is imported via the css @import. Making the css available via a js module import lets webpack do deduplication at the module level in a way that respects the dependency ordering.

Adding these index.js files should not affect anything in Lumino itself, but just make it easier to consume the Lumino CSS and have deduplication.

This will help fix a problem in JupyterLab, for example, where the Lumino widget CSS will be duplicated on the page dozens of times because many modules require the CSS files directly (so css-loader is used). With this change, modules will be able to require the style/index.js module, so Webpack itself will deduplicate the imports, and the Lumino CSS will only be put on the page once.

The default-theme package needs a more complicated index.js since it uses @import in its index.css (in this case, css-loader would make a copy of the css).

…e import.

The webpack css-loader plugin does not deduplicate css that is imported via the css @import. Making the css available via a js module import lets webpack do deduplication at the module level in a way that respects the dependency ordering.

Adding these index.js files should not affect anything in Lumino itself, but just make it easier to consume the Lumino CSS and have deduplication.

This will help fix a problem in JupyterLab, for example, where the Lumino widget CSS is duplicated on the page dozens of times because many modules require the CSS files directly (so css-loader is used). With this change, modules will be able to require the style/index.js module, so Webpack itself will deduplicate the imports, and the Lumino CSS will only be put on the page once.

The default-theme package needs a more complicated index.js since it uses @import in its index.css (in this case, css-loader would make a copy of the css).
Copy link
Contributor

@blink1073 blink1073 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@blink1073 blink1073 merged commit c847ff4 into jupyterlab:master Dec 1, 2020
@blink1073
Copy link
Contributor

Released the following:

 - @lumino/application: 1.12.0 => 1.13.0
 - @lumino/datagrid: 0.15.0 => 0.16.0
 - @lumino/default-theme: 0.6.0 => 0.7.0
 - @lumino/dragdrop: 1.6.4 => 1.7.0
 - @lumino/widgets: 1.15.0 => 1.16.0

jasongrout added a commit to jasongrout/jupyterlab that referenced this pull request Dec 1, 2020
This brings in jupyterlab/lumino#136 so we can deduplicate Lumino widget css without relying on css-loader.
jasongrout added a commit to jasongrout/jupyterlab that referenced this pull request Dec 1, 2020
This brings in jupyterlab/lumino#136 so we can deduplicate Lumino widget css without relying on css-loader.
jasongrout added a commit to jasongrout/jupyterlab that referenced this pull request Dec 2, 2020
This brings in jupyterlab/lumino#136 so we can deduplicate Lumino widget css without relying on css-loader.
jasongrout added a commit to jasongrout/jupyterlab that referenced this pull request Dec 2, 2020
This brings in jupyterlab/lumino#136 so we can deduplicate Lumino widget css without relying on css-loader.
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants