Webpack outputs build files that increase in size every iteration

[mrspence]

Heya!

Really useful package, has vastly improved performance on our websites with a little PHP magic ❤

I am running into an issue where the output files for the media queries increase in size every time Webpack Watch is triggered. The first pass done by Webpack works, but then further passes done with watching appear to append to the output files (even though the output filenames change).

Is this a chunk issue? It's likely something with my Webpack configuration and if that's the case do you have any advice?

Here's an approximate view of my config:

output: {
    path: outputFolderPath,
    filename: "[name].[hash].js",
    publicPath: "/media/",
},
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: path.resolve(rootFolder, "/media/"),
                    },
                },
                'css-loader',
                MediaQueryPlugin.loader,
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('postcss-import'),
                            require('postcss-nested'),
                            require('tailwindcss')(require(resourceFiles["configuration.js"])),
                            require('autoprefixer'),
                            require('cssnano')({ preset: 'default' }),
                        ],
                        minimize: true,
                    },
                },
            ],
        },
    ],
},

plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].[hash].css',
    }),
    
    new MediaQueryPlugin({
        include: /.+/,
        queries: (function(){
            
            var resolveTailwindConfig = require('tailwindcss/resolveConfig');
            var websiteTailwindConfig = require(resourceFiles["configuration.js"])
            var finalConfig = resolveTailwindConfig(websiteTailwindConfig);
            
            var queries = Object.keys(finalConfig.theme.screens).reduce((accum, screenKey) => {
                accum[`(min-width:${finalConfig.theme.screens[screenKey]})`] = screenKey;
                accum[`screen (min-width:${finalConfig.theme.screens[screenKey]})`] = screenKey;
                return accum;
            }, {});
            
            return queries;
        })(),
        groups: {
            responsive: /.+/,
        }
    }),
    
    //...
],

I don't have any chunk optimisations currently in place (already a speedy compilation and realtime load).

[SassNinja]

@mintymatt thanks for using my plugin

I've tried to reproduce your reported bug but without success: watch mode is working fine and doesn't cause duplicate extraction code

As I can see you building the queries config dynamically (using tailwind config)
Would you share an example output of that?

Apart from that a example CSS file would be helpful.

[philo23]

I've also seen this issue in a project I'm working on too, took me a while to figure out why my CSS was over 10MB!

I have a suspicion it's to do with the way this plugin and MiniCssExtractPlugin interact together, but I don't know enough about the internals of how webpack plugins work to be certain yet.

I'll try and reproduce this issue in a standalone repo that I can share, once I get a chance to.

[SassNinja]

@philo23 yes, it'll be really helpful if you provide a repo, codesandbox or something to reproduce the issue

[jdgrieco]

Hi @SassNinja

I'm facing similar problem.

Please, see https://gist.github.com/jdgrieco/addca0583b17bf2c98b609ba53c810f5 with sample files

When I run in dev mode (npm run dev) every time I modify _test.scss the compiled css is appended in dist/bundle-mobile.css

The content of dist/bundle-mobile.css for first run is:

@media (max-width:997px){html{background:green}.sas{top:10px}.abc{border-radius:1px}}

When I change border-radius, for example, in _test.scss:

@media (max-width: 997px) {
 .abc {
   border-radius: 0;
 }
}

the file becomes

@media (max-width:997px){html{background:green}.sas{top:10px}.abc{border-radius:1px}}
@media (max-width:997px){html{background:green}.sas{top:10px}.abc{border-radius:0}}

What's wrong? So what am I missing?

[meiyasan]

@SassNinja same here