Laravel webpack mix remove CSS variables after compiling

I have this .scss file in my Laravel project:

:root {
    background-color: #bada55;
    #{'--bada-boom'}: #bada55;
    --#{bada-bumm}: pink;
}

I expect this result:

:root {
    background-color: #bada55;
    --bada-boom: #bada55;
    --bada-bumm: pink;
}

But I get this:

:root {
  background-color: #bada55;
}

I have this webpack.mix.js:

const mix = require('laravel-mix');
const fs = require('fs');
const webpack = require('webpack');
const domain = process.env.APP_URL.replace(/https?:\/\//, '');
const mixPath = domain.replace(/\./g, '_');

if (mix.inProduction()) {
    mix.version();
}

mix.js('resources/' + domain + '/js/app.js', 'public/' + mixPath + '/js')
    .vue()
    .sass('resources/' + domain + '/css/app.scss', 'public/' + mixPath + '/css')
    .options({
        postCss: [
            require('postcss-css-variables')()
        ]
    })
    .copyDirectory('resources/' + domain + '/img/', 'public/' + mixPath + '/img');

mix.webpackConfig({
    plugins: [
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false,
        }),
    ],
});

I did'nt found any refrence in documentation for solve this issue and I'm not sure from where coming this issue. Is it a webpack, post-css or any other tool issue or bug? Or I just misconfigured something?

Any idea?