mini-css-extract-plugin does not load css if it is not declared via dynamic import

Question

I have very basic webpack + mini-css-extract-plugin project (you can found it here).

Here is webpack.config.js:

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    resolve: {
        modules: [path.resolve(process.cwd(), 'node_modules')]
    },

    module: {
        rules: [
            // file loader allows to copy file to the build folder and form proper url
            // usually images are used from css files, see css loader below
            {
                test: /\.png$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: "_assets/[name].[ext]"
                        }
                    }
                ]
            },
            // css files are processed to copy any dependent resources like images
            // then they copied to the build folder and inserted via link tag
            {
                test: /\.css$/i,
                sideEffects: true,
                exclude: /node_modules/,
                // for tests we use simplified raw-loader for css files
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // public path has changed so url(...) inside css files use relative pathes
                            // like: url(../_assets/image.png) instead of absolute urls
                            publicPath: '../',
                        }
                    },
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        // plugin helps to properly process css files which are imported from the source code
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '_assets/[name].css',
            chunkFilename: '_assets/[id].css'
        })
    ],
    entry: {
        'test': "./src/test"
    },
    output: {
        path: path.resolve(process.cwd(), `public`),
        publicPath: '',
        filename: '[name].js',
        chunkFilename: '_chunks/chunk.[name].js'
    }
};

main entry file test.js:

import './css/testCss.css';

console.log('Loaded');

When i run webpack build i got the following output structure:

/
|-test.js
|-_assets/
| |-test.css

When i include this js bundle into html i would expect that test.js bundle will load test.css file dynamically but this is not the case - js bundle works ok, but css file is not loaded at all.

It is only loaded when i modify source of the test.js like so:

import('./css/testCss.css');  // <--------- NOTE: dynamic import here

console.log('Loaded');

in this case after webpack build i got the following output:

/
|-test.js
|-_assets/
| |-0.css
|-_chunks/
| |-chunk.0.js

and when i load this js bundle in html - it loads both chink.0.js and 0.css

MAIN QUESTION: Is dynamic import the only correct way to include css into my js files via mini-css-extract-plugin?

Because in documentation they say yo use normal static import like import "./test.css"

my environement info:

node version: v14.12.0
webpack version: 4.44.1 (also tested on 5.2.0)
mini-css-extract-plugin version 1.1.2