[Bug]: Cannot build under experiments.css = false with CssExtractRspackPlugin

[WeizhouRen]

System Info

System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1
Memory: 174.28 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
Browsers:
Chrome: 124.0.6367.79
Safari: 17.0
npmPackages:
@rspack/cli: ^0.6.1 => 0.6.2
@rspack/core: ^0.6.1 => 0.6.2

Details

Hi there, I'm migrating from Webpack 4 to Rspack, hoping to extract .css into separate files, the config can be processed smoothly in development mode, but got stuck in production mode.
In production mode, the compilation process hangs indefinitely without producing any output or errors under experiments.css is false while also utilizing the CssExtractRspackPlugin.

Troubleshooting Attempts:
Setting experiments.css to true also mitigates the issue, but will get warning :
WARNING in ⚠ You can't use experiments.css and css-extract-rspack-plugin together, please set experiments.css to false
and css files are not extracted successfully.

const baseConfig = {
  mode: env,
  entry: resolve('./src/index.tsx'),
  module: {
    rules: [
      {
        test: /\.jsx?|tsx?$/,
        exclude: /[\\/]node_modules[\\/]/,
        loader: 'babel-loader',
      },
      isProd ? {
        test: /\.less$/,
        use: [
          rspack.CssExtractRspackPlugin.loader,
          'css-loader',
          {
            loader: 'less-loader',
            },
          },
        ],
      } : {
        test: /\.less$/,
        type: 'css',
        use: [
          {
            loader: 'less-loader',
            },
          },
        ],
      },
      isProd ? {
        test: /\.css$/,
        use: [
          rspack.CssExtractRspackPlugin.loader,
          'css-loader',
        ],
      } : {
        test: /\.css$/,
        type: 'css',
      },
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: resolve('./dist'),
    chunkFilename: '[name].chunk.js',
    publicPath: '/',
    libraryTarget: 'umd',
  },
  optimization: {
    minimize: isProd,
    minimizer: [
      isProd && new rspack.SwcCssMinimizerRspackPlugin(),
      isProd && new rspack.SwcJsMinimizerRspackPlugin({
        extractComments: false,
        compress: {
          drop_console: true,
        },
        format: {
          comments: false,
        },
      }),
    ].filter(Boolean),
    sideEffects: false,
    usedExports: true,
    chunkIds: 'deterministic',
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.(css|less)$/,
          reuseExistingChunk: true,
        },
        vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    !isProd && new rspack.HtmlRspackPlugin({
      template: resolve('./public/index.html'),
    }),
    isProd && new rspack.CssExtractRspackPlugin({
      filename: 'css/[name].css',
    }),
    new rspack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(env),
      },
    }),
  ].filter(Boolean),
  experiments: {
    css: !isProd, // should be closed in production mode
    rspackFuture: {
      newTreeshaking: true,
    },
  },
  devtool: !isProd ? 'inline-source-map' : false,
  ignoreWarnings: [/Conflicting order/, /\'~\' is deprecated/],
};

module.exports = isProd ? baseConfig : {
  ...baseConfig,
  devServer: {
    // ...
  },
};

Reproduce link

No response

Reproduce Steps

Set the above code into rspack.config.js in project with react + less, then start.

[xc2]

sry but i failed to reproduce the issue with the configuration you provided.

i have tried 0.6.2, 0.6.3, building less from antd@4, production mode.

any luck to provide a reproduce repository?

if not, could you try to comment out less/css importing statement one by one to find out which files caused the issue?

[github-actions]

Hello @WeizhouRen, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

[ScriptedAlchemy]

@WeizhouRen please provide a repo

[SergeyKrasnolobov]

