Ensure default CSS block container. Fixes #1829

src/css_composer/view/CssRulesView.js

@@ -41,11 +41,10 @@ module.exports = Backbone.View.extend({
       return;
     }
 
-    var fragment = fragmentEl || null;
-    var viewObject = CssRuleView;
-    var config = this.config;
-    let rendered, view;
+    const fragment = fragmentEl || null;
+    const { config } = this;
     const opts = { model, config };
+    let rendered, view;
 
     // I have to render keyframes of the same name together
     // Unfortunately at the moment I didn't find the way of appending them
@@ -114,21 +113,21 @@ module.exports = Backbone.View.extend({
   render() {
     this.renderStarted = 1;
     this.atRules = {};
-    const $el = this.$el;
+    const { em, $el, className, collection } = this;
     const frag = document.createDocumentFragment();
-    const className = this.className;
     $el.empty();
 
-    // Create devices related DOM structure
-    this.em
+    // Create devices related DOM structure, ensure also to have a default container
+    const prs = em
       .get('DeviceManager')
       .getAll()
-      .pluck('priority')
-      .forEach(priority => {
-        $(`<div id="${getBlockId(className, priority)}"></div>`).appendTo(frag);
-      });
+      .pluck('priority');
+    prs.every(pr => pr) && prs.unshift(0);
+    prs.forEach(pr =>
+      $(`<div id="${getBlockId(className, pr)}"></div>`).appendTo(frag)
+    );
 
-    this.collection.each(model => this.addToCollection(model, frag));
+    collection.each(model => this.addToCollection(model, frag));
     $el.append(frag);
     $el.attr('class', className);
     return this;

src/device_manager/model/Device.js

@@ -1,3 +1,4 @@
+import { isUndefined } from 'underscore';
 import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
@@ -21,12 +22,9 @@ module.exports = Backbone.Model.extend({
   },
 
   initialize() {
-    if (this.get('widthMedia') == null) {
+    this.get('widthMedia') === null &&
       this.set('widthMedia', this.get('width'));
-    }
-
-    if (!this.get('priority')) {
+    !this.get('priority') &&
       this.set('priority', parseFloat(this.get('widthMedia')) || 0);
-    }
   }
 });