Detach style from the html string on add of the component

src/dom_components/model/Components.js

@@ -49,8 +49,13 @@ define([ 'backbone', 'require'],
 			},
 
 			add: function(models, opt){
-				if(typeof models === 'string')
-					models = this.editor.Parser.parseHtml(models).html;
+				if(typeof models === 'string'){
+					var parsed = this.editor.Parser.parseHtml(models);
+					models = parsed.html;
+
+					if(parsed.css)
+						this.editor.CssComposer.getRules().add(parsed.css);
+				}
 
 				return Backbone.Collection.prototype.add.apply(this, [models, opt]);
 			},

src/parser/model/ParserHtml.js

@@ -156,7 +156,7 @@ define(function(require) {
        * @return {Object}
        */
       parse: function(str, parserCss){
-        var res = { html: [], css: []};
+        var res = { html: '', css: ''};
         var el = document.createElement('div');
         el.innerHTML = str;
         var scripts = el.querySelectorAll('script');

test/specs/css_composer/e2e/CssComposer.js

@@ -21,6 +21,7 @@ define(function(require) {
               });
               this.cssc = this.gjs.editor.get('CssComposer');
               this.clsm = this.gjs.editor.get('ClassManager');
+              this.domc = this.gjs.editor.Components;
               this.$fixture.empty().appendTo(this.$fixtures);
               this.gjs.render();
               this.rulesSet = [
@@ -75,6 +76,14 @@ define(function(require) {
               cls.at(2).get('name').should.equal('test3');
             });
 
+            it('Add rules from the new component added as a string with style tag', function() {
+              var comps = this.domc.getComponents();
+              var rules = this.cssc.getRules();
+              comps.add("<div>Test</div><style>.test{color: red} .test2{color: blue}</style>");
+              comps.length.should.equal(1);
+              rules.length.should.equal(2);
+            });
+
         });
       }
     };