Variables hot reloading

[franciscolourenco]

The variables seem to be updated, but only after restarting webpack dev server. postcss.config.js seems to be added as a loader dependency by default, which means that editing this file causes webpack to recompile. However the variable files imported in postcss.config.js don't. Is there a way to access the loader in postcss.config.js in order to call addDependency with the variable files?
Otherwise how is the reloading supposed to work?

[ai]

Hi. You need to open issue in postcss-loader.

[franciscolourenco]

@ai postcss-simple-vars docs mention variable hot reloading. Is it currently not supported?

[ai]

They are supported by postcss-loader. It reads a config. So I have no idea how to fix it in this plugin 🤷‍♂️

[franciscolourenco]

One way to do it would be to receive file(s) path(s) instead of an object. That way you could you could do loader.addDependency('filepath'); require('filepath'); automatically and it would work.

[ai]

Yeap. I will think about it on next weekend.

[philipbordallo]

For anyone still having this issue, it's solvable by using the plugins option of postcss-loader, which gives you access to the loader context.

Example loader definition

{
  loader: 'postcss-loader',
  options: {
    plugins: function(loader) {
      const colors = require.resolve('./colors.js');
      loader.addDependency(colors);
      delete require.cache[colors];

      return [
        simpleVars({
          variables: function() {
            return require(colors);
          },
        }),
      ];
    },
  },
}