diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 37872a91e..d715c50db 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/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; diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 50392fbbe..dd37cdcb2 100644 --- a/src/editor/config/config.js +++ b/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: '',