bug: angular 11.2.11, styles being reordered when doing a production build

[xreq403]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Dependencies

"dependencies": {
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@capacitor/android": "^2.4.7",
    "@capacitor/core": "2.4.7",
    "@ionic/angular": "^5.5.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
}

Current behavior:
ion-padding-start and ion-padding-end have no effect on a new app proyect angular based.

Steps to reproduce:

1. Create new app ionic start myApp tabs
2. Choose Angular.
3. Insert a div with ionic class on tab1 page.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <div class="ion-padding-start ion-padding-end">Test</div>

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

4. run angular compilation script: ng build --prod
5. serve generated www folder with an http-server .
6. inspect the div element. There's no padding.

I think de @supports anotation used by padding.css is not working.

.ion-padding-start {
  --padding-start: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-start {
    padding-left: unset;
    -webkit-padding-start: var(--ion-padding, 16px);
    padding-inline-start: var(--ion-padding, 16px);
  }
}

The file is imported by global.scss.

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
...

Ionic info:

Ionic:

   Ionic CLI                     : 6.14.1 (C:\Users\etorres\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.6
   @angular-devkit/build-angular : 0.1102.11
   @angular-devkit/schematics    : 11.2.11
   @angular/cli                  : 11.2.11
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v14.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 7.9.0
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. This looks to be a problem in Angular 11.2.11. Our padding code is written like this:

.ion-padding-start {
  padding-left: unset;
  padding-inline-start: var(--ion-padding, 16px);
}

When you run a production build in Angular 11.2.11, the CSS is rewritten as the following:

.ion-padding-start {
  padding-inline-start: var(--ion-padding, 16px);
  padding-left: unset;
}

This reordering is what is causing the issue you are seeing. I have filed an issue with the Angular team: angular/angular-cli#20693

[hussainarthuna]

Having the same issue with my production builds. I Hope Angular fix it ASAP as we are waiting to release a new version.

[stephanevallejo]

+1

[hussainarthuna]

The issue is fixed by Angular. Please update Angular to the latest version.

[stephanevallejo]

Hello @hussainarthuna

Ionic:
   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1102.11
   @angular-devkit/schematics    : 11.2.12
   @angular/cli                  : 11.2.12
   @ionic/angular-toolkit        : 3.1.1

Angular CLI: 11.2.12
Node: 12.18.3
OS: darwin x64

Angular: 11.2.13
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.3
@angular-devkit/build-angular   0.1102.11
@angular-devkit/core            11.2.12
@angular-devkit/schematics      11.2.12
@angular/cli                    11.2.12
@angular/fire                   6.1.4
@schematics/angular             11.2.12
@schematics/update              0.1102.12
rxjs                            6.5.5
typescript                      4.1.5

I made an update but the problem persists

[liamdebeasi]

Thanks for the issue. Please update your @angular-devkit/build-angular dependency to 0.1102.12 or newer to resolve this issue.

npm install @angular-devkit/build-angular@0.1102.12

[stephanevallejo]

Thank you 👍