[Bug]: Empty CSS modules end up in bundle with v0.6.0

[ska-kialo]

System Info

System:
    OS: macOS 14.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 277.02 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 21.5.0 - ~/.nvm/versions/node/v21.5.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v21.5.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v21.5.0/bin/npm
Browsers:
    Chrome: 123.0.6312.59
    Edge: 113.0.1774.35
    Safari: 17.4
npmPackages:
    @rspack/cli: ^0.6.0 => 0.6.0
    @rspack/core: ^0.6.0 => 0.6.0
    @rspack/plugin-react-refresh: ^0.6.0 => 0.6.0

Details

We use rspack to bundle (and then extract) less files with our application. We don't use CSS Modules, i.e. our imports look just like import './Component.less';.

Up until v0.5.9 this resulted in these "modules" being empty (except for a use strict directive) in the bundle and they were tree shaken. But since v0.6.0 we get something like the following for every single less file in the minimized bundle which does add up to a few KB of dead code that are not tree shaken.

{
    // ...
    16897: function (e, t, n) {
        'use strict';
        n.r((e.exports = {}));
    }
    // ...
}

We're using less-loader and postcss-loader as follows and output.cssFilename and output.cssChunkFilename to load, transform and then extract these styles to separate files.
newTreeShaking was enabled in v0.5.9.

const lessLoader = {
    test: /\.less$/,
    type: 'css',
    use: [
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    ident: 'postcss',
                    plugins: [require('autoprefixer')(), require('cssnano')],
                },
            },
        },
        {
            loader: 'less-loader',
            options: {
                lessOptions: {
                    paths: [path.join(srcPath, 'css', 'app'), srcPath],
                    javascriptEnabled: true,
                    relativeUrls: true,
                },
            },
        },
    ],
};

Reproduce link

https://github.com/web-infra-dev/rspack-repro

Reproduce Steps

I can reproduce the modules not being empty using the repro template. However they aren't tree shaken in either version there.

1. In the config set mode: 'production' and experiments.rspackFuture.newTreeshaking: true.
2. Run pnpm build:rspack.

With v0.5.9 render.css becomes:

445: function (e) {},

With v0.6.0 it becomes (id adjusted for simplicity):

445: function (e, t, n) {
    'use strict';
    n.r((e.exports = {}));
},

[ska-kialo]

I managed to solve this by specifying sideEffects: false in the lessLoader rule

[JSerFeng]

We are about to align css feature with Webpack, at that time there won't be any js file per css

[ska-kialo]

Ah actually sideEffects: false doesn't work. With that set the CSS bundles just disappear.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!