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

CSS Should not be imported in our non-extension packages #6390

Closed
blink1073 opened this issue May 23, 2019 · 4 comments
Closed

CSS Should not be imported in our non-extension packages #6390

blink1073 opened this issue May 23, 2019 · 4 comments

Comments

@blink1073
Copy link
Member

@blink1073 blink1073 commented May 23, 2019

Describe the bug
We currently import css in many of our index.ts files. This means that consumers of the library who just want a token or to use a class must also load the css. We should load the css separately.

Webpack does not yet support a top level style parameter that is a path to the CSS entry point. Eventually, we should be able to @import url("~@jupyterlab/application"); in CSS and it would get resolved. I verified that the current versions of Webpack and CSS loader throw the error reported by the OP in the issue linked above. For now, we have to import the CSS in our extensions.

For now:

  • Remove all CSS imports from our non-extension packages and import them in the extensions instead
    We need to make sure that dependent packages are loaded as well (e.g. cells is loaded in notebook).
  • Verify that the examples still work

Once CSS loader 2.2 is released (not for our 1.0):

  • Remove all CSS imports from our packages and replace them with a style parameter in package.json
  • Create style folders in extensions that use the above syntax to import their dependent CSS
  • Add style metadata to the extension package.json
  • Template a dev_mode/index.css file that imports all of the extensions that have a style property in their package.json and importthat file from dev_mode/index.js
  • Update our examples to use the import from css pattern
  • Update the cookie cutter examples to use the same pattern
@blink1073 blink1073 added this to the 1.0 milestone May 23, 2019
@blink1073 blink1073 changed the title CSS Should not be imported in our JS files CSS Should not be imported in our non-extension packages May 23, 2019
@blink1073
Copy link
Member Author

@blink1073 blink1073 commented May 23, 2019

@vidartf, unfortunately we can't yet use @import, I updated the comment above.

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Jun 8, 2019

Will the actual CSS still be in the non-extension?

@blink1073
Copy link
Member Author

@blink1073 blink1073 commented Jun 8, 2019

Yep!

@lock
Copy link

@lock lock bot commented Aug 6, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related discussion.

@lock lock bot locked as resolved and limited conversation to collaborators Aug 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

4 participants