Do not merge styles with different selectors (even additional)

src/css_composer/main.js

@@ -165,7 +165,7 @@ define(function(require) {
           var s = state || '';
           var w = width || '';
           var opt = opts || {};
-          var rule = this.get(selectors, s, w);
+          var rule = this.get(selectors, s, w, opt);
           if(rule)
             return rule;
           else {
@@ -184,6 +184,7 @@ define(function(require) {
          * @param {Array<Selector>} selectors Array of selectors
          * @param {String} state Css rule state
          * @param {String} width For which device this style is oriented
+         * @param {Object} ruleProps Other rule props
          * @return  {Model|null}
          * @example
          * var sm = editor.SelectorManager;
@@ -196,12 +197,12 @@ define(function(require) {
          *   color: '#000',
          * });
          * */
-        get: function(selectors, state, width) {
+        get: function(selectors, state, width, ruleProps) {
           var rule = null;
-          rules.each(function(m){
+          rules.each(function(m) {
             if(rule)
               return;
-            if(m.compare(selectors, state, width))
+            if(m.compare(selectors, state, width, ruleProps))
               rule = m;
           });
           return rule;

src/css_composer/model/CssRule.js

@@ -42,12 +42,15 @@ define(['backbone', './Selectors'],
              * @param   {Object} selectors Collection of selectors
              * @param   {String} state Css rule state
              * @param   {String} width For which device this style is oriented
+             * @param {Object} ruleProps Other rule props
              * @return  {Boolean}
              * @private
              */
-            compare: function(selectors, state, width){
+            compare: function(selectors, state, width, ruleProps){
+                var otherRule = ruleProps || {};
                 var st = state || '';
                 var wd = width || '';
+                var selectorsAdd = otherRule.selectorsAdd || '';
                 var cId = 'cid';
                 //var a1 = _.pluck(selectors.models || selectors, cId);
                 //var a2 = _.pluck(this.get('selectors').models, cId);
@@ -80,6 +83,9 @@ define(['backbone', './Selectors'],
                 if(this.get('mediaText') !== wd)
                     return f;
 
+                if(this.get('selectorsAdd') !== selectorsAdd)
+                    return f;
+
                 return true;
             },
 

test/specs/css_composer/e2e/CssComposer.js

@@ -152,6 +152,49 @@ define(['GrapesJS'],function(GrapesJS) {
 
             });
 
+            it("Do not extend with different selectorsAdd", function() {
+              var style1 = {color: 'red', width: '10px'};
+              var style2 = {height: '20px', width: '20px'};
+              var rule1 = {
+                selectors: [],
+                selectorsAdd: '*',
+                style: style1,
+              };
+              var rule2 = {
+                selectors: [],
+                selectorsAdd: 'p',
+                style: style2,
+              };
+              var rule1Out = cssc.addCollection(rule1, {extend: 1})[0];
+              var rule2Out = cssc.addCollection(rule2, {extend: 1})[0];
+              rule1Out = JSON.parse(JSON.stringify(rule1Out));
+              rule2Out = JSON.parse(JSON.stringify(rule2Out));
+              var rule1Result = {
+                mediaText: '',
+                selectors: [],
+                selectorsAdd: '*',
+                state: '',
+                stylable: true,
+                style: {
+                 color: 'red',
+                 width: '10px'
+                }
+              };
+              var rule2Result = {
+                mediaText: '',
+                selectors: [],
+                selectorsAdd: 'p',
+                state: '',
+                stylable: true,
+                style: {
+                  height: '20px',
+                  width: '20px',
+                }
+              };
+              rule1Out.should.deep.equal(rule1Result);
+              rule2Out.should.deep.equal(rule2Result);
+            });
+
             it('Add raw rule objects with width via addCollection', function() {
               var coll1 = cssc.addCollection(rulesSet2);
               coll1[2].get('mediaText').should.equal(rulesSet2[2].mediaText);