From 38a0dc84347ae10d6ff6cac79de26489bbeb29d5 Mon Sep 17 00:00:00 2001
From: Val Rudi <mail.valik@gmail.com>
Date: Thu, 29 Mar 2018 17:24:20 +0300
Subject: [PATCH] Added style containers to fix styles/media-query order

---
 src/css_composer/view/CssRulesView.js | 29 ++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js
index 03b38d74c..1a41cfe2e 100644
--- a/src/css_composer/view/CssRulesView.js
+++ b/src/css_composer/view/CssRulesView.js
@@ -1,5 +1,6 @@
 const CssRuleView = require('./CssRuleView');
 const CssGroupRuleView = require('./CssGroupRuleView');
+const $ = Backbone.$;
 
 module.exports = require('backbone').View.extend({
   initialize(o) {
@@ -40,7 +41,7 @@ module.exports = require('backbone').View.extend({
     // I have to render keyframes of the same name together
     // Unfortunately at the moment I didn't find the way of appending them
     // if not staticly, via appendData
-    if (model.get('atRuleType') == 'keyframes') {
+    if (model.get('atRuleType') === 'keyframes') {
       const atRule = model.getAtRule();
       let atRuleEl = this.atRules[atRule];
 
@@ -61,19 +62,41 @@ module.exports = require('backbone').View.extend({
       rendered = view.render().el;
     }
 
+    const mediaWidth = this.getMediaWidth(model.get('mediaText'));
+    const styleBlockId = `${this.pfx}rules-${mediaWidth}`;
+
     if (rendered) {
-      if (fragment) fragment.appendChild(rendered);
-      else this.$el.append(rendered);
+      if (fragment) {
+        fragment.getElementById(styleBlockId).appendChild(rendered);
+      } else {
+        let $stylesContainer = this.$el.find(`#${styleBlockId}`);
+        $stylesContainer.append(rendered);
+      }
     }
 
     return rendered;
   },
 
+  getMediaWidth(mediaText) {
+    return mediaText && mediaText.replace('(max-width: ', '').replace(')', '');
+  },
+
   render() {
     this.atRules = {};
     const $el = this.$el;
     const frag = document.createDocumentFragment();
     $el.empty();
+
+    // Create devices related DOM structure
+    const pfx = this.pfx;
+    this.em
+      .get('DeviceManager')
+      .getAll()
+      .forEach(function(model) {
+        const blockId = pfx + 'rules-' + model.get('widthMedia');
+        $(`<div id="${blockId}"></div>`).appendTo(frag);
+      });
+
     this.collection.each(model => this.addToCollection(model, frag));
     $el.append(frag);
     $el.attr('class', this.className);