2nd build after adding new scss file doesn't refresh css

[agentschmitt]

Steps to reproduce:

• configure two folders, with scss files inside as webpack modules: "default" and "custom"
• build the css bundle with hard-source-webpack-plugin
• add a scss file to "custom" module folder, with same name as existing file in "default" module folder
  (the scss file is imported with ~filename in the root scss file, to make webpack resolves this)
• build the css bundle with hard-source-webpack-plugin
  -> the new scss file is ignored and no new css is generated
  (cleaning the cache of hard-source-webpack-plugin before resolves the problem)

webpack.config:

var path = require('path');
var fs = require('fs');
var webpack = require('webpack');

var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function(env) {
    var config = {
        entry: {
            style: './main.scss'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        resolve: {
            extensions: [
                '.scss', '.css'
            ],
            modules: [
                path.resolve(__dirname, 'custom'),                
                path.resolve(__dirname),
                "node_modules"
            ]
        },
        module: {
            rules: [
            {
                test: /\.(scss)$/,
                loader: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader', options: { sourceMap: true } },
                        { loader: 'sass-loader', options: { sourceMap: true } },
                    ],
                    fallback: 'style-loader'
                })
            }]
        },
        plugins: [
            new HardSourceWebpackPlugin(),
            new ExtractTextPlugin({
                filename: '[name].css',
                allChunks: true
            })
        ]
    };

    return config;
}

main.scss
@import "~body";

body.scss

body {
    background-color:red;
}

custom\body.scss

body {
    background-color:green;
}

[stereokai]

duplicate of #301

[mzgoddard]

@stereokai I don't think this is a duplicate of #301. Looks like they differ on webpack version and extract plugin used. #301's cause was needing to properly handle the CssDependency introduced by mini-css-extract-plugin.

This one looks like an issue with hard-source's handling of its enhanced-resolver cache. It doesn't seem to be seeing the new version of body.css that is higher in the resolve order. hard-source tries to handle that. It saves the recorded attempted paths. I'd figure this means custom/body.scss isn't being attempted or recorded by enhanced-resolver. If it was, seeing that exist hard-source would invalidate the old resolution. Deleting body.scss hard-source will invalidate the old resolution as well.

This issue may be compounded by webpack's unsafe cache which does not notice these cases and opts fully to not notice changes instead depending on the user to restart webpack so the cache runs with a new cache. (hard-source doesn't save this cache, so it should be empty every run of webpack, but it does not empty on rebuilds in webpack-dev-server for example).

[stereokai]

I'm sorry, I missed these facts.

What a spaghetti of challenges. isn't EnhancedResolverCache introduced in the latest release though? This issue is from March

[mzgoddard]

I know right. The invalidations used to be more connected in hard-source. 0.6 helped disconnect those a bunch. (And 0.5's plugins helped make 0.6 possible)

All of the Caches in 0.7 existed in an earlier form in 0.6 and most of them even earlier in other versions. 0.7 is where I've been able to break them out into their own classes and files.

EnhancedResolverCache was added in 0.4. The change log referred to it as the Low level resolution cache.

[mzgoddard]

Heh. You can see a bit where the 0.7 Caches came from. index.js is 2084 lines long in 0.6.9 and 536 in 0.7.0-beta.0. The Caches in 0.7.0-beta.0 add up to 1640 lines.

[mzgoddard]

Ah. This sounds like an issue with NormalModule's fileDependencies. I don't think webpack itself would handle this case unless body.scss was delete or changed (webpack core relies on timestamps). If you just added a file in the resolver paths, it wouldn't affect the other timestamps so webpack core wouldn't rebuild. Similarly hard-source doesn't see the change in the module because it and webpack core cannot see the connection between fileDependencies and resolve calls.

hard-source supports adding a new module that should replace another module at a different file path. It does not support that module depending on an additional file that is replaced by another file appearing earlier in the resolver configuration.

This will need some thought to figure out how we can support it.

[stereokai]

Heh. You can see a bit where the 0.7 Caches came from. index.js is 2084 lines long in 0.6.9 and 536 in 0.7.0-beta.0. The Caches in 0.7.0-beta.0 add up to 1640 lines.

Now that's what I'd call a refactor!