From 3fd18b27f443d955fb1e7cdb4999863e5ad0f29e Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Wed, 18 Apr 2018 15:49:58 -0300 Subject: [PATCH 1/5] first commit --- src/code_manager/model/CssGenerator.js | 10 +++++++--- src/commands/view/ExportTemplate.js | 2 +- src/editor/model/Editor.js | 5 +++-- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 3b857cad0..e028de2a4 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.dumpUnusedSelectors + ) { 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/model/Editor.js b/src/editor/model/Editor.js index 9cdfa75d8..07ed2b698 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -305,15 +305,16 @@ module.exports = Backbone.Model.extend({ const config = this.config; const wrappesIsBody = config.wrappesIsBody; const avoidProt = opts.avoidProtected; + const dumpUnusedSelectors = opts.dumpUnusedSelectors || false; const cssc = this.get('CssComposer'); const wrp = this.get('DomComponents').getComponent(); const protCss = !avoidProt ? config.protectedCss : ''; - return ( protCss + this.get('CodeManager').getCode(wrp, 'css', { cssc, - wrappesIsBody + wrappesIsBody, + dumpUnusedSelectors }) ); }, From e8e76476b996bd4cd2e23ad6d2259b7f6400a7a3 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 19 Apr 2018 10:32:06 -0300 Subject: [PATCH 2/5] added unit testing to dump unused css selectors --- test/specs/grapesjs/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index c4ad136d1..371301cb2 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -376,5 +376,16 @@ 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({ dumpUnusedSelectors: 1 }); + const protCss = editor.getConfig().protectedCss; + expect(editor.getStyle().length).toEqual(2); + expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`); + }); }); }); From 11cb0563bca6ebb5ef71e34ea8b1676291958da8 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 19 Apr 2018 10:56:57 -0300 Subject: [PATCH 3/5] rename variable --- src/code_manager/model/CssGenerator.js | 2 +- src/editor/model/Editor.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index e028de2a4..33d5c38a9 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/src/code_manager/model/CssGenerator.js @@ -97,7 +97,7 @@ module.exports = require('backbone').Model.extend({ if ( this.compCls.indexOf(name) >= 0 || this.ids.indexOf(name) >= 0 || - opts.dumpUnusedSelectors + opts.dumpUnusedStyles ) { found = 1; } diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 07ed2b698..eb23f7ea4 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -305,16 +305,18 @@ module.exports = Backbone.Model.extend({ const config = this.config; const wrappesIsBody = config.wrappesIsBody; const avoidProt = opts.avoidProtected; - const dumpUnusedSelectors = opts.dumpUnusedSelectors || false; + const dumpUnusedStyles = + opts.dumpUnusedStyles || this.config.dumpUnusedStyles; const cssc = this.get('CssComposer'); const wrp = this.get('DomComponents').getComponent(); const protCss = !avoidProt ? config.protectedCss : ''; + return ( protCss + this.get('CodeManager').getCode(wrp, 'css', { cssc, wrappesIsBody, - dumpUnusedSelectors + dumpUnusedStyles }) ); }, From 0f697ed55be2becb0a6dcf9a0bb1c285115ddcd2 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 19 Apr 2018 10:59:04 -0300 Subject: [PATCH 4/5] addded new config option dumpUnusedStyles as false by default --- src/editor/config/config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 }; From 6ba00f75b6f5e0be038f026ede2c99ac481a78b8 Mon Sep 17 00:00:00 2001 From: Arthur Almeida Date: Thu, 19 Apr 2018 10:59:12 -0300 Subject: [PATCH 5/5] unit tests --- test/specs/grapesjs/index.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index 371301cb2..f89d0d666 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -382,7 +382,18 @@ describe('GrapesJS', () => { config.storageManager = { type: 0 }; fixture.innerHTML = documentEl; const editor = obj.init(config); - const css = editor.getCss({ dumpUnusedSelectors: 1 }); + 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;}`);