-
-
Notifications
You must be signed in to change notification settings - Fork 27k
Add support for CSS Sourcemaps without FOUC #3202
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
Conversation
Thanks for the PR! This sounds pretty awesome but we'll need to get more people to use your plugin before we can recommend it for everyone. If you tweet about it, post here and I'll be happy to help with reaching the audience. |
Sadly, this spawns the chicken and egg problem, nonetheless I do understand the complications of moving with bleeding edge stuff. Another hurdle, (AFAIK) I doubt there are enough people who actually tinker with internals of tooling/webpack that could be potential insiders. To be honest, I wish I had an audience on twitter, : | which I could ask out for help. I just happen to use twitter in read-only mode. |
If you tweet about this @gaearon will most likely retweet / quote it for you suggesting people to try it. 😄 |
You guys are just amazing. |
This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs. |
This pull request has been automatically closed because it has not had any recent activity. The conversation will be locked in 7 days unless the pull request is reopened. Thank you for your contribution. |
CRA will now have "working" sourcemaps for CSS.
Background
The most recent previous attempt at solving sourcemaps was #591 which introduced other bunch of problems. TL;DR The major problem was FOUC (Flash of Unstyled Content) and messy relative paths.
The root cause of FOUC is
style-loader
and the way it works. Explanation - webpack-contrib/css-loader#613 (comment)Mechanism
css-visor
is a loader and plugin, the loader extracts the CSS during compile time and passes it on to plugin for injection before webpack compilation finishes. The rest is handled byHTMLWebpackPlugin
and once loaded, CSS will be HMR'd automatically by HMR code added tocss-loader
's output.Performance
200 CSS files were imported in
App.js
,style-loader
andcss-visor
both took ~15 seconds to render page afteryarn start
. Subsequent edits to random CSS files were equally responsive in both setups.Premise
For the past 2 years I've been working on an extension for chrome devtools that aims to speed up development of React and Angular apps, by keeping a million moving parts organized (development, collaboration etc.) It's internals depend on sourcemaps and
create-react-app
has been my primary target for taking dev experience to the next level and without working sourcemaps the fruit will never reap, but I'm confident that it will :)