How to get webpack minimizer to work when bundling css into js

I am trying to figure out webpack. I want to bundle a css and js file while also minimizing them at the same time. I am using optimize-css-assets-webpack-plugin and got it to work together with mini-css-extract-plugin. But, when bundling css into js with style-loader, the css is no longer minified. Does anyone have any ideas on what I can do to make this work?

Index js file:

import './styles.css';

// some js

Webpack config:

const path = require('path');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const bundle = {
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    'css-loader'
                ],
            },
        ],
    },
    optimization: {
        minimizer: [
            new OptimizeCss(),
            new TerserPlugin()
        ]
    },
    mode: 'production',
    watch: false
}

module.exports = bundle;

Edit: I am using webpack version 4.39.3