Vue.js production build has different generated CSS style

After building my project for production (build) certain elements have a different style (not present when using serve)

Details:

I'm using both CoreUI Pro 3 (Vue 2) and BootstrapVue 2.21.2 which both use bootstrap 4 (but customized).

The problem is form inputs' valid or invalid state icon is misaligned in production but fine in development. So .form-control with .is-valid for example have the wrong background-position.

In development two styles are generated that are equivalent (top one is being used).

html:not([dir="rtl"]) .was-validated .form-control:valid, html:not([dir="rtl"]) .form-control.is-valid {
    background-position: center right calc(0.375em + 0.1875rem);
}
.was-validated .form-control:invalid, .was-validated .form-control:valid, .form-control.is-invalid, .form-control.is-valid {
    background-position: right calc(0.375em + 0.1875rem) center;
}

In production two styles are also generated with the top one being used - which is the issue. Forcing it to use the second one fixes it.

html:not([dir=rtl]) .form-control.is-valid, html:not([dir=rtl]) .was-validated .form-control:valid {
    background-position: 100% calc(.375em + .1875rem);
}
.form-control.is-invalid, .form-control.is-valid, .was-validated .form-control:invalid, .was-validated .form-control:valid {
    background-position: right calc(.375em + .1875rem) center;
}

So is there a nice way of making it use the correct style or figuring out the root of the issue? There are several hacky ways but I'm not sure which one to purse first.

I have tried updating all the various sass loaders and webpack but nothing has changed. I also tried duplicating the import files for Core UI and modifying the order of import of the form mixin but that didn't help (I'm also not a sass expert). And moving @mixin form-validation-state($state, $color, $icon) around didn't seem to help.

The specific import order in my styles.scss (the opposite order doesn't work):

@import "~@coreui/coreui-pro/scss/coreui";
@import '~bootstrap-vue/src/index.scss';

I know there could be a lot of relevant files but these should be a good start. Can provide more details if needed.