classes applyed to components changes with production build

[Exlord]

Bug, feature request, or proposal:

I am not sure if this is a bug or a mistake on my side!

What is the expected behavior?

components have the same classes in --prod build that they have in development enviroment

What is the current behavior?

classes on components are changed in production

Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?

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

Example

I had this styles for my image cropper

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

my local dev run has these classes : LyImageCropper-root-af cropper-ab but the prod run has these : af ab ?? what am I missing here?

https://stackoverflow.com/questions/64569216/customizing-alyle-ui-component-styles

[Enlcxx]

Class names are prefixed as a unique identifier and can change in both development and production mode. That means you can't use css files (be it css, scss, ...) to customize Alyle UI components.

There are other ways to customize Alyle UI components. You can add styles to themes or add styles to the component.

Styles must be added directly to a ts file:

import { STYLES as SLIDER_STYLES } from '@alyle/ui/slider';
import {
  STYLES as CROPPER_STYLES,
  LyImageCropper,
  ImgCropperConfig,
  ImgCropperEvent,
  ImgCropperErrorEvent
} from '@alyle/ui/image-cropper';

const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
  ref.renderStyleSheet(SLIDER_STYLES);
  ref.renderStyleSheet(CROPPER_STYLES);
  const slider = ref.selectorsOf(SLIDER_STYLES);
  const cropper = ref.selectorsOf(CROPPER_STYLES);

  return {
    root: lyl `{
      ${cropper.root} {
        max-width: 320px
        height: 320px
      }
      ${cropper.area} {
        // styles for cropper area
      }
    }`,
    sliderContainer: lyl `{
      position: relative
      ${slider.root} {
        position: absolute
        left: 0
        right: 0
        margin: auto
        top: -32px
      }
    }`,
    slider: lyl `{
      padding: 1em
    }`
  };
};

@Component({
  ...
  providers: [
    StyleRenderer
  ]
})
export class CropperDialog implements WithStyles, AfterViewInit {

  readonly classes = this.sRenderer.renderSheet(STYLES, 'root');

The second parameter of renderSheet is the class name that will be added to this component.

About Customization:

• https://alyle.io/customization/dynamic-styles
• https://alyle.io/customization/theming
• https://alyle.io/customization/theming-components

[Exlord]

Tnx for the explanation , one more question

  return {
    root: lyl `{
      ${cropper.root} {
        max-width: 320px
        height: 320px
      }
      ${cropper.area} {
        // styles for cropper area
      }
    }`,
    sliderContainer: lyl `{
      position: relative
      ${slider.root} {
        position: absolute
        left: 0
        right: 0
        margin: auto
        top: -32px
      }
    }`,
    slider: lyl `{
      padding: 1em
    }`
  };

where the keys in this object are coming from? sliderContainer, slider ? are they classnames?

[Enlcxx]

Yes, they are keys that can be created with any name to use in components, for example:

<div [className]="classes.sliderContainer">
<div [className]="classes.slider">

classes.sliderContainer returns a classname, you can also use it with [class]. [className] & [ngClass].

[ghost]

How can you do the same for a hover effect?

[Exlord]

How can you do the same for a hover effect?

I think it would be something like this but I am not sure and have not tested it.

  return {
    slider: lyl `{
      &:hover {
        
      }
    }`
  };

[Enlcxx]

@yamshrishi, @Exlord's example works, more here.

[ghost]

Thanks a lot!