fix(@angular-devkit/build-angular): disable CSS declaration sorting optimizations

CSS declaration orders matters in some cases. This optimization is currently causing broken CSS output.

Closes #20693

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts

@@ -97,12 +97,19 @@ export class OptimizeCssWebpackPlugin {
           }
 
           const cssNanoOptions: cssNano.CssNanoOptions = {
-            preset: ['default', {
-              // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
-              svgo: false,
-              // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
-              calc: false,
-            }],
+            preset: [
+              'default',
+              {
+                // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
+                svgo: false,
+                // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
+                calc: false,
+                // Disable CSS rules sorted due to several issues #20693
+                // https://github.com/ionic-team/ionic-framework/issues/23266 and
+                // https://github.com/cssnano/cssnano/issues/1054
+                cssDeclarationSorter: false,
+              },
+            ],
           };
 
           const postCssOptions: ProcessOptions = {