Update sortMediaObject to sort correctly also in the mobile first approach. Closes #1996

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);
+    });
   }
 });

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 }
+        ]);
+      });
     });
   }
 };