diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js index 4fd86f595..34901397b 100644 --- a/src/css_composer/model/CssRule.js +++ b/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)); }, /** diff --git a/src/css_composer/model/CssRules.js b/src/css_composer/model/CssRules.js index f4fe209b9..61fbd6dcc 100644 --- a/src/css_composer/model/CssRules.js +++ b/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) {