From b1d723551e85fa3c04017bddfe7dca0bd4e5113a Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 19 Aug 2017 17:39:24 +0200
Subject: [PATCH] Improve new rule creation with CSSRule

---
 src/css_composer/model/CssRule.js          | 23 ++++++++++++----------
 test/specs/css_composer/e2e/CssComposer.js | 12 ++++++-----
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js
index a478de592..fb191bd61 100644
--- a/src/css_composer/model/CssRule.js
+++ b/src/css_composer/model/CssRule.js
@@ -26,18 +26,21 @@ module.exports = Backbone.Model.extend(Styleable).extend({
 	},
 
   initialize(c, opt) {
-      this.config   = c || {};
-      this.sm = opt ? opt.sm || {} : {};
-      this.slct = this.config.selectors || [];
-
-      if(this.sm.get){
-          var slct = [];
-          for(var i = 0; i < this.slct.length; i++)
-              slct.push(this.sm.get('SelectorManager').add(this.slct[i].name || this.slct[i]));
-          this.slct = slct;
+      this.config = c || {};
+      const em = opt && opt.sm;
+      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.set('selectors', new Selectors(this.slct));
+      this.set('selectors', new Selectors(selectors));
   },
 
   /**
diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js
index ab4a666c3..5620ac07c 100644
--- a/test/specs/css_composer/e2e/CssComposer.js
+++ b/test/specs/css_composer/e2e/CssComposer.js
@@ -54,9 +54,9 @@ module.exports = {
         it('Rules are correctly imported from default property', () => {
           var gj = grapesjs.init({
             stylePrefix: '',
-            storageManager: { autoload: 0, type:'none' },
-            assetManager: { storageType: 'none', },
-            cssComposer: { rules: rulesSet},
+            storageManager: {autoload: 0, type:'none' },
+            assetManager: {storageType: 'none', },
+            cssComposer: {rules: rulesSet},
             container: 'csscomposer-fixture',
           });
           var cssc = gj.editor.get('CssComposer');
@@ -68,8 +68,10 @@ module.exports = {
 
         it('New rule adds correctly the class inside selector manager', () => {
           var rules = cssc.getAll();
-          rules.add({ selectors: [{name: 'test1'}] });
-          expect(clsm.getAll().at(0).get('name')).toEqual('test1');
+          rules.add({ selectors: [{name: 'test1', private: true}] });
+          var rule = clsm.getAll().at(0);
+          expect(rule.get('name')).toEqual('test1');
+          expect(rule.get('private')).toEqual(true);
         });
 
         it('New rules are correctly imported inside selector manager', () => {