Add support for CSS Sourcemaps without FOUC

[zikaari]

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 by HTMLWebpackPlugin and once loaded, CSS will be HMR'd automatically by HMR code added to css-loader's output.

Performance

200 CSS files were imported in App.js , style-loader and css-visor both took ~15 seconds to render page after yarn 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 :)

[gaearon]

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.

[zikaari]

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.

[Timer]

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. 😄

[zikaari]

You guys are just amazing.

https://twitter.com/neek_sandhu/status/925215161748615168

[stale]

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.

[stale]

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.