Webpack css duplicate

Question

I have webpack entry:

// main.js

import './main.css'

And css files:

// main.css

@import "./header.css";
@import "./footer.css";

// header.css

@import "./container.css";

// footer.css

@import "./container.css";

I am using the mini-css-extract plugin and getting container.css duplicate in output.css

but if i import styles from js file then everything works fine:

// main.js

import './header.css'
import './footer.css'

webpack splitChunks enabled:

splitChunks: {
    chunks: 'all',
    minSize: 1,
},