Created by: 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 - https://github.com/webpack-contrib/css-loader/issues/613#issuecomment-331754481
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 :)