Ensure selectors on CSS rule add

src/css_composer/model/CssRule.js

@@ -41,20 +41,18 @@ export default Backbone.Model.extend(Styleable).extend({
 
   initialize(c, opt = {}) {
     this.config = c || {};
-    const em = opt.em;
-    let selectors = this.config.selectors || [];
-    this.em = em;
-
-    if (em) {
-      const sm = em.get('SelectorManager');
-      const slct = [];
-      selectors.forEach(selector => {
-        slct.push(sm.add(selector));
-      });
-      selectors = slct;
-    }
+    this.em = opt.em;
+    this.ensureSelectors();
+  },
 
-    this.set('selectors', new Selectors(selectors));
+  ensureSelectors() {
+    const { em } = this;
+    const result = [];
+    const sm = em.get('SelectorManager');
+    const selectors = this.getSelectors();
+    const toInit = Array.isArray(selectors);
+    selectors.forEach(sel => result.push(sm.add(sel)));
+    toInit && this.set('selectors', new Selectors(result));
   },
 
   /**

src/css_composer/model/CssRules.js

@@ -9,7 +9,14 @@ export default Backbone.Collection.extend({
     if (opt && opt.em) this.editor = opt.em;
 
     // This will put the listener post CssComposer.postLoad
-    setTimeout(() => this.on('remove', this.onRemove));
+    setTimeout(() => {
+      this.on('remove', this.onRemove);
+      this.on('add', this.onAdd);
+    });
+  },
+
+  onAdd(model) {
+    model.ensureSelectors();
   },
 
   onRemove(removed) {