Refactor methods in CssGenerator

src/code_manager/index.js

@@ -182,6 +182,7 @@ module.exports = () => {
      * var codeStr = codeManager.getCode(model, 'html');
      * */
     getCode(model, genId, opt = {}) {
+      opt.em = c.em;
       var generator  = this.getGenerator(genId);
       return generator ? generator.build(model, opt) : '';
     },

src/code_manager/model/CssGenerator.js

@@ -1,92 +1,65 @@
-var Backbone = require('backbone');
+import { keys } from 'underscore';
 
-module.exports = Backbone.Model.extend({
+module.exports = require('backbone').Model.extend({
 
   initialize() {
     this.compCls = [];
+    this.ids = [];
   },
 
   /**
-   * Get CSS from component
+   * Get CSS from a component
    * @param {Model} model
    * @return {String}
    */
   buildFromModel(model, opts = {}) {
-    var code = '';
-    var style = model.get('style');
-    var classes = model.get('classes');
+    let code = '';
+    const style = model.get('style');
+    const classes = model.get('classes');
     const wrappesIsBody = opts.wrappesIsBody;
+    this.ids.push(model.getId());
 
     // Let's know what classes I've found
-    if(classes) {
-      classes.each(function(model){
-        this.compCls.push(model.get('name'));
-      }, this);
-    }
+    classes.each(model => this.compCls.push(model.getFullName()));
 
-    if(style && Object.keys(style).length !== 0) {
+    if (style && keys(style).length) {
       let selector = `#${model.getId()}`;
-      selector = wrappesIsBody && model.get('wrapper') ?
-        'body' : selector;
-      code += `${selector}{`;
-      for(var prop in style){
-        if(style.hasOwnProperty(prop))
-          code += prop + ':' + style[prop] + ';';
-      }
-      code += '}';
+      selector = wrappesIsBody && model.get('wrapper') ? 'body' : selector;
+      code = `${selector}{${model.styleToString()}}`;
     }
 
+    const components = model.components();
+    components.each(model => code += this.buildFromModel(model, opts));
     return code;
   },
 
-  /**
-   * Get CSS from components
-   * @param {Model} model
-   * @return {String}
-   */
-  buildFromComp(model) {
-    var coll = model.get('components') || model,
-      code = '';
-
-    coll.each(function(m) {
-      var cln = m.get('components');
-      code += this.buildFromModel(m);
-
-      if(cln.length){
-        code += this.buildFromComp(cln);
-      }
-
-    }, this);
 
-    return code;
-  },
-
-  /** @inheritdoc */
   build(model, opts = {}) {
     const cssc = opts.cssc;
     this.compCls = [];
+    this.ids = [];
     var code = this.buildFromModel(model, opts);
-    code += this.buildFromComp(model);
-    var compCls = this.compCls;
 
     if (cssc) {
-      var rules = cssc.getAll();
-      var mediaRules = {};
-      rules.each(function(rule) {
-        var width = rule.get('mediaText');
-
-        // If width setted will render it later
-        if(width){
-          var mRule = mediaRules[width];
-          if(mRule)
-            mRule.push(rule);
-          else
-            mediaRules[width] = [rule];
+      const rules = cssc.getAll();
+      const mediaRules = {};
+
+      rules.each(rule => {
+        const media = rule.get('mediaText');
+
+        // If media is setted, I'll render it later
+        if (media) {
+          const mRules = mediaRules[media];
+          if (mRules) {
+            mRules.push(rule);
+          } else {
+            mediaRules[media] = [rule];
+          }
           return;
         }
 
         code += this.buildFromRule(rule);
-      }, this);
+      });
 
       // Get media rules
       for (var ruleW in mediaRules) {
@@ -102,6 +75,7 @@ module.exports = Backbone.Model.extend({
       }
 
     }
+
     return code;
   },
 
@@ -111,39 +85,24 @@ module.exports = Backbone.Model.extend({
    * @return {string} CSS string
    */
   buildFromRule(rule) {
-    var result = '';
-    var selectorsAdd = rule.get('selectorsAdd');
-    var selectors = rule.get('selectors');
-    var ruleStyle = rule.get('style');
-    var state = rule.get('state');
-    var strSel = '';
-    var found = 0;
-    var compCls = this.compCls;
-
-    // Get string of selectors
-    selectors.each(selector => {
-      strSel += '.' + selector.get('name');
-      if(compCls.indexOf(selector.get('name')) > -1)
+    let result = '';
+    const selectorStr = rule.selectorsToString();
+    const selectorStrNoAdd = rule.selectorsToString({skipAdd: 1});
+    let found;
+
+    // This will not render a rule if there is no its component
+    rule.get('selectors').each(selector => {
+      if (this.compCls.indexOf(selector.getFullName()) >= 0) {
         found = 1;
+      }
     });
 
-    // With 'found' will skip rules which selectors are not found in
-    // canvas components.
-    if ((strSel && found) || selectorsAdd) {
-      strSel += state ? ':' + state : '';
-      strSel += selectorsAdd ? (strSel ? ', ' : '') + selectorsAdd : '';
-      var strStyle = '';
-
-      // Get string of style properties
-      if(ruleStyle && Object.keys(ruleStyle).length !== 0){
-        for(var prop2 in ruleStyle){
-          if(ruleStyle.hasOwnProperty(prop2))
-            strStyle += prop2 + ':' + ruleStyle[prop2] + ';';
-        }
-      }
+    if ((selectorStrNoAdd && found) || rule.get('selectorsAdd')) {
+      const style = rule.styleToString();
 
-      if(strStyle)
-        result += strSel + '{' + strStyle + '}';
+      if (style) {
+        result += `${selectorStr}{${style}}`;
+      }
     }
 
     return result;

src/css_composer/model/CssRule.js

@@ -45,23 +45,34 @@ module.exports = Backbone.Model.extend(Styleable).extend({
   },
 
 
+  /**
+   * Return selectors fo the rule as a string
+   * @return {string}
+   */
+  selectorsToString(opts = {}) {
+    const result = [];
+    const state = this.get('state');
+    const addSelector = this.get('selectorsAdd');
+    const selectors = this.get('selectors').getFullString();
+    const stateStr = state ? `:${state}` : '';
+    selectors && result.push(`${selectors}${stateStr}`);
+    addSelector && !opts.skipAdd && result.push(addSelector);
+    return result.join(', ');
+  },
+
+
   /**
    * Returns CSS string of the rule
    * @return {string}
    */
   toCSS() {
     let result = '';
-    let sels = [];
-    const state = this.get('state');
     const media = this.get('mediaText');
     const style = this.styleToString();
-    const addSelector = this.get('selectorsAdd');
-    const selectors = this.get('selectors').getFullString();
-    selectors && sels.push(selectors);
-    addSelector && sels.push(addSelector);
+    const selectors = this.selectorsToString();
 
-    if (style && sels.length) {
-      result = `${sels.join(',')} {${style}}`;
+    if (selectors && style) {
+      result = `${selectors} {${style}}`;
     }
 
     if (media && result) {

src/domain_abstract/model/Styleable.js

@@ -87,9 +87,9 @@ export default {
     const style = this.getStyle();
 
     for (let prop in style) {
-      result.push(`${prop}:${style[prop]}`);
+      result.push(`${prop}:${style[prop]};`);
     }
 
-    return result.join(';');
+    return result.join('');
   },
 }

test/specs/code_manager/model/CodeModels.js

@@ -58,7 +58,7 @@ module.exports = {
         });
     });
 
-    describe('CssGenerator', () => {
+    describe.only('CssGenerator', () => {
         var newCssComp = () => new CssComposer().init();
         beforeEach(() => {
           obj  = new CssGenerator();