Need Help Minimizing CSS within JavaScript Chunk

[Domeanor]

Issue Description:

Recently, I upgraded my project from webpack 4 to webpack 5, along with updating css-loader from version 0.28.11 to 6.8.1. In webpack version 5, the minimize option was removed in favor of using MiniCssExtractPlugin, CssMinimizerPlugin, and HTMLWebpackPlugin to inject styles into the HTML file.

However, my use case involves building only a JavaScript file and then uploading it to a CDN. From this CDN, the JavaScript file is injected into another React app. In this scenario, I need the CSS to be minimized within the JavaScript chunk itself.

Despite spending several days on this, I haven't been able to find a solution.

webpack config

const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
	mode: 'production',
	entry: ['./src/index.js'],
	optimization: {
		splitChunks: false,
		minimize: true,
		minimizer: [
			// For webpack@5 you can use the ... syntax to extend existing minimizers
			'...',
			new CssMinimizerPlugin(),
		],
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
				},
			},
			{
				test: /\.css$/,
				include: [path.resolve(__dirname, './src')],
				use: ['style-loader', 'css-loader', 'postcss-loader'],
			},
		],
	},
	resolve: {
		extensions: ['.js', '.jsx'],
	},
	devServer: {
		port: 9002,
	},
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './styles.css';

const App = () => {
	return (
		<div className={`container containercss`}>
			<h1>Hello, React with Webpack!!!</h1>
		</div>
	);
};

ReactDOM.render(<App />, document.getElementById('root'));

styles.css

.containercss {
  color: red,
}

div {
  background-color: yellow;
}

versions

"webpack": "^5.0.0",
"webpack-cli": "^5.0.0",
"css-loader": "^4.0.0",
"css-minimizer-webpack-plugin": "6.0.0",
"style-loader": "~3.3.4",

I am getting this bundle.js file where white space isn't removed

[replyre]

have you tried terser-webpack-plugin and css-minimizer-webpack-plugin ?

[Domeanor]

Yes, @replyre in the webpack configuration I shared, I've already added the terser-webpack-plugin and CssMinimizerPlugin. However, the issue persists despite their inclusion. Note that webpack 5 uses terser-webpack-plugin by default, as mentioned here https://webpack.js.org/plugins/css-minimizer-webpack-plugin/#getting-started

The problem arises because styles will be added as strings in the JavaScript bundle, and the Terser webpack plugin does not minify strings. Additionally, the css-minimizer-webpack-plugin skips files that are already minimized. ref link: https://github.com/webpack-contrib/css-minimizer-webpack-plugin/blob/ec4103e9b0609d79340979f9c7bf509e7791b891/src/index.js#L417

As a result, the CSS styles within the JavaScript bundle are not being properly minified.

[alexander-akait]

Please use cssnano as a plugin for postcss-loader, there is an issue to make it automatically webpack-contrib/css-minimizer-webpack-plugin#80, it is on our roadmap, feel free to feedback