Start make use of `getFullName` from the Selector

src/css_composer/index.js

@@ -1,6 +1,7 @@
 /**
  * * [add](#add)
  * * [get](#get)
+ * * [set](#set)
  * * [getAll](#getall)
  * * [load](#load)
  * * [store](#store)
@@ -270,6 +271,27 @@ module.exports = () => {
         return result;
       },
 
+
+      /**
+       * Add/update a css rule
+       * @param {string} selector Selector string, eg. '.class1.class2, #id1'
+       * @param {Object} style  Style properties and values
+       */
+      set(selector, style, opts = {}) {
+        const state = opts.state || '';
+        const media = opts.mediaText || '';
+        // opts.state, opts.media
+        /*
+        1. from selectorString to selectorObjects (using Selectors API)
+          [
+              [{'class1'}, {'class2'}],
+              [{'id1'}, {'class2'}]
+          ]
+        2. add(selectors, state, media)
+         */
+      },
+
+
       /**
        * Render the block of CSS rules
        * @return {HTMLElement}

src/css_composer/view/CssRuleView.js

@@ -28,13 +28,11 @@ module.exports = Backbone.View.extend({
    * @private
    */
   renderSelectors() {
-    var sel = [];
-    var model = this.model;
-    var add = model.get('selectorsAdd');
-    model.get('selectors').each(m => {
-      sel.push('.' + m.get('name'));
-    });
-    var sels = sel.join('');
+    const sel = [];
+    const model = this.model;
+    model.get('selectors').each(model => sel.push(model.getFullName()));
+    const sels = sel.join('');
+    const add = model.get('selectorsAdd');
     return sels + (sels && add ? ', ' : '') + add;
   },
 

src/dom_components/model/Component.js

@@ -1,10 +1,10 @@
 import { isUndefined, isArray } from 'underscore';
 import Styleable from 'domain_abstract/model/Styleable';
 
-var Backbone = require('backbone');
-var Components = require('./Components');
-var Selectors = require('selector_manager/model/Selectors');
-var Traits = require('trait_manager/model/Traits');
+const Backbone = require('backbone');
+const Components = require('./Components');
+const Selectors = require('selector_manager/model/Selectors');
+const Traits = require('trait_manager/model/Traits');
 
 const escapeRegExp = (str) => {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
@@ -158,18 +158,6 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.initClasses();
     this.initComponents();
     this.initToolbar();
-
-    // Normalize few properties from strings to arrays
-    var toNormalize = ['stylable'];
-    toNormalize.forEach(function(name) {
-      var value = this.get(name);
-
-      if (typeof value == 'string') {
-        var newValue = value.split(',').map(prop => prop.trim());
-        this.set(name, newValue);
-      }
-    }, this);
-
     this.set('status', '');
     this.init();
   },
@@ -329,7 +317,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    */
   traitsUpdated() {
     let found = 0;
-    const attrs = Object.assign({}, this.get('attributes'));
+    const attrs = { ...this.get('attributes') };
     const traits = this.get('traits');
 
     if (!(traits instanceof Traits)) {

src/dom_components/view/ComponentView.js

@@ -145,7 +145,13 @@ module.exports = Backbone.View.extend({
    * @private
    * */
   updateStyle() {
-    this.setAttribute('style', this.getStyleString());
+    const em = this.em;
+    const model = this.model;
+    const selector = `#${model.getId()}`;
+    const style = model.getStyle();
+    const state = model.get('state');
+    em.get('CssComposer').set(selector, style, { state });
+    //this.setAttribute('style', this.getStyleString());
   },
 
   /**

src/selector_manager/index.js

@@ -61,6 +61,10 @@ module.exports = config => {
 
   return {
 
+    Selector,
+
+    Selectors,
+
     /**
      * Name of the module
      * @type {String}

src/selector_manager/model/Selector.js

@@ -1,15 +1,19 @@
 var Backbone = require('backbone');
 
+const TYPE_CLASS = 1;
+const TYPE_ID = 2;
+
 const Selector = Backbone.Model.extend({
 
   idAttribute: 'name',
 
   defaults: {
     name: '',
+
     label: '',
 
     // Type of the selector
-    type: 'class',
+    type: TYPE_CLASS,
 
     // If not active it's not selectable by the style manager (uncheckboxed)
     active: true,
@@ -18,7 +22,7 @@ const Selector = Backbone.Model.extend({
     // Will be rendered only in export code
     private: false,
 
-    // If true, can't be removed by the user, from the attacched element
+    // If true, can't be removed from the attacched element
     protected: false,
   },
 
@@ -43,10 +47,10 @@ const Selector = Backbone.Model.extend({
     let init = '';
 
     switch (this.get('type')) {
-      case 'class':
+      case TYPE_CLASS:
         init = '.';
         break;
-      case 'id':
+      case TYPE_ID:
         init = '#';
         break;
     }
@@ -55,6 +59,12 @@ const Selector = Backbone.Model.extend({
   }
 
 }, {
+  // All type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors
+  // Here I define only what I need
+  TYPE_CLASS,
+
+  TYPE_ID,
+
   /**
    * Escape string
    * @param {string} name