diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 33d5c38a9..1904449cf 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/src/code_manager/model/CssGenerator.js @@ -66,7 +66,9 @@ module.exports = require('backbone').Model.extend({ for (let atRule in atRules) { let rulesStr = ''; const mRules = atRules[atRule]; - mRules.forEach(rule => (rulesStr += this.buildFromRule(rule, dump))); + mRules.forEach( + rule => (rulesStr += this.buildFromRule(rule, dump, opts)) + ); if (rulesStr) { code += `${atRule}{${rulesStr}}`; @@ -97,7 +99,7 @@ module.exports = require('backbone').Model.extend({ if ( this.compCls.indexOf(name) >= 0 || this.ids.indexOf(name) >= 0 || - opts.dumpUnusedStyles + opts.keepUnusedStyles ) { found = 1; } diff --git a/src/editor/config/config.js b/src/editor/config/config.js index a2320d5cb..5183d1575 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -281,6 +281,6 @@ module.exports = { // Texts textViewCode: 'Code', - // Dump unused styles within the editor - dumpUnusedStyles: 0 + // Keep unused styles within the editor + keepUnusedStyles: 0 }; diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 983f079ba..a406000f5 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -302,9 +302,9 @@ module.exports = Backbone.Model.extend({ const config = this.config; const wrappesIsBody = config.wrappesIsBody; const avoidProt = opts.avoidProtected; - const dumpUnusedStyles = !isUndefined(opts.dumpUnusedStyles) - ? opts.dumpUnusedStyles - : config.dumpUnusedStyles; + const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) + ? opts.keepUnusedStyles + : config.keepUnusedStyles; const cssc = this.get('CssComposer'); const wrp = this.get('DomComponents').getComponent(); const protCss = !avoidProt ? config.protectedCss : ''; @@ -314,7 +314,7 @@ module.exports = Backbone.Model.extend({ this.get('CodeManager').getCode(wrp, 'css', { cssc, wrappesIsBody, - dumpUnusedStyles + keepUnusedStyles }) ); }, diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index f89d0d666..9e419da82 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -377,22 +377,38 @@ describe('GrapesJS', () => { expect(editor.Commands.get('export-template').test).toEqual(1); }); - it('Dump unused css classes/selectors', () => { + it('Keep unused css classes/selectors option for getCSS method', () => { config.fromElement = 1; config.storageManager = { type: 0 }; fixture.innerHTML = documentEl; const editor = obj.init(config); - const css = editor.getCss({ dumpUnusedStyles: 1 }); + const css = editor.getCss({ keepUnusedStyles: 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', () => { + it('Keep unused css classes/selectors option for media rules', () => { + cssString = + '.test2{color:red}.test3{color:blue} @media only screen and (max-width: 620px) { .notused { color: red; } } '; + documentEl = '' + htmlString; + config.fromElement = 1; + config.storageManager = { type: 0 }; + fixture.innerHTML = documentEl; + const editor = obj.init(config); + const css = editor.getCss({ keepUnusedStyles: 1 }); + const protCss = editor.getConfig().protectedCss; + expect(editor.getStyle().length).toEqual(3); + expect(css).toEqual( + `${protCss}.test2{color:red;}.test3{color:blue;}@media only screen and (max-width: 620px){.notused{color:red;}}` + ); + }); + + it('Keep unused css classes/selectors option for init method', () => { config.fromElement = 1; config.storageManager = { type: 0 }; fixture.innerHTML = documentEl; - const editor = obj.init({ ...config, dumpUnusedStyles: 1 }); + const editor = obj.init({ ...config, keepUnusedStyles: 1 }); const css = editor.getCss(); const protCss = editor.getConfig().protectedCss; expect(editor.getStyle().length).toEqual(2);