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

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>

1. run angular compilation script: ng build --prod
2. serve generated www folder with an http-server .
3. 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: https://github.com/angular/angular-cli/issues/20693

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.