HMR isn't triggered when changing CSS files included via @import

[mummybot]

When using any preprocessor, if I change a CSS file that is included via @import then HMR doesn't pick up that a file has changed. If I save the initial CSS file that was in the JS then I can see the changes in the included file.

header.css

@import "shared/core.css"; /* Changes to core.css won't be picked up until header.css  is saved. */

header {
/* Changes here will update via HMR as this file is included via JSX */

I have a basic project with a nested CSS file and folder structure. I have tried using PostCSS and many import plugins, as well as converting everything to SASS using node-sass. When I run fusebox for the first time, the CSS is correctly compiled. If I change a CSS file which is directly imported by the JS then HMR works as expected. If I modify a CSS file included via @import then HMR doesn't automatically update the page.

//fuse.js
const { FuseBox, WebIndexPlugin, CSSPlugin, BabelPlugin, CopyPlugin, PostCSSPlugin } = require("fuse-box");

const fuse = FuseBox.init({
    homeDir: "src",
    output: "dist/$name.js",
    cache: true,
    plugins: [
        [
        PostCSSPlugin([
            require("postcss-import")({
                path: ["src"]
            })
        ]),
        CSSPlugin()],
        BabelPlugin(),
        WebIndexPlugin({
            template: "src/index.html"
        })
    ]
});

fuse.dev({
    root: 'dist',
    port: 8080
});

fuse.bundle("vendor")
    .instructions(`~index.jsx`);

fuse.bundle("app")
    .instructions(`!>[index.jsx]`)
    .watch("src/**").hmr();

fuse.run();

FYI This is a problem for a lot of CSS @import libraries in Webpack as well. Webpack provides the functionality for library owners to addDependencyTo to pass the files to Webpack that should be watched.

webpack-contrib/postcss-loader#8
postcss/postcss-import#233

    //webpack.config.js
    var postcssImport = require('postcss-import');
    ...
    postcss: function(webpack) {
        return [
            postcssImport({ addDependencyTo: webpack }), // Must be first item in list
            precss,
            autoprefixer
        ];
    },

[nchanged]

hi @mummybot and you are using the latest beta right?

It happens because of this block:

fuse-box/src/plugins/stylesheet/CSSplugin.ts

Lines 135 to 138 in a312e98

	const lastFile = file.context.convertToFuseBoxPath(bundle.lastChangedFile);
	if (isStylesheetExtension(bundle.lastChangedFile) && lastFile === file.info.fuseBoxPath) {
	emitRequired = true;
	}

We should find a solution, if you have any ideas, just let me know

[nchanged]

Implemented in [email protected] for SassPlugin and PostCSS
http://fuse-box.org/plugins/postcss-plugin#paths-for-hmr

SassPlugin doesn't require any configuration, PostCSS would need it if you are planning on doing magical imports

[mummybot]

Hey guys, this is awesome (just revisiting this now after a project hiatus). Thanks very much!