diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 3b857cad0..33d5c38a9 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/src/code_manager/model/CssGenerator.js @@ -59,7 +59,7 @@ module.exports = require('backbone').Model.extend({ return; } - code += this.buildFromRule(rule, dump); + code += this.buildFromRule(rule, dump, opts); }); // Get at-rules @@ -84,7 +84,7 @@ module.exports = require('backbone').Model.extend({ * @param {Model} rule * @return {string} CSS string */ - buildFromRule(rule, dump) { + buildFromRule(rule, dump, opts = {}) { let result = ''; const selectorStrNoAdd = rule.selectorsToString({ skipAdd: 1 }); const selectorsAdd = rule.get('selectorsAdd'); @@ -94,7 +94,11 @@ module.exports = require('backbone').Model.extend({ // This will not render a rule if there is no its component rule.get('selectors').each(selector => { const name = selector.getFullName(); - if (this.compCls.indexOf(name) >= 0 || this.ids.indexOf(name) >= 0) { + if ( + this.compCls.indexOf(name) >= 0 || + this.ids.indexOf(name) >= 0 || + opts.dumpUnusedStyles + ) { found = 1; } }); diff --git a/src/commands/view/ExportTemplate.js b/src/commands/view/ExportTemplate.js index a5fda7243..90847bf31 100644 --- a/src/commands/view/ExportTemplate.js +++ b/src/commands/view/ExportTemplate.js @@ -22,7 +22,7 @@ module.exports = { modal.setContent(this.$editors); modal.open(); this.htmlEditor.setContent(editor.getHtml()); - this.cssEditor.setContent(editor.getCss()); + this.cssEditor.setContent(editor.getCss({ dumpUnusedSelectors: 1 })); }, stop(editor) { diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 23153cca2..50d3026b2 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -279,6 +279,8 @@ module.exports = { traitManager: {}, // Texts + textViewCode: 'Code', - textViewCode: 'Code' + // Dump unused styles within the editor. + dumpUnusedStyles: false }; diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 9cdfa75d8..eb23f7ea4 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -305,6 +305,8 @@ module.exports = Backbone.Model.extend({ const config = this.config; const wrappesIsBody = config.wrappesIsBody; const avoidProt = opts.avoidProtected; + const dumpUnusedStyles = + opts.dumpUnusedStyles || this.config.dumpUnusedStyles; const cssc = this.get('CssComposer'); const wrp = this.get('DomComponents').getComponent(); const protCss = !avoidProt ? config.protectedCss : ''; @@ -313,7 +315,8 @@ module.exports = Backbone.Model.extend({ protCss + this.get('CodeManager').getCode(wrp, 'css', { cssc, - wrappesIsBody + wrappesIsBody, + dumpUnusedStyles }) ); }, diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index c4ad136d1..f89d0d666 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -376,5 +376,27 @@ describe('GrapesJS', () => { editor = obj.init(config); expect(editor.Commands.get('export-template').test).toEqual(1); }); + + it('Dump unused css classes/selectors', () => { + config.fromElement = 1; + config.storageManager = { type: 0 }; + fixture.innerHTML = documentEl; + const editor = obj.init(config); + const css = editor.getCss({ dumpUnusedStyles: 1 }); + const protCss = editor.getConfig().protectedCss; + expect(editor.getStyle().length).toEqual(2); + expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`); + }); + + it('Dump unused css classes/selectors using the init option', () => { + config.fromElement = 1; + config.storageManager = { type: 0 }; + fixture.innerHTML = documentEl; + const editor = obj.init({ ...config, dumpUnusedStyles: 1 }); + const css = editor.getCss(); + const protCss = editor.getConfig().protectedCss; + expect(editor.getStyle().length).toEqual(2); + expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`); + }); }); });