css being reordered in devkit 0.1102.11, causing styles to not work correctly

[liamdebeasi]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Yes, this previously worked in @angular-devkit/build-angular@0.1102.10.

Possibly related to 8abb3e4

Description

When running a production build of an Angular app, imported stylesheets have their properties reordered, leading to styles being incorrectly applied when running the app in a browser.

🔬 Minimal Reproduction

Code Reproduction: https://github.com/liamdebeasi/ng-css-issue

1. Run npm install in the 11.2.10 directory. This will install Angular 11.2.10 and its dependencies.
2. From that directory, run ng build --prod.
3. Open the styles file that has been generated inside of the www directory. The following CSS should be in that file:

.ion-padding-start{padding-left:unset;-webkit-padding-start:16px;padding-inline-start:16px}

4. Run npm install in the 11.2.11 directory. This will install Angular 11.2.11 and its dependencies.
5. From that directory, run ng build --prod.
6. Open the styles file that has been generated inside of the www directory. The following CSS should be in that file:

.ion-padding-start{-webkit-padding-start:16px;padding-inline-start:16px;padding-left:unset}

Expected Behavior

In Angular 11.2.11, I would expect that the ordering of my CSS is preserved as in Angular 11.2.10 and earlier.

Actual Behavior

In Angular 11.2.11, my CSS is reordered when the app is compiled.

Other Info

Because of this reordering the "ion-padding-start" class no longer adds padding on the starting side of an element as expected. This is because padding-left is being modified after padding-start in Angular 11.2.11 even though the source CSS has padding-left being modified before padding-start.

This is impacting Ionic Framework applications (ionic-team/ionic-framework#23266)

🌍 Your Environment

Angular CLI: 11.2.11
Node: 15.9.0
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.11
@angular-devkit/build-angular   0.1102.11
@angular-devkit/core            11.2.11
@angular-devkit/schematics      11.2.11
@schematics/angular             11.2.11
@schematics/update              0.1102.11
rxjs                            6.5.5
typescript                      4.0.7

[alan-agius4]

Possibly related to cssnano/cssnano#1054