Implement Styleable interface in Components and CssRules

src/css_composer/model/CssRule.js

@@ -1,7 +1,9 @@
+import Styleable from 'domain_abstract/model/Styleable';
+
 var Backbone = require('backbone');
 var Selectors = require('./Selectors');
 
-module.exports = Backbone.Model.extend({
+module.exports = Backbone.Model.extend(Styleable).extend({
 
 	defaults: {
     // Css selectors

src/dom_components/model/Component.js

@@ -1,3 +1,5 @@
+import Styleable from 'domain_abstract/model/Styleable';
+
 var Backbone = require('backbone');
 var Components = require('./Components');
 var Selectors = require('selector_manager/model/Selectors');
@@ -7,7 +9,7 @@ const escapeRegExp = (str) => {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
 }
 
-module.exports = Backbone.Model.extend({
+module.exports = Backbone.Model.extend(Styleable).extend({
 
   defaults: {
     // HTML tag of the component

src/domain_abstract/model/Stylable.js → src/domain_abstract/model/Styleable.js

@@ -1,4 +1,4 @@
-export default class Stylable {
+export default {
 
   /**
    * To trigger the style change event on models I have to
@@ -8,7 +8,7 @@ export default class Stylable {
    */
   newStyle(prop) {
     return Object.assign({}, this.getStyle(), prop);
-  }
+  },
 
   /**
    * Get style object
@@ -16,7 +16,7 @@ export default class Stylable {
    */
   getStyle() {
     return this.get('style');
-  }
+  },
 
   /**
    * Set new style object
@@ -24,7 +24,7 @@ export default class Stylable {
    */
   setStyle(prop = {}) {
     this.set('style', this.newStyle(prop));
-  }
+  },
 
   /**
    * Add style property
@@ -43,7 +43,7 @@ export default class Stylable {
 
     prop = this.newStyle(prop);
     this.set('style', prop);
-  }
+  },
 
   /**
    * Remove style property