Add experimental `clearStyles` option

src/code_manager/model/CssGenerator.js

@@ -35,7 +35,8 @@ module.exports = require('backbone').Model.extend({
 
   build(model, opts = {}) {
     const cssc = opts.cssc;
-    this.em = opts.em || '';
+    const em = opts.em || '';
+    this.em = em;
     this.compCls = [];
     this.ids = [];
     var code = this.buildFromModel(model, opts);
@@ -43,6 +44,7 @@ module.exports = require('backbone').Model.extend({
     if (cssc) {
       const rules = cssc.getAll();
       const mediaRules = {};
+      const dump = [];
 
       rules.each(rule => {
         const media = rule.get('mediaText');
@@ -58,19 +60,21 @@ module.exports = require('backbone').Model.extend({
           return;
         }
 
-        code += this.buildFromRule(rule);
+        code += this.buildFromRule(rule, dump);
       });
 
       // Get media rules
       for (let media in mediaRules) {
         let rulesStr = '';
         const mRules = mediaRules[media];
-        mRules.forEach(rule => (rulesStr += this.buildFromRule(rule)));
+        mRules.forEach(rule => (rulesStr += this.buildFromRule(rule, dump)));
 
         if (rulesStr) {
           code += `@media ${media}{${rulesStr}}`;
         }
       }
+
+      em && em.getConfig('clearStyles') && rules.remove(dump);
     }
 
     return code;
@@ -81,7 +85,7 @@ module.exports = require('backbone').Model.extend({
    * @param {Model} rule
    * @return {string} CSS string
    */
-  buildFromRule(rule) {
+  buildFromRule(rule, dump) {
     let result = '';
     const selectorStr = rule.selectorsToString();
     const selectorStrNoAdd = rule.selectorsToString({ skipAdd: 1 });
@@ -101,6 +105,8 @@ module.exports = require('backbone').Model.extend({
       if (style) {
         result += `${selectorStr}{${style}}`;
       }
+    } else {
+      dump.push(rule);
     }
 
     return result;

src/editor/config/config.js

@@ -74,6 +74,16 @@ module.exports = {
   // When `avoidInlineStyle` is true all styles are inserted inside the css rule
   avoidInlineStyle: 0,
 
+  // (experimental)
+  // The structure of components is always on the screen but it's not the same
+  // for style rules. When you delete a component you might leave a lot of styles
+  // which will never be used again, therefore they might be removed.
+  // With this option set to true, styles not used from the CSS generator (so in
+  // any case where `CssGenerator.build` is used) will be removed automatically.
+  // But be careful, not always leaving the style not used mean you wouldn't
+  // use it later, but this option comes really handy when deal with big templates.
+  clearStyles: 0,
+
   // Dom element
   el: '',