From 264e01dbf523a646b0d470b58f936c5ccee73895 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 11 May 2019 17:15:47 +0200
Subject: [PATCH] Update sortMediaObject to sort correctly also in the mobile
 first approach. Closes #1996

---
 src/code_manager/model/CssGenerator.js      | 12 ++++++++----
 test/specs/code_manager/model/CodeModels.js | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js
index 20173fba4..0909a19fc 100644
--- a/src/code_manager/model/CssGenerator.js
+++ b/src/code_manager/model/CssGenerator.js
@@ -148,11 +148,15 @@ module.exports = require('backbone').Model.extend({
    * @return {Array}
    */
   sortMediaObject(items = {}) {
-    const result = {};
     const itemsArr = [];
     each(items, (value, key) => itemsArr.push({ key, value }));
-    return itemsArr.sort(
-      (a, b) => this.getQueryLength(b.key) - this.getQueryLength(a.key)
-    );
+    return itemsArr.sort((a, b) => {
+      const isMobFirst = [a.key, b.key].every(
+        mquery => mquery.indexOf('min-width') !== -1
+      );
+      const left = isMobFirst ? a.key : b.key;
+      const right = isMobFirst ? b.key : a.key;
+      return this.getQueryLength(left) - this.getQueryLength(right);
+    });
   }
 });
diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js
index 02732e323..e08bc0208 100644
--- a/test/specs/code_manager/model/CodeModels.js
+++ b/test/specs/code_manager/model/CodeModels.js
@@ -324,6 +324,24 @@ module.exports = {
           { key: '@media (max-width: 10%)', value: 5 }
         ]);
       });
+
+      test('The media objects, for the mobile first approach, are correctly sorted', () => {
+        expect(
+          obj.sortMediaObject({
+            '@media (min-width: 480px)': 1,
+            '@font-face': 2,
+            '@media (min-width: 768px)': 3,
+            '@media (min-width: 1020ch)': 4,
+            '@media (min-width: 10%)': 5
+          })
+        ).toEqual([
+          { key: '@font-face', value: 2 },
+          { key: '@media (min-width: 10%)', value: 5 },
+          { key: '@media (min-width: 480px)', value: 1 },
+          { key: '@media (min-width: 768px)', value: 3 },
+          { key: '@media (min-width: 1020ch)', value: 4 }
+        ]);
+      });
     });
   }
 };