Update CCS Composer for not class based rules

src/css_composer/main.js

@@ -148,6 +148,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} opts Other options for the rule
          * @return {Model}
          * @example
          * var sm = editor.SelectorManager;
@@ -159,17 +160,18 @@ define(function(require) {
          *   color: '#fff',
          * });
          * */
-        add: function(selectors, state, width) {
+        add: function(selectors, state, width, opts) {
           var s = state || '';
           var w = width || '';
+          var opt = opts || {};
           var rule = this.get(selectors, s, w);
           if(rule)
             return rule;
-          else{
-            rule = new CssRule({
-              state: s,
-              maxWidth: w,
-            });
+          else {
+            opt.state = s;
+            opt.maxWidth = w;
+            opt.selectors = '';
+            rule = new CssRule(opt);
             rule.get('selectors').add(selectors);
             rules.add(rule);
             return rule;
@@ -224,7 +226,8 @@ define(function(require) {
           var opt = opts || {};
           var result = [];
           var d = data instanceof Array ? data : [data];
-          for(var i = 0, l = d.length; i < l; i++){
+
+          for (var i = 0, l = d.length; i < l; i++) {
             var rule = d[i] || {};
             if(!rule.selectors)
               continue;
@@ -234,11 +237,13 @@ define(function(require) {
             var sl = rule.selectors;
             var sels = sl instanceof Array ? sl : [sl];
             var newSels = [];
-            for(var j = 0, le = sels.length; j < le; j++){
+
+            for (var j = 0, le = sels.length; j < le; j++) {
               var selec = sm.add(sels[j]);
               newSels.push(selec);
             }
-            var model = this.add(newSels, rule.state, rule.maxWidth);
+
+            var model = this.add(newSels, rule.state, rule.maxWidth, rule);
             if (opt.extend) {
               var newStyle = _.extend({}, model.get('style'), rule.style || {});
               model.set('style', newStyle);
@@ -247,6 +252,7 @@ define(function(require) {
             }
             result.push(model);
           }
+
           return result;
         },
 

src/css_composer/model/CssRule.js

@@ -5,12 +5,19 @@ define(['backbone', './Selectors'],
     		defaults: {
                 // Css selectors
                 selectors: {},
+
+                // Additional string css selectors
+                selectorsAdd: '',
+
                 // Css properties style
                 style: {},
+
                 // On which device width this rule should be rendered, eg. @media (max-width: 1000px)
                 maxWidth: '',
+
                 // State of the rule, eg: hover | pressed | focused
                 state: '',
+
                 // Indicates if the rule is stylable
                 stylable: true,
     		},

src/parser/model/ParserCss.js

@@ -45,7 +45,7 @@ define(function(require) {
        * @param  {StyleSheet|CSSMediaRule} el
        * @return {Array<Object>}
        */
-      parseNode: function(el){
+      parseNode: function(el) {
         var result = [];
         var nodes = el.cssRules;
 
@@ -83,7 +83,7 @@ define(function(require) {
             style[stl[j]] = stl[stl[j]];
           }
 
-          var lastRule;
+          var lastRule = '';
           // For each group of selectors
           for (var k = 0, len3 = sels.length; k < len3; k++) {
             var selArr = sels[k];
@@ -128,7 +128,7 @@ define(function(require) {
        * @param  {string} str HTML string
        * @return {Object|Array<Object>}
        */
-      parse: function(str){
+      parse: function(str) {
         var el = document.createElement('style');
         /*
         el.innerHTML = ".cssClass {border: 2px solid black; background-color: blue;} " +