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

Extract css data into separate CSS files #1233

Open
julienw opened this issue Aug 31, 2018 · 13 comments
Open

Extract css data into separate CSS files #1233

julienw opened this issue Aug 31, 2018 · 13 comments
Labels
code maintenance Issues that are not user facing, but are related the technical debt with the code itself

Comments

@julienw
Copy link
Contributor

julienw commented Aug 31, 2018 •
edited by data-sync-user
Loading

Currently we load our CSS directly with style-loader but we should extract the CSS in separate files.

We can use https://github.com/webpack-contrib/mini-css-extract-plugin along with https://github.com/webpack-contrib/css-minimizer-webpack-plugin#getting-started for minimization. The documentation for these plugins looks pretty clear.

┆Issue is synchronized with this Jira Task
@julienw julienw added code maintenance Issues that are not user facing, but are related the technical debt with the code itself help wanted Things ready to be worked on by anyone. Issues must include instructions on how to complete the task good first issue Good issue for new contributors, the issue must have clear instructions on how to complete the work ready Issue has defined requirements. It can be grabbed and worked on labels Aug 31, 2018
@saranshbarua
Copy link
Contributor

Can I take this? I may need a little help though.

@julienw
Copy link
Contributor Author

julienw commented Sep 5, 2018

hey @saranshbarua, after our quick chat on Slack, do you still intend to look at it ? If yes I'll assign the issue to you :)

@saranshbarua
Copy link
Contributor

I would love to try.

@meagonqz
Copy link

meagonqz commented Oct 3, 2018

@saranshbarua how is this going for you? I recently wrote a webpack configuration using these plugins so if you need any help (or wouldn't mind me taking this over), I'm happy to chat. I'm on the devtools slack as @meag

@saranshbarua
Copy link
Contributor

@meagonqz you can take this as I'm a little occupied right now :)

@julienw julienw added the assigned A developer has requested to work on this issue. label Oct 4, 2018
@julienw
Copy link
Contributor Author

julienw commented Oct 10, 2018

Hey @meagonqz, any update on this? Do you need anything to start working on this? Have a nice day!

@julienw
Copy link
Contributor Author

julienw commented Oct 17, 2018

Resetting the assigned status as @meagonqz doesn't seem to look at ths bug after all.

@julienw julienw removed the assigned A developer has requested to work on this issue. label Oct 17, 2018
@hashi93
Copy link

hashi93 commented Oct 17, 2018 •
edited
Loading

May I work on this ? @julienw

@julienw
Copy link
Contributor Author

julienw commented Oct 17, 2018

@hashi93 yes please !

@julienw julienw added the assigned A developer has requested to work on this issue. label Oct 17, 2018
@hashi93
Copy link

hashi93 commented Oct 21, 2018 •
edited
Loading

find my PR on https://github.com/devtools-html/perf.html/pull/1398/commits
@julienw could you please review ?

@hashi93 hashi93 mentioned this issue Oct 21, 2018
Closed
@julienw
Copy link
Contributor Author

julienw commented Feb 7, 2019

Some work has been done in #1398, which showed problems in some of our dependencies injecting CSS, and a bad interaction with our own CSS. Because this changes the order of the CSS parsing some properties aren't overridden anymore.

The main issue is in the react-splitter-layout dependency (upstream bug is zesik/react-splitter-layout#30). There might be issues with react-contextmenu as well, which also injects some CSS. The solution is either fixing these issues (this likely means extracting the injected CSS into separate files, or add properties to tell the component to not inject the CSS), or workaround the problem in our code (by increasing the specificity in our own CSS).

@julienw julienw removed assigned A developer has requested to work on this issue. good first issue Good issue for new contributors, the issue must have clear instructions on how to complete the work help wanted Things ready to be worked on by anyone. Issues must include instructions on how to complete the task ready Issue has defined requirements. It can be grabbed and worked on labels Feb 7, 2019
@julienw
Copy link
Contributor Author

julienw commented Feb 7, 2019

Note: this wasn't a good first issue at all, and I'm sorry for this. Thanks @hashi93 for your work and your patience on this topic!

@julienw julienw mentioned this issue Mar 14, 2019
Closed
@julienw
Copy link
Contributor Author

julienw commented Mar 14, 2019

Latest version of react-splitter-layout (v4) doesn't inject CSS anymore. I filed #1859 to upgrade it.

@julienw julienw mentioned this issue Jan 17, 2022
Open
@julienw julienw mentioned this issue Mar 6, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
code maintenance Issues that are not user facing, but are related the technical debt with the code itself
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@julienw @meagonqz @hashi93 @saranshbarua