From 678773ffd4f412ac78dd84d755dd00cb4a5c676a Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Wed, 5 May 2021 10:23:00 +0200
Subject: [PATCH] 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
---
 .../src/webpack/plugins/optimize-css-webpack-plugin.ts          | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts
index 6d2b8473f325..f58318463cd0 100644
--- a/packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/plugins/optimize-css-webpack-plugin.ts
@@ -83,6 +83,8 @@ export class OptimizeCssWebpackPlugin {
                 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,
               },
             ],
           };