customizing Alyle-UI component styles

I am using this component https://alyle.io/components/image-cropper , everything was fine in local dev environment. BUT when we deployed the code to production with --prod build our custom styles stopped working ...

Version of @alyle/ui@: ^10.3.0

$ node_modules/.bin/ng --version

Angular CLI: 10.1.6
Node: 12.18.3
OS: win32 x64

Angular: 10.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.6
@angular-devkit/build-angular   0.1001.6
@angular-devkit/core            10.1.6
@angular-devkit/schematics      10.1.6
@angular/cdk                    10.2.4
@angular/cli                    10.1.6
@angular/material               10.2.4
@schematics/angular             10.1.6
@schematics/update              0.1001.6
rxjs                            6.6.3
typescript                      3.9.7

I copied most of the code from the sample in the page :

const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
  ref.renderStyleSheet(SLIDER_STYLES);
  const slider = ref.selectorsOf(SLIDER_STYLES);
  return {
    cropper        : lyl`{
      max-width: 238px
      height: 238px
    }`,
    sliderContainer: lyl`{
      position: relative
      ${slider.root} {
        margin: auto
        display : block
      }
    }`,
    slider         : lyl`{
      padding: 1em
    }`,
    cropResult     : lyl`{
      border-radius: 50%
    }`
  };
};

With this html

<div ly-dialog-content [lyPx]="0" class="custom-cropper">
  
  <div class="title-cropper">
    Crop Image and Upload
    <!-- <button *ngIf="ready" ly-button color="primary" (click)="dialogRef.close()">X</button> -->
    <button mat-raised-button *ngIf="ready" color="primary" class="container__close-icon close-icon" (click)="dialogRef.close()">
    </button>
  </div>

  <ly-img-cropper [withClass]="classes.cropper"
                  [config]="myConfig"
                  [(scale)]="scale"
                  (ready)="ready = true"
                  (cleaned)="ready = false"
                  (minScale)="minScale = $event"
                  (cropped)="onCropped($event)"
                  (loaded)="onLoaded($event)"
                  (error)="onError($event)"
  >
    <span>Drag and drop image</span>
  </ly-img-cropper>

  <div *ngIf="ready" [className]="classes.sliderContainer">
    <div [class]="classes.slider">
      <ly-slider
        [thumbVisible]="false"
        [min]="minScale"
        [max]="1"
        [(ngModel)]="scale"
        (input)="scale = $event.value"
        step="0.000001"></ly-slider>
    </div>
  </div>

</div>

I added the custom-cropper class so that my coworker can style the component as needed, this worked just fine in development environment, but after we deployed the code to production --prod this custom styles stopped working

For example my local dev run has these classes : LyImageCropper-root-af cropper-ab but the prod run has these : af ab ?? which is completely messing up the styles provided with .custom-cropper class.

There is nothing in the docs that help. I also created a issue in the githup repo https://github.com/A-l-y-l-e/Alyle-UI/issues/137

what am I missing here?