Is it possible to use svelte loader to emit two separate css files (one legacy without css-custom-properties and one with css-custom-properties)?

[ampersand83]

Hi, we are using MiniCssExtractPlugin to to generate a separate bundle.css file.
As we make use of css-custom-properties that are not supported in legacy browsers like IE11 but need to support IE11, we have to generate a second legacy css file with fallbacks for the css-custom-properties. Herefore we want to use postcss-css-variables Plugin but haven't found a way to make our build emit those two css files. As we only have main.js as our entry point, MiniCssExtractPlugin can only emit one css file.
Is it possible with sevelte-loader to somehow generate those two css files?
Our current webpack.config.js (generating only one css file) looks likes this:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const preprocess = require('svelte-preprocess')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin')

const mode = process.env.NODE_ENV || 'development'
const prod = mode === 'production'

module.exports = {
    entry: {
        bundle: ['./src/main.js'],
    },
    devServer: {
        host: '0.0.0.0',
    },
    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte'),
            components: path.resolve(__dirname, 'src/components'),
            js: path.resolve(__dirname, 'src/js'),
            mocks: path.resolve(__dirname, 'src/mocks'),
        },
        extensions: ['.mjs', '.js', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main'],
    },
    output: {
        path: __dirname + '/public',
        filename: '[name].js',
        chunkFilename: '[name].[id].js',
    },
    module: {
        rules: [
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        preprocess: preprocess({
                            scss: {
                                data: `@import './src/styles/base/hr-mixins';
                                @import './src/styles/base/hr-breakpoints';`,
                            },
                            postcss: {
                                ident: 'postcss',
                                plugins: [require('autoprefixer')()],
                            },
                            /* options */
                        }),
                        emitCss: true,
                        hotReload: true,
                        dev: true,
                    },
                },
            },
            {
                test: /\.css$/,
                use: [
                    /**
                     * MiniCssExtractPlugin doesn't support HMR.
                     * For developing, use 'style-loader' instead.
                     * */
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'images',
                        name: '[name].[ext]',
                    },
                },
            },
        ],
    },
    mode,
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                '*.*',
                'icons/*',
                'images/*',
                '!index.html',
                '!global.css',
                '!bundle.css',
                '!bundle.js',
                '!favicon.png',
            ],
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        new SVGSpritemapPlugin('src/svg/*.svg', {
            output: {
                filename: 'icons/svgmap.min.svg',
                svgo: {
                    plugins: [
                        { removeStyleElement: true },
                        { removeTitle: true },
                        {
                            removeAttrs: {
                                attrs: ['*:fill:((?!^currentColor$).)*'],
                            },
                        },
                    ],
                },
            },
        }),
    ],
    devtool: prod ? false : 'source-map',
}

If I understand it correctly svelte-loader emits a temporary css file for each svelte component that is then bundled into one big css file from MiniCSSExtractPlugin. Where in that build could we integrate the PostCSS postcss-css-variables plugin to replace all occurences of css-custom-properties with static properties. At the end we want to have a separate legacy css file and a css file with the css-custom-properties.

[ampersand83]

Hm, I was wondering. Is my use case with having to generate two separate css files (one legacy without css custom properties and one with full css custom properties support) so special that nobody else had to find a solution for that? I really need a solution to that problem. A way to solve it could be by just not putting any style declarations into any of my svelte components. If I put all styles from the start of into separate scss/css files I could just use those as entrypoints in my webpack config. Sadly I would loose sveltes scoping and automatical removement of unused styles.
So I ask again, is there a better solution to achieve my requirements and stil can profit of sveltes scoping and unused style removement possibilities?

[trash-and-fire]

Try multiple configurations, one for modern browsers and one for older browsers. You can set up 2 different postcss-loader configurations and add to the second plugin postcss-custom-properties. Also you can generate es5 package with polyfills for older browsers using the second configuration.

[syvb]

@dummdidumm This should have the question label, and be closed as resolved.