fix(core): Disable HMR for CSS modules

[jonlow]

Description

CSS modules will not work correctly with style-loader when HMR is enabled (HMR was introduced in gatsby v2). For new styles to appear on a page, a full page refresh is required for css modules to work. Otherwise, an error is thrown. This PR disables HMR for css-modules as suggested by webpack-contrib/style-loader#320 so that saving a .module.scss file will refresh the page and show any new styles.

Here's a screencast showing the issue before the fix https://www.useloom.com/share/a1061fb2d4344942af1f9efa4870d965

Related Issues

#10316

[KyleAMathews]

This is modifying the sass rules? I assume you meant to modify all of the CSS module rules?

[jonlow]

@KyleAMathews I'm only modifying the SASS CSS modules (eg components.module.scss), since this code currently lives in gatsby-plugin-sass. I figured that anything specific to SASS should live in this plugin.

If we want to add this fix for regular CSS modules (no SASS), then shouldn't that fix go into the main Gatsby package? (maybe utils/webpack-utils.js)

[wardpeet]

@jonlow sorry for keeping you waiting, i'll be checking this today!

It would be really helpful if you do it for all cssmodules plugins like less, ...

[wardpeet]

I've tested this change and looks Great! I've also added hmr: false to all our flavors of cssmodules.

@jonlow 🥇 Thank you very much for taking this issue on! And We're really sorry that it took so long to actually look at this one.

[gatsbot]

Holy buckets, @jonlow — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!