Add hot reloading

[clessg]

Hot reloading of CSS modules does not work out-of-the-box - module.hot.accept has to be used. Ideally, it's placed right by the component importing the CSS:

import React from 'react';
import './Button.css';

if (module.hot) {
  module.hot.accept('./Button.css', function () {
    require('./Button.css');
  });
}

export default function Button() {
  return <div styleName="root">Button</div>;
}

This is a pain to repeat for every single component. Fortunately, we can modify the AST to add it automatically.

[gajus]

Thank you @clessg for the addition. I really like the suggestions. However, given that this is non-webpack specific package, this needs to be configurable.

Could you update the PR to make this behaviour configurable using webpackHotModuleReloading option?

[tyler-dot-earth]

I did not have to add this to get hot reloading working in my own webpack 2 setup. Perhaps it's because I'm using react-hot-loader 3.0.0-beta.6? https://github.com/tsnieman/webpack2test/blob/master/package.json

[clessg]

@gajus Silly me. I forgot not everybody uses webpack yet. I'll update the PR asap.

@tsnieman Yeah, RHL 3 does, incidentally, cause CSS modules to be hot reloaded, though I'm not sure it's intentional. We could just tell people to use RHL, but it's been unstable for a long time, and is currently painful & time-consuming to set up. I've never successfully added RHL 3 to any of my projects - there's always bugs or unexpected behavior. props to you for trying (I make no apologies).

[gajus]

🥇

[gajus]

Please add a description of the configuration to https://github.com/gajus/babel-plugin-react-css-modules#configuration.

[clessg]

Ha, I literally just did that.

[clessg]

@gajus Before I head out, is there anything else that obviously needs fixed/changed?

[gajus]

@gajus Before I head out, is there anything else that obviously needs fixed/changed?

Not on the surface of it. I am going to pull the branch and test it out.

[clessg]

Sounds good. 👍

[gajus]

Thank you @clessg !