SplitChunksPlugin-doesnt-play-with-postcss-imports

Bar.scss

.Bar {
    color: yellow;
}

Bar.tsx

import React from "react";

import "./Bar.scss";

export const Bar: React.FC = () => <i className="Bar">Bar</i>;

cssOnlyEntry.ts

import './Foo.scss';

Foo.scss

@import './Bar.scss';

.Foo {
    background-color: green;
}

Foo.tsx

import React from "react";
import { Bar } from "./Bar";

import "./Foo.scss";

export const Foo: React.FC = () => (
    <div className="Foo">
        <Bar />
    </div>
);

hydratedEntry.tsx

import React from 'react';
import { hydrate } from 'react-dom';

import { Foo } from './Foo';

const rootElement = document.getElementById('root');

hydrate(<Foo />, rootElement);

postcss.config.js

module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import')()
    ]
};

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');

module.exports = {
    externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
    },
    entry: {
        cssOnly: ["./cssOnlyEntry.ts"],
        hydrated: ["./hydratedEntry.tsx"]
    },
    output: {
        path: __dirname + "/dist",
        filename: '[name].js',
        chunkFilename: '[name].js',
    },
    resolve: {
        modules: [
            'node_modules',
        ],
        extensions: ['.ts', '.tsx']
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: ["ts-loader"]
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader"
                ]
            }
        ]
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    parser: safePostCssParser
                }
            })
        ],
        splitChunks: {
            cacheGroups: {
                default: false,
                components: {
                    test: /(Foo|Bar)/,
                    enforce: true,
                    chunks: "initial"
                }
            }
        }
    }
};