Css url() uses two periods before file extension even though it has one

I've noticed that sometimes the css url() has two periods(..) before the file extensions. It still works but doesn't make sense to me. I've seen it a lot of times but never figured out why. Is it because of the @mixin? Is it because of the relative path in the css? Does anyone know why it happens?

The filename does NOT contain two dots. Im seeing this on ElectronJS with React.

In my case I use it like this:

<div class="text"></div>

@mixin file-icon($path) {
    background-image: url($path);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

.text {
    @include file-icon('./text.svg');
}

My webpack config is this:

{
    entry: {...},
    output: {...},
    plugins: [
       ...,
       new MiniCssExtractPlugin({
            filename: 'styles.[contenthash].css',
            ignoreOrder: true,
            chunkFilename: '[id].[contenthash].css',
        }),
    ],
    module: {
        rules: [{
            test: /\.(js|jsx|ts|tsx)?$/,
            use: {
                loader: 'babel-loader',
            },
        }, {
            test: /\.css$/,
            exclude: /\.lazy\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
            ],
        }, {
            test: /\.lazy\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        injectType: 'lazyStyleTag',
                    },
                },
                'css-loader',
            ],
        }, {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader',
            ],
        }, {
            test: /\.mp3$/,
            type: 'asset/inline',
        }, {
            test: /\.(svg|gif)$/,
            type: 'asset/resource',
        }, {
            test: /\.(eot|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            type: 'asset/resource',
        }],
    },
    node: {
        __filename: false,
        __dirname: false,
    },
    target: 'electron-renderer',
    devServer: {
        port: WEBSERVER_PORT,
    },
}

The weird part is that it's not a UI thing when inspecting css. When I use getComputedStyle(element).getPropertyValue('background-image') the returning string includes the two periods.