Webpack mix is converting elements to classes

Question

I have a template with a h1 header that has the class h2.

<form class="product-info">
    <h1 class="h2">product title</h1>
</form>

In my sass file I have the product-info class defined with the element h2 in it, this is later on used in the template but not here yet. I want the title to use h2 class defined elsewere.

.product-info {
    h2 {
        font-size: rem-calc(14);
        font-weight: $font-weight-semibold;
        margin: rem-calc(0 0 6);
    }
    h3 {
        font-size: rem-calc(12);
        font-weight: $font-weight-semibold;
        margin: rem-calc(0 0 6);
    }
}

Somehow, Laravel mix manages to convert the code above into this.

.product-info h2, .product-info .h2 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
}
.product-info h3, .product-info .h3 {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
}

I am loosing my mind over this.

Webpack.mix.js contents

require('laravel-mix-clean');
require('laravel-mix-eslint');
let mix = require('laravel-mix');
let path = require('path');

const dir = {
    src: 'resources/',
    build: 'web/',
}

if (!mix.inProduction()) {
    mix.sourceMaps(false, 'source-map');
    mix.webpackConfig({
        stats: {
            children: true
        }
    });
}

mix.setPublicPath(dir.build);

mix.autoload({
    jquery: ['$', 'jQuery', 'window.jQuery'],
});

const cssConfig = {
    src: dir.src + 'scss/style.scss',
    build: dir.build + 'css/',
};

const jsConfig = {
    src: dir.src + 'js/main.js',
    build: dir.build + 'js/main.js',
};


/**************** JS task ****************/
mix.js(jsConfig.src, jsConfig.build);

/**************** CSS task ***************/
mix.sass(cssConfig.src, cssConfig.build);

mix.browserSync({
    proxy: 'site.test',
    open: false,
    files: [
        dir.build + 'js/main',
        dir.build + 'js/react',
        dir.build + 'css',
        'templates/**/*.twig',
    ],
});

I expect the css output to be as below

.product-info h2 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
}
.product-info h3 {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
}