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.

Sign up for GitHub

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

Jump to bottom

Strip CSS from React App #1952

Open
rgaiacs opened this issue Mar 28, 2025 · 0 comments · May be fixed by #1953
Open

Strip CSS from React App #1952

rgaiacs opened this issue Mar 28, 2025 · 0 comments · May be fixed by #1953
Labels
enhancement

Comments

@rgaiacs
Copy link
Contributor

rgaiacs commented Mar 28, 2025

This is related with #1856.

We are using a combination of Jinja2 and React.

  1. Jinja2 renders https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/templates/page.html into HTML.
  2. HTML is sent to the user's web browser.
  3. User's web browser parsers the HTML and make requests for assets.
  4. User's web browser receives https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/static/js/App.jsx
  5. User's web browser executes React based app
  6. React based app appends CSS file https://github.com/jupyterhub/binderhub/blob/main/binderhub/static/js/index.scss to <head>.

Because the CSS file is appended by React, this blocks users to customise the CSS.

Proposed change

I want to move

binderhub/binderhub/static/js/App.jsx

Lines 5 to 8 in 1a445a2

import "./index.scss";
import "@fontsource/clear-sans/100.css";
import "@fontsource/clear-sans/300.css";
import "@fontsource/clear-sans/400.css";
to https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/templates/page.html. This way, users can provide their own additional CSS file for customisation.

This will require to convert https://github.com/jupyterhub/binderhub/blob/main/binderhub/static/js/index.scss into CSS. This can be accomplished using webpack that is already a dependency of the project.

Alternative options

I could not think of viable alternative options.

User should not have to edit https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/static/js/App.jsx to change the style.

Edit https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/templates/page.html does not work because React will append the CSS and it will have precedence.

Who would use this feature?

This will be used by GESIS as part of the server migration mentioned in jupyterhub/mybinder.org-deploy#3264.

Other users of BinderHub also have interested in custom CSS as mentioned in #1949.
@rgaiacs rgaiacs mentioned this issue Mar 28, 2025
Open
rgaiacs added a commit to rgaiacs/binderhub that referenced this issue Mar 31, 2025
@rgaiacs
Bundle CSS and SASS together
507314c 
Closes jupyterhub#1952
@rgaiacs rgaiacs linked a pull request Mar 31, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Bundle CSS and SASS together rgaiacs/binderhub
1 participant
@rgaiacs