Extend Style Rules on add instead of simple override

src/css_composer/main.js

@@ -215,11 +215,13 @@ define(function(require) {
         /**
          * Add a raw collection of rule objects
          * This method overrides styles, in case, of already defined rule
-         * @param {Array<Object>} data Array of rule objects
+         * @param {Array<Object>} data Array of rule objects, eg . [{selectors: ['class1'], style: {....}}, ..]
+         * @param {Object} opts Options
          * @return {Array<Model>}
          * @private
          */
-        addCollection: function(data){
+        addCollection: function(data, opts) {
+          var opt = opts || {};
           var result = [];
           var d = data instanceof Array ? data : [data];
           for(var i = 0, l = d.length; i < l; i++){
@@ -237,7 +239,12 @@ define(function(require) {
               newSels.push(selec);
             }
             var model = this.add(newSels, rule.state, rule.maxWidth);
-            model.set('style', rule.style || {});
+            if (opt.extend) {
+              var newStyle = _.extend({}, model.get('style'), rule.style || {});
+              model.set('style', newStyle);
+            } else {
+                model.set('style', rule.style || {});
+            }
             result.push(model);
           }
           return result;

src/dom_components/model/Components.js

@@ -1,79 +1,79 @@
 define([ 'backbone', 'require'],
-	function (Backbone, require) {
+  function (Backbone, require) {
 
-		return Backbone.Collection.extend({
+    return Backbone.Collection.extend({
 
-			initialize: function(models, opt){
+      initialize: function(models, opt){
 
-				this.on('add', this.onAdd);
+        this.on('add', this.onAdd);
 
-				this.config = opt && opt.config ? opt.config : null;
+        this.config = opt && opt.config ? opt.config : null;
 
-				// Inject editor
-				if(opt && opt.sm)
-					this.editor = opt.sm;
+        // Inject editor
+        if(opt && opt.sm)
+          this.editor = opt.sm;
 
-				this.model	= function(attrs, options) {
-					var model;
+        this.model  = function(attrs, options) {
+          var model;
 
-					if(!options.sm && opt && opt.sm)
-						options.sm = opt.sm;
+          if(!options.sm && opt && opt.sm)
+            options.sm = opt.sm;
 
-					if(opt && opt.config)
-						options.config = opt.config;
+          if(opt && opt.config)
+            options.config = opt.config;
 
-					if(opt && opt.defaultTypes)
-							options.defaultTypes = opt.defaultTypes;
+          if(opt && opt.defaultTypes)
+              options.defaultTypes = opt.defaultTypes;
 
-					if(opt && opt.componentTypes)
-							options.componentTypes = opt.componentTypes;
+          if(opt && opt.componentTypes)
+              options.componentTypes = opt.componentTypes;
 
-					var df = opt.defaultTypes;
+          var df = opt.defaultTypes;
 
-					for (var it = 0; it < df.length; it++) {
-						var dfId = df[it].id;
-						if(dfId == attrs.type) {
-							model = df[it].model;
-							break;
-						}
-					}
+          for (var it = 0; it < df.length; it++) {
+            var dfId = df[it].id;
+            if(dfId == attrs.type) {
+              model = df[it].model;
+              break;
+            }
+          }
 
-					if(!model) {
-						// get the last one
-						model = df[df.length - 1].model;
-					}
+          if(!model) {
+            // get the last one
+            model = df[df.length - 1].model;
+          }
 
-					return new model(attrs, options);
-				};
+          return new model(attrs, options);
+        };
 
-			},
-
-			add: function(models, opt){
-				if(typeof models === 'string'){
-					var parsed = this.editor.get('Parser').parseHtml(models);
-					models = parsed.html;
+      },
 
-					var cssc = this.editor.get('CssComposer');
-					if(parsed.css && cssc){
-						var added = cssc.addCollection(parsed.css);
-					}
-				}
+      add: function(models, opt){
+        if(typeof models === 'string'){
+          var parsed = this.editor.get('Parser').parseHtml(models);
+          models = parsed.html;
 
-				return Backbone.Collection.prototype.add.apply(this, [models, opt]);
-			},
+          var cssc = this.editor.get('CssComposer');
+          if(parsed.css && cssc){
+            var added = cssc.addCollection(parsed.css, {extend: 1});
+          }
+        }
 
-			onAdd: function(model, c, opts){
-				var style = model.get('style');
+        return Backbone.Collection.prototype.add.apply(this, [models, opt]);
+      },
 
-				if(!_.isEmpty(style) && this.editor){
-					var cssC = this.editor.get('CssComposer');
-					var newClass = this.editor.get('SelectorManager').add(model.cid);
-					model.set({style:{}});
-					model.get('classes').add(newClass);
-					var rule = cssC.add(newClass);
-					rule.set('style', style);
-				}
+      onAdd: function(model, c, opts){
+        var style = model.get('style');
+
+        if(!_.isEmpty(style) && this.editor){
+          var cssC = this.editor.get('CssComposer');
+          var newClass = this.editor.get('SelectorManager').add(model.cid);
+          model.set({style:{}});
+          model.get('classes').add(newClass);
+          var rule = cssC.add(newClass);
+          rule.set('style', style);
+        }
       },
 
-		});
+    });
 });

src/parser/model/ParserCss.js

@@ -44,9 +44,13 @@ define(function(require) {
           var sels = node.selectorText;
 
           // It's a CSSMediaRule
-          if(node.cssRules){
+          if(node.cssRules) {
             var subRules = this.parseNode(node);
-            var width = node.media.mediaText.match(/-width:(.*)\)/i)[1];
+            var widthA = node.media.mediaText.match(/-width:(.*)\)/i);
+            if(!widthA) {
+              continue;
+            }
+            var width = widthA[1];
             for(var s = 0, lens = subRules.length; s < lens; s++){
               var subRule = subRules[s];
               subRule.maxWidth = width ? width.trim() : '';

test/specs/css_composer/e2e/CssComposer.js

@@ -109,6 +109,47 @@ define(['GrapesJS'],function(GrapesJS) {
               coll1.should.deep.equal(coll2);
             });
 
+            it("Extend css rule style, if requested", function() {
+              var style1 = {color: 'red', width: '10px'};
+              var style2 = {height: '20px', width: '20px'};
+              var rule1 = {
+                selectors: ['test1'],
+                style: style1,
+              };
+              var rule2 = {
+                selectors: ['test1'],
+                style: style2,
+              };
+              var ruleOut = cssc.addCollection(rule1)[0];
+              // ruleOut is a Model
+              ruleOut = JSON.parse(JSON.stringify(ruleOut));
+              var ruleResult = {
+                maxWidth: '',
+                selectors: [{
+                 active: true,
+                 label: 'test1',
+                 name: 'test1',
+                 type: 'class',
+                }],
+                state: '',
+                stylable: true,
+                style: {
+                 color: 'red',
+                 width: '10px'
+                }
+              };
+              ruleOut.should.deep.equal(ruleResult);
+              var ruleOut = cssc.addCollection(rule2, {extend: 1})[0];
+              ruleOut = JSON.parse(JSON.stringify(ruleOut));
+              ruleResult.style = {
+                color: 'red',
+                height: '20px',
+                width: '20px',
+              }
+              ruleOut.should.deep.equal(ruleResult);
+
+            });
+
             it('Add raw rule objects with width via addCollection', function() {
               var coll1 = cssc.addCollection(rulesSet2);
               coll1[2].get('maxWidth').should.equal(rulesSet2[2].maxWidth);