Feature Request: Webpack Hot Module Replacement to inject external css <link href=> instead of inline <style></style> #599

• I'm submitting a ...
  [X ] feature request
• What is the current behavior?

Currently Webpack HMR appends inlined style tags to the head in the form of <style></style> tags. This makes it difficult to view which component each css class belongs to, because the CSS inspector pane normally says "buttons.scss" when using with sourcemaps.

Now it just says <style>...</style> in the right hand pane.

When dealing with many css classes, its very difficult to know which component to go into to begin styling without it telling me which component's class is active.

• What is the motivation / use case for changing the behavior?

Here is what most CSS developers are used to and expect:

It says frameworks-10c1164.css is the source of the class, therefore I know to go to that file/component to make changes.

It would be ideal if webpack HMR preserved this standard CSS workflow while still enabling HMR. A simple solution is to simply appent external styles to the head such as and then swap out that tag when HMR sends an update.

Is it feasible?