how to integrate rtl css in angular in a way that we can load style.css and style.rtl.css alternatively as we change lang from UI

Question

i want to generate css or scss for already existing code/project's custom css/scss as separate file and want to switch b/w normal and rtl css through UI interaction.

I'm using rtlcss node package and following this gist for generating css at build time.

Angular version could be any newer is better i.e. Angular 12+

I'm looking for some automated or smart way to do this, i could generate rtl css and append in already existing css file. and prepend [dir='rlt'] with each rule. but flaw in that approach as follow.

// style.css
.my-class {
  width: 200px;
  margin-left: 16px;
}

[dir='rtl'] .my-class {
  width: 200px; // flaw : property repeatation 
  margin-left: 0; // flaw : adding extra rule & its not neccessary *-left to have zero in every case.
  margin-right: 16px;
}