Generate CSS browser prefixes in separately file

Question

I'm trying to generate in Webpack two separate css sheets: style.css and style-prefixes.css with prefixes only. For now, it generate one file with all styles and prefixes. My loader in webpack:

scss = {
test: /\.scss$/,
use: [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: '../'
        }
    },
    { loader: "css-loader", options: {} },
    {
        loader: "postcss-loader",
        options: {
            ident: 'postcss',
            sourceMap: true,
            plugins: [
                require('autoprefixer')({
                    'browsers': ['> 1%', 'last 2 versions']
                }),
                require('cssnano')({
                    zindex: false
                })
            ]
        }
    },
    { loader: "sass-loader", options: {} }
]

I will appreciate any help.

Answer 1

You will need to create a Webpack plugin which listens on the emit hook, and runs over css assets, to generate a separate prefixed css.

You can take an inspiration from this RTLCSS plugin which generates "RTL" version of the css assets.

You will need to create a postcss plugin (which will be applied instead of rtlcss plugin) which extracts the vendor prefixes. In order to