Optimization flag breaks component css

[ghost]

🐞 Bug report

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

In development there is no problem, but in production the css of a particular class is not working entirely.

This component has to cover all the pages only on printing with a string passed as input, this string is rotated by 45°, grey, repeated.

There is no exception nor error signaled.

Sometime i think that part of the css is applied, something like the on @screen { display: none; }, but absolutely not the @media print part.

print-with-watermark.component.less:

@media screen {
   .footer {
       display: none;
   }

   .watermark {
      display: none;
   }
}

@media print {

   @page {
      margin: 10mm 5mm 15mm;
   }
   
   .watermark {
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      overflow: hidden;
      z-index: 99;
      width: 100vw;
      height: 100vh;
      opacity: 75%;
   }

   .watermark img {
      max-width: 100%;
   }

   .aLotOfMargin {
      margin: 70px 50px;
      color: rgb(233, 233, 233);
      font-size: 15px;
      pointer-events: none;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
   }

   .footer {
      position: fixed;
      bottom: 0;
      height: 2cm;
      width: 100%;
   }

   .footer img{
      position: fixed;
      bottom: 0;
      height: 30px;
      width: auto;
   }

}

print-with-watermark.component.html:

<div> 
   <div class="printButton">
      <button  icon="" 
               printSectionId="print-section" 
               printTitle="Print"  
               [useExistingCss]="true" 
               ngxPrint
      > Stampa </button> 
   </div>
   
   <div height="100vh" width="100vw" id="print-section" class="print-managed" > 
      <div class="printBody" height="80vh">
         <ng-content></ng-content>
      </div>

      <div class="watermark">
         <div *ngFor="let i of rows" class="p-grid p-jc-center">
            <div *ngFor="let j of columns" class="p-col-4 ">
               <div class="aLotOfMargin">{{ inputText }}</div>
            </div>
         </div>
      </div>

      <div class="footer">
         <img src="genericImage.jpeg" >
      </div>

   </div>

   <button *ngIf="showBottomButton"
      icon="" printSectionId="print-section" 
      printTitle="Print"  
      [useExistingCss]="true" ngxPrint
   > Stampa </button> 
</div>

print-with-watermark.component.ts:

import { Component, ElementRef, Input, ViewChild } from '@angular/core';

@Component({
  selector: 'app-print-with-watermark',
  templateUrl: './print-with-watermark.component.html',
  styleUrls: ['./print-with-watermark.component.less']
})
export class PrintWithWatermarkComponent {
  @ViewChild('watermark') el?: ElementRef;
  @Input() inputText?: string;
  rows?: Array<unknown>; 
  columns = new Array(3);
  showBottomButton = true;

  constructor() {
    const h = Math.floor(window.innerHeight/140);
    this.showBottomButton = (Math.floor(window.innerHeight/160) > 4);
    this.rows = new Array(h);
  }

}

🔬 Minimal Reproduction

i use primeng as UI library and there are some elements in this component, so it needs to be installed.

you can just copy the 3 files, add some content calling the component like:

<app-print-with-watermark [inputText]="random string">
   <span>random content</span>
</app-print-with-watermark>

And go with ng build --prod with

"... 
configurations": { 
        ....
         "production": { 
                   "optimization": true 
          } 
        .....
}...

in your angular.json

I'm sorry i don't know how to offer a ready to use example

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.2.4
Node: 12.21.0
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1102.4
@angular-devkit/core            11.2.4
@angular-devkit/schematics      11.2.4
@angular/cdk                    11.2.4
@angular/cli                    11.2.4
@schematics/angular             11.2.4
@schematics/update              0.1102.4
rxjs                            6.6.6
typescript                      4.1.5

Anything else relevant?

it happens in chrome and firefox, didn't try anything else

turning false the optimization flag on production resolves the problem,
it does the same in development configuration as well
(aot doesn't matter, i keep it true)

[alan-agius4]

Hi @ubaldiniTerre,

Thanks for opening this issue, however this is caused by cssnano/cssnano#957, however the fix hasn't been released yet.

As a workaround you 0.75 instead of 75% as opacity.

[ghost]

Hi @ubaldiniTerre,

Thanks for opening this issue, however this is caused by cssnano/cssnano#957, however the fix hasn't been released yet.

As a workaround you 0.75 instead of 75% as opacity.

thank you

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}