Have the same issue. When experiments.css = false and rspack.CssExtractRspackPlugin i get a hung process that overclocks my m2 processor so that I hear the sound of a fan lol.
My config for reproduction

 {
   name: 'modern',
    entry: {
        main: {
            import: [
                path.join(process.cwd(), 'src/index.client')
            ]
        }
    },
    output: {
        chunkFilename: '[name].[contenthash].js',
        clean: true,
        crossOriginLoading: 'anonymous',
        filename: '[name].[contenthash].js',
        hashDigestLength: 16,
        path: getOutputPath(process.cwd()),
        publicPath: '/mstatic/build/modern/'
    },
    mode: production ? 'production' : 'development',
    target: ['web', 'es5'],
    resolve: {
        extensions: ['...', '.ts', '.tsx', '.js'],
        alias: {
            '@components': path.resolve(__dirname, './src/components/'),
            '@modules': path.resolve(__dirname, './src/modules/'),
            '@pages': path.resolve(__dirname, './src/pages/'),
            '@utils': path.resolve(__dirname, './src/utils/'),
            '@ui': path.resolve(__dirname, './src/ui/'),
            '@plugins': path.resolve(__dirname, './src/plugins/'),
            '@constants': path.resolve(__dirname, './src/constants/'),
            '@models': path.resolve(__dirname, './src/models/'),
            '@sentry-internal': false, 
            '@sentry/replay': false, 
            '@loadable/component': path.resolve(__dirname, './src/lib/loadable/component'),
            '@loadable/server': path.resolve(__dirname, './src/lib/loadable/server'),
            'node-fetch': false,
            react: path.resolve(__dirname, './node_modules/react/'),
            'react-dom': path.resolve(__dirname, './node_modules/react-dom/'),
            'prop-types': path.resolve(__dirname, './node_modules/prop-types'),
            '@swc/helpers': path.resolve(
                 require.resolve('@swc/helpers/package.json'))
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'builtin:swc-loader',
                    options: {
                        sourceMap: true,

                        jsc: {
                            parser: {
                                syntax: 'ecmascript',
                                jsx: true
                            },
                            transform: {
                                react: {
                                    pragma: 'React.createElement',
                                    pragmaFrag: 'React.Fragment',
                                    runtime: 'classic',
                                    development: !production,
                                    refresh: true
                                }
                            }
                        }

                    }
                },
                'source-map-loader'
                ],
                type: 'javascript/auto'

            },
            {
                test: /\.tsx?$/,
                use: [{
                    loader: 'builtin:swc-loader',
                    options: {
                        sourceMap: true,
                        jsc: {
                            parser: {
                                syntax: 'typescript',
                                tsx: true
                            },
                            transform: {
                                react: {
                                    pragma: 'React.createElement',
                                    pragmaFrag: 'React.Fragment',
                                    runtime: 'classic',
                                    development: !production,
                                    refresh: true
                                }
                            }
                        }

                    }
                },
                'source-map-loader'
                ],
                type: 'javascript/auto'
            },
            {
                test: /\.css$/i,
                use: [
                    rspack.CssExtractRspackPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentContext: process.cwd(),
                                exportOnlyLocals: true,
                                namedExport: false,
                                localIdentName: production ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]'
                            }
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: ({ resourcePath }) => {
                               
                                const isUiKit = /@myto\/(core|mobile-components|web-components)/.test(resourcePath);
                                const common = [['autoprefixer', {
                                    env: 'modern'
                                }], ['postcss-calc', {
                                    mediaQueries: true,
                                    selectors: true
                                }]];

                                if (isUiKit) {
                                    return {
                                        plugins: common
                                    };
                                }

                                return {
                                    plugins: [
                                        ...common,
                                        ['postcss-custom-properties', {
                                            importFrom: [{
                                                customProperties: generateFlatten(theme, '--theme')
                                            }],
                                            preserve: false,
                                            disableDeprecationNotice: true
                                        }]

                                    ]
                                };
                            }
                        }
                    }]
            },

            {
                test: /\.(png|jpg|gif|webp|svg|woff|woff2|eot|ttf)$/,
                type: 'asset/resource'
            }
        ]
    },
    devServer: {
        client: {
            logging: 'error',
            overlay: false
        },
        server: {
            type: 'https',
            options: {
                key: fs.readFileSync('./server/cert/server.key'),
                cert: fs.readFileSync('./server/cert/server.crt')
            }
        },
        host: 'localhost',
        port: 3002,
        hot: false,
        historyApiFallback: true
    },
    plugins: [
        new rspack.ProgressPlugin({
            prefix: 'Rspack-client'
        }),
        production &&
        new rspack.SourceMapDevToolPlugin({
            append: false,
            module: false,
            filename: path.relative(
                getOutputPath(''),
                `${getPrivatePath('')}/sourcemaps/[file].map`
            )
        }),
        new LoadablePlugin({
            outputAsset: false,
            writeToDisk: {
                filename: path.join(__dirname, `private/modern`)
            }
        }),
        new CSSOWebpackPlugin({
            comments: false
        }),
        /*
        new RspackManifestPlugin({
            writeToFileEmit: true,
            fileName: `${getPrivatePath(process.cwd())}/manifest.json`
        }),
        */
        new rspack.ProvidePlugin({
            process: 'process/browser'
        }),
        new rspack.DefinePlugin(projectClientDefines),
        new rspack.CssExtractRspackPlugin()
    ].filter(Boolean),
    experiments: {
        css: false
    }

[ScriptedAlchemy]

Have the same issue. When experiments.css = false and rspack.CssExtractRspackPlugin i get a hung process that overclocks my m2 processor so that I hear the sound of a fan lol.

My config for reproduction

 {

   name: 'modern',

    entry: {

        main: {

            import: [

                path.join(process.cwd(), 'src/index.client')

            ]

        }

    },

    output: {

        chunkFilename: '[name].[contenthash].js',

        clean: true,

        crossOriginLoading: 'anonymous',

        filename: '[name].[contenthash].js',

        hashDigestLength: 16,

        path: getOutputPath(process.cwd()),

        publicPath: '/mstatic/build/modern/'

    },

    mode: production ? 'production' : 'development',

    target: ['web', 'es5'],

    resolve: {

        extensions: ['...', '.ts', '.tsx', '.js'],

        alias: {

            '@components': path.resolve(__dirname, './src/components/'),

            '@modules': path.resolve(__dirname, './src/modules/'),

            '@pages': path.resolve(__dirname, './src/pages/'),

            '@utils': path.resolve(__dirname, './src/utils/'),

            '@ui': path.resolve(__dirname, './src/ui/'),

            '@plugins': path.resolve(__dirname, './src/plugins/'),

            '@constants': path.resolve(__dirname, './src/constants/'),

            '@models': path.resolve(__dirname, './src/models/'),

            '@sentry-internal': false, 

            '@sentry/replay': false, 

            '@loadable/component': path.resolve(__dirname, './src/lib/loadable/component'),

            '@loadable/server': path.resolve(__dirname, './src/lib/loadable/server'),

            'node-fetch': false,

            react: path.resolve(__dirname, './node_modules/react/'),

            'react-dom': path.resolve(__dirname, './node_modules/react-dom/'),

            'prop-types': path.resolve(__dirname, './node_modules/prop-types'),

            '@swc/helpers': path.resolve(

                 require.resolve('@swc/helpers/package.json'))

        }

    },

    module: {

        rules: [

            {

                test: /\.js$/,

                use: [{

                    loader: 'builtin:swc-loader',

                    options: {

                        sourceMap: true,



                        jsc: {

                            parser: {

                                syntax: 'ecmascript',

                                jsx: true

                            },

                            transform: {

                                react: {

                                    pragma: 'React.createElement',

                                    pragmaFrag: 'React.Fragment',

                                    runtime: 'classic',

                                    development: !production,

                                    refresh: true

                                }

                            }

                        }



                    }

                },

                'source-map-loader'

                ],

                type: 'javascript/auto'



            },

            {

                test: /\.tsx?$/,

                use: [{

                    loader: 'builtin:swc-loader',

                    options: {

                        sourceMap: true,

                        jsc: {

                            parser: {

                                syntax: 'typescript',

                                tsx: true

                            },

                            transform: {

                                react: {

                                    pragma: 'React.createElement',

                                    pragmaFrag: 'React.Fragment',

                                    runtime: 'classic',

                                    development: !production,

                                    refresh: true

                                }

                            }

                        }



                    }

                },

                'source-map-loader'

                ],

                type: 'javascript/auto'

            },

            {

                test: /\.css$/i,

                use: [

                    rspack.CssExtractRspackPlugin.loader,

                    {

                        loader: 'css-loader',

                        options: {

                            modules: {

                                localIdentContext: process.cwd(),

                                exportOnlyLocals: true,

                                namedExport: false,

                                localIdentName: production ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]'

                            }

                        }

                    }, {

                        loader: 'postcss-loader',

                        options: {

                            postcssOptions: ({ resourcePath }) => {

                               

                                const isUiKit = /@myto\/(core|mobile-components|web-components)/.test(resourcePath);

                                const common = [['autoprefixer', {

                                    env: 'modern'

                                }], ['postcss-calc', {

                                    mediaQueries: true,

                                    selectors: true

                                }]];



                                if (isUiKit) {

                                    return {

                                        plugins: common

                                    };

                                }



                                return {

                                    plugins: [

                                        ...common,

                                        ['postcss-custom-properties', {

                                            importFrom: [{

                                                customProperties: generateFlatten(theme, '--theme')

                                            }],

                                            preserve: false,

                                            disableDeprecationNotice: true

                                        }]



                                    ]

                                };

                            }

                        }

                    }]

            },



            {

                test: /\.(png|jpg|gif|webp|svg|woff|woff2|eot|ttf)$/,

                type: 'asset/resource'

            }

        ]

    },

    devServer: {

        client: {

            logging: 'error',

            overlay: false

        },

        server: {

            type: 'https',

            options: {

                key: fs.readFileSync('./server/cert/server.key'),

                cert: fs.readFileSync('./server/cert/server.crt')

            }

        },

        host: 'localhost',

        port: 3002,

        hot: false,

        historyApiFallback: true

    },

    plugins: [

        new rspack.ProgressPlugin({

            prefix: 'Rspack-client'

        }),

        production &&

        new rspack.SourceMapDevToolPlugin({

            append: false,

            module: false,

            filename: path.relative(

                getOutputPath(''),

                `${getPrivatePath('')}/sourcemaps/[file].map`

            )

        }),

        new LoadablePlugin({

            outputAsset: false,

            writeToDisk: {

                filename: path.join(__dirname, `private/modern`)

            }

        }),

        new CSSOWebpackPlugin({

            comments: false

        }),

        /*

        new RspackManifestPlugin({

            writeToFileEmit: true,

            fileName: `${getPrivatePath(process.cwd())}/manifest.json`

        }),

        */

        new rspack.ProvidePlugin({

            process: 'process/browser'

        }),

        new rspack.DefinePlugin(projectClientDefines),

        new rspack.CssExtractRspackPlugin()

    ].filter(Boolean),

    experiments: {

        css: false

    }

Without a repository we cannot see the problem.

[huhuaaa]

I upgraded rspack to version 0.6.5 and this problem was solved. I guess the latest version may have solved this bug